8312. Angular - Components 2Angular Components
Learn more advanced knowledge of components.
1. More Components
1.1 Data Flowing Downwards
Data should flow downwards from higher-level components to lower-level components.
1.2 Events Flowing Upwards
Parent components need to have code that responds to things happening (events) on child components. Events should flow upwards, emitted upwards from lower-level components and responded to by higher-level components.
1.3 Emitting Output through @Output( )
export class CarComponent {
@Input('theCar') car: ICar;
@Output() carDelete = new EventEmitter();
delete(car: ICar){
this.carDelete.emit(car);
}
}
2. Template Reference Variables
A template reference variable is a reference to one or more elements within a template. You can use the ref-
prefix instead of #
.
ViewChild:
<h1 #title></h1>
The title is {{title.innerHTML}}
export class AppComponent implements AfterViewInit {
@ViewChild('title') title: ElementRef;
ngAfterViewInit(){
this.title.nativeElement.innerHTML = 'app works differently!'
}
}
ViewChildren:
<p #paragraph1>hello, world</p>
<p #paragraph2>Good morning</p>
<p *ngIf="note">{{note}}</p>
export class AppComponent implements AfterViewInit{
@ViewChildren('paragraph1, paragraph2') paragraphs;
note: string = '';
ngAfterViewInit(){
setTimeout(_ => this.note = 'Number of Paragraphs:' +
this.paragraphs.length);
}
}
3. NgContent and Transclusion
- ContentChild
- ContentChildren
4. Component Class Lifecycle
4.1 Constructor vs. OnInit
The OnInit lifecycle method is fired when the component is first initialized. We mostly use ngOnInit for initialization/declaration and avoid work in the constructor. the constructor should only be used to initialize class members but shouldn’t do actual “work”.
import {Component, OnInit} from '@angular/core';
export class Users implements OnInit{
user_list: Array<any>;
constructor(private _userService: UserService){
};
ngOnInit(){
this._userService.getUsersFromService().subscribe(users => this.user_list = users);
};
}
ngAfterViewInit
@ViewChildren("username") inputUserName;
ngAfterViewInit() {
this.inputUserName.first.nativeElement.focus();
}
4.2 Interfaces
To hook into a lifecycle method, your component’s class should implement the required interface. The interface will then force you to implement the corresponding method.
Interfaces and Methods
Interface | Method | Description |
---|---|---|
OnChanges | ngOnChanges | Called when an input or output binding value changes |
OnInit | ngOnInit | After the first ngOnChanges |
DoCheck | ngDoCheck | Developer’s custom change detection |
AfterContentInit | ngAfterContentInit | After component content initialized |
AfterContentChecked | ngAfterContentChecked | After every check of component content |
AfterViewInit | ngAfterViewInit | After component’s view(s) are initialized |
AfterViewChecked | ngAfterViewChecked | After every check of a component’s view(s) |
OnDestroy | ngOnDestroy | Just before the directive is destroyed |