Components in Angular
Components
Components are one of the basic building block of any angular applications. Component contains html code to display a view, css code to styling a view, and typescript code to control a view. A component can be created using @Component() decorator and this decorator holds below property:-
moduleId: [ ]
If it set, the templateUrl and styleUrl are resolved relative to the angular component.
viewProviders: [ ]
List of dependency injection providers scoped to this or current component's view.
template: [ ]
It contains the inline template of the component's view.
templateUrl: [ ]
It contains the external template URL of the component's view.
styles: [ ]
It contains the list of inline CSS styles for styling the component’s view.
styleUrls: [ ]
It contains the external stylesheet URLs for styling the component’s view.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
title = 'my-first-project';
}
<div style="text-align:center">
<h1>Welcome to {{ title }}!</h1>
</div>
h1 {
color: green;
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [
AppComponent
]
})
export class AppModule { }
import { TestBed, async } from '@angular/core/testing';
import { AppComponent } from './app.component';
describe('AppComponent', () => {
beforeEach(async(() => {
TestBed.configureTestingModule({
declarations: [
AppComponent
],
}).compileComponents();
}));
it('should create the app', () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app).toBeTruthy();
});
it(`should have as title 'my-first-project'`, () => {
const fixture = TestBed.createComponent(AppComponent);
const app = fixture.debugElement.componentInstance;
expect(app.title).toEqual('my-first-project');
});
it('should render title in a h1 tag', () => {
const fixture = TestBed.createComponent(AppComponent);
fixture.detectChanges();
const compiled = fixture.debugElement.nativeElement;
expect(compiled.querySelector('h1').textContent).toContain('Welcome to my-first-project!');
});
});
Component Lifecycle Hooks
A Angular component/directive has a lifecycle that provide visibility into these key life moments and the ability to act when they occur. Once component/directive is getting created, Angular calls the constructor first, and then it calls the lifecycle hook methods in the following sequence.
| Hook | Purpose and Timing |
|---|---|
| ngOnChanges() | Called before ngOnInit() every time, as soon as a bound input property changes. |
| ngOnInit() | Called after ngOnChanges() once the angular component is initialized. |
| ngDoCheck() | Called immediately after ngOnChanges() and ngOnInit() during every change detection run. |
| ngAfterContentInit() | Called once after the first ngDoCheck() and as soon as an angular performs any content projection into the view. |
| ngAfterContentChecked() | Called every time after the ngAfterContentInit() and every subsequent ngDoCheck() as soon as the projected content has been checked. |
| ngAfterViewInit() | Called once after the first ngAfterContentChecked() and as soon as the component view and its child views has been initialized. |
| ngAfterViewChecked() | Called after the ngAfterViewInit() and every subsequent ngAfterContentChecked() and every time the component view and its child views have been checked. |
| ngOnDestroy() | Called once the component is about to destroyed. It unsubscribe Observables and detach event handlers to avoid memory leaks. |
import {
OnInit, OnChanges, DoCheck, AfterContentInit,
AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestory
} from '@angular/core';
.......
.......
export class LifecycleHooksComponent implements OnInit, OnChanges, DoCheck, AfterContentInit,
AfterContentChecked, AfterViewInit, AfterViewChecked, OnDestory {
constructor() { }
ngOnInit() {
console.log('ngOnInit');
}
ngOnChanges() {
console.log('ngOnChanges');
}
ngDoCheck() {
console.log('ngDoCheck');
}
ngAfterContentInit() {
console.log('ngAfterContentInit');
}
ngAfterContentChecked() {
console.log('ngAfterContentChecked');
}
ngAfterViewInit(){
console.log('ngAfterViewInit');
}
ngAfterViewChecked(){
console.log('ngAfterViewChecked');
}
ngOnDestroy(){
console.log('ngOnDestory');
}
}