Category: Udemy – Maximilian Schwarzmüller
ç Data Binding @Input(‘alias name’) & @Outpu()
The properties of components you create can only be used in this component inside, such as: export class RecipeListComponent implements OnInit { recipes: Recipe[] = [ new Recipe(‘A Test Recipe’, ‘This is simple a test’, ‘https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg’), new Recipe(‘A Test Recipe’, ‘This is simple a test’, ‘https://cdn.pixabay.com/photo/2016/06/15/19/09/food-1459693_960_720.jpg’) ]; constructor() { } ngOnInit(): void { }} in
Section 2-5 Attribute Directives
ngStyle: accept object with key-value pair, key is CSS property name, such as backgroudColor; value is CSS property value, and if this value is string, you have to use single quotation marker (this is not as normal CSS syntax, because Angular will treat content in double quotation marker as angular syntax), so for value part,
Section 2-5 Structure Directives
*ngIf: only display element when the condition is true, such as: *ngIf = “condition” *ngFor: repeat display element for several time, such as: *ngFor = “let elem of elements; let i = index”, elements is an array, elem represent each element of an array from index 0, index is the index of an array
Section 2-4 Data binding
String Interpolation: {{data}} Property Binding: [property]=”data” Event Binding: (event)=”expression” Two-Way-Binding: [(ngModel)]=”data” String Interpolation: {{data}}, in double curly brace, you can use property, expression that will return a string, or method that return string. Remember, in in double curly brace, you can use anything that return a string or can be converted into a string, however,
Section 2-2 component
It is better to put all files in a new folder named with a meaningful name, such as : server first name component.ts file, which name is normally folder’s name, such as: server.component.ts Component is just Class, angular could instantiate it to create objects in order to let angular understand this class, it should use
Section 2-3 Module
For simple project, only one module is enough, which bundles different components. @NgModule({}) decorator includes: declarations[], imports:[], providers[], bootstrap: [AppComponet] declarations: should declare all components
Section 2-1 How Angular Boots Application
How the Angular app start main.ts file will be executed first, where there is a function, called bootstrapModule(AppModule), that will connect the module in the argument. this module should be a module created by angular, in this module (AppModule) (app.module.ts), it points out bootstrap component (AppComponent) (App.Component.ts) this component has defined the selector (app-root), and
Basic TypeScript
TypeScript could sign variables with different type, and after sign the type, you couldn’t assign other type of value to this variable, or errors will pop up. Syntax: let test: string, if you assign number to this variable, it will be errors. type of variable: :string, :number, :array<string>, :boolean, :any sometimes, TypeScript could infer the
Environment of Running Angular
Install Node.js from https://nodejs.org/en/ Check Node.js version command: node -v Update NPM: sudo npm install -g npm Install Angular CLI (Command Line Interface): sudo npm install -g @angular/cli@latest Check angular verion: ng version | ng –version | ng v