Learn Angular 8 Step By Step in 10 Days – Components (Day 2)

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Welcome to Angular 8 Learning Series...';
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: 'Welcome to Angular 8 Learning Series...'
})
export class AppComponent {
}

import { Component } from '@angular/core';

@Component({
  moduleId: module.id,
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  title = 'Welcome to Angular 8 Learning Series...';
}

<div style="text-align:center">
    <h1>
        Welcome to {{ title }}!
    </h1>
</div>

Life Cycle of a Component

Just like other frameworks, Angular components have their own life cycle events that are mainly maintained by Angular itself. Below is the list of life cycle events of any Angular components. In Angular, every component has a life-cycle, a number of different stages it goes through from initialization to destruction. There are eight different stages in the component lifecycle. Every stage is called a life cycle hook event. So, we can use these component lifecycle events in different stages of our application to obtains complete controls on the components.

• ngOnChanges: This event executes every time a value of an input control within the component has been changed. This event activates first when the value of a bound property has been changed.
• ngOnInit: This event is executed at the time of Component initialization. This event is called only once, just after the ngOnChanges() events. This event is mainly used to initialize data in a component.
• ngDoCheck: This event is executed every time when the input properties of a component are checked. We can use this life cycle method to implement the checking on the input values as per our own logic check.
• ngAfterContentInit: This lifecycle method is executed when Angular performs any content projection within the component views. This method executes only once when all the bindings of the component need to be checked for the first time. This event executes just after the ngDoCheck() method.
• ngAfterContentChecked: This life cycle hook method executes every time the content of the component has been checked by the change detection mechanism of Angular. This method is called after the ngAfterContentInit() method. This method can also be executed on every execution of the ngDoCheck() event.
• ngAfterViewInit: This life cycle method executes when the component completes the rendering of its view fully. This life cycle method is used to initialize the component’s view and child views. It is called only once, after ngAfterContentChecked(). This lifecycle hook method only applies to components.
• ngAfterViewChecked: This method is always executed after the ngAterViewInit() method. Basically, this life cycle method is executed when the change detection algorithm of the angular component occurs. This method automatically executes every execution time of the ngAfterContentChecked().
• ngOnDestroy: This method will be executed when we want to destroy the Angular components. This method is very useful for unsubscribing the observables and detaching the event handlers to avoid memory leaks. It is called just before the instance of the component being destroyed. This method is called only once, just before the component is removed from the DOM.

Nested Component

In the above section, we discussed the different aspects of components, like the definition, metadata, and life-cycle events. So, when we develop an application, it is very often that there are some requirements or scenarios where we need to implement a nested component. A nested component is one component inside another component, or we can say it is a parent-child component. The first question that might be raised in our mind is: “Does Angular framework support these types of components?” The answer is yes. We can put any number of components within another component. Also, Angular supports the nth level of nesting in general.

Demo 1. Basic Component

Now, we need to create a new component in our Angular 8 Projects. So, either we can create a new project or use the same project as the previous article. In the project folder, we have a component file named app.component.ts. Now, we will first develop a component with inline HTML contains. For that purpose, we will make the below changes in the existing app.component.ts file.

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Component is the main Building Block in Angular</h1>'
})
export class AppComponent {

}

Now after making the following changes, run the application in the browse.

Demo 2. Apply Style into the Content

Now, we need to apply the styles in the above component. So, for that, we will make the below changes in the component. First, we will apply the inline styles in the component.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Component is the main Building Block in Angular</h1> <h2>Angular 8 Samples</h2>',
  styles: ['h1 { color: red; font-weight: bold; }', 'h2 { color: blue; }']
})
export class AppComponent {

}

Now after making the following changes, run the application in the browse.

Demo 3. Use External Stylesheet File for Component

In the previous demo, we used the inline style sheet to decorate the HTML content within the component. Now it is fine when we just need to use styles in one component. But, if we want to apply the same styles in all the components, then we need to use the external stylesheet within the component. Now, we will discuss how to use an external style sheet in any component. First, we need to create a new style sheet file named custom.css within the project and then add the below code within the same file.

/* You can add global styles to this file, and also import other style files */

h1 {
    color: red;
    font-weight: bold;
    font-size: 30px;
}

h2 {
    color: blue;
    font-size: 20px;
}

p {
    color: brown;
    font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}

Now, just put the style.css reference path in the styleUrls properties within the app.component.ts file.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template: '<h1>Component is the main Building Block in Angular</h1> <h2>Angular 8 Samples</h2>',
  styleUrls : ['./custom.css']
})
export class AppComponent {

}

Now reload the browser for the output (which is just same as the previous demo)

Demo 4. Use External HTML File for Component Content

Similar to the external style, we can also use the external HTML file for the HTML code part. For that, we first need to add a new HTML file called app.component.html in the app folder and write down the below code.

<h1>Component is the main Building Block in Angular</h1>
<h2>Angular 8 Samples</h2>
<p>
    Use of <b>External HTML</b> files with the Component
</p>

Now make the below changes in the app.component.ts file for pass the external HTML file path reference.

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./custom.css']
})
export class AppComponent {

}

Now, refresh the browser for the output.

Demo 5. Component Life Cycle Demo

Now in this demo, we will demonstrate the life cycle events of a component. For that, add the below code in the app.component.ts file –

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls : ['./custom.css']
})
export class AppComponent {
  data: number = 100;

  constructor() {
    console.log(`new - data is ${this.data}`);
  }

  ngOnChanges() {
    console.log(`ngOnChanges - data is ${this.data}`);
  }

  ngOnInit() {
    console.log(`ngOnInit  - data is ${this.data}`);
  }
}

Now add the below code in app.component.html file.

<span class="setup">Given Number</span>
<h1 class="punchline">{{ data }}</h1>

Now refresh the browser to check the output.

Demo 6. Nested or Parent-Child Component

In Angular, we can develop any component as a parent-child concept. For that purpose, we need to use the child component selector within the parent component HTML file. So, first, we need to develop a child component as below.

child.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'child',
  templateUrl: './child.component.html',
  styleUrls : ['./custom.css']
})
export class ChildComponent {

}

child.component.html

<h2>It is a Child Component</h2>
<p>
    A component is a Reusable part of the application.
</p>

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./custom.css']
})
export class AppComponent {

}

app.component.html

<h1>Demostration of Nested Component in Angular</h1>
<h3>It is a Parent Component</h3>
<child></child>

Now include the child component into the app.module.ts file as below.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { ChildComponent } from './child.component';

@NgModule({
  declarations: [
    AppComponent,
    ChildComponent
  ],
  imports: [
    BrowserModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Now, refresh the browser to check the output.

Conclusion

In this article, we discussed different aspects of the component. Also, we discussed the different metadata properties of the components and benefits of the component structure, including the life cycle events of a component. Now, in the next article, we will discuss another important feature of Angular i.e. Data Binding. I hope, this article will help you. Any feedback or query related to this article is most welcome.

Next Article, Learn Angular 8 Step By Step in 10 Days – Data Binding (Day 3)