Category: Uncategorized
Section 11 Routing ActivatedRoute
ActivatedRoute service: snapshot property and snapshot.params property: activatiatedRoute.snapshot.params[‘param name’] params (Observable): activatedRoute.params.subscribe((param: Params) => {…} )
Section 11 Routing
In order to route different component, you have to set up router in the app.module.ts file const myRoutes: Routes = [ {path: ‘xxx’, component: ComponentName} ]; imports: […, RouterModule.forRoot(myRoutes)] <router-outlet>/</router-outlet> represents where should render the contents routerLink directive sets up the links, two methods can be use: (1) <a routerLink = “/address” (directly write the
Section 9 Service
Service file is wrote by TypeScript, and don’t need to add decorator @, but if the current service file is need to inject other service from other service file, it need to add decorator: @Injectable(). So right now Angular suggests add @Injectable() in any service files, no matter what it is needed to inject or
Section 7 Directive & @HostListener & @HostBinding
ng generate directive directvie-name ng g d directive-name @Directive({selector: ‘[directiveName]’}) export class directiveNameDirective {} @Directive({ selector: ‘[appHighlight]’ }) export class HightlightDirective implements OnInit { constructor(private elementRef: ElementRef){} ngOnInit() { this.elementRef.nativeElement.style.backgroundColor = ‘gree’; //this will overwrite the style of the element that uses the attribute ‘appHighlight’ } } @Directive({ selector: ‘[appBetterHighlight]’ }) export class BetterHighlightDirective implements
Section 5 – 73 Local references & @ViewChild() & @ContentChild() decorator
You can put local references in any template of your angular app, and start with #, such as <input type=”text” id=”test” #localReference>, so you can only use this local reference in this template but not in typescript. Notice, this local reference represents the whole element, such as #localReference represent the whole input element that includes
ç 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