Welcome back to the Learn Angular 8 in 10 Days article series - Part 2. In the previous article, we discussed the basic concept of Angular including the benefits of Angular, Why it is a framework, etc. Now, in this article, we will discuss the Concept of Components. If you want to read the previous articles of this series, then follow the links.

So, in this article, we will discuss the Components in Angular 8. The component is the main building block of any Angular 8 applications. Components are composable, we can build larger components using multiple smaller components. Angular 8 is basically a component-based MVVM framework. So, before going to discuss how to create or use a component in Angular 8, first, we need to understand what is a component and why it is required in the current web-based application developments?

What is a Component?

A Component is basically a class that is defined for any visible element or controls on the screen. Every component class has some properties and by using them, we can manipulate the behavior or looks of the element on the screen. So, we can create, update, or destroy our own components as per the requirement at any stage of the application. But in TypeScript, a component is basically a TypeScript class decorated with an @Component() decorator. From an HTML point of view, a component is a user-defined custom HTML tag that can be rendered in the browser to display any type of UI element along with some business logic.

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...';
}

Decorators are mainly JavaScript functions that amend the decorated class in some way. A component is an independent, complete block of code that has the required logic, view, and data as one unit. As a developer for creating a component, we just need to define a class by providing some related configuration objects as an argument or parameter to the decorator function. Logically every component in Angular 8 acts as an MVC concept itself. Since each component class is an independent unit, it is highly reusable and can be maintained without messing with other components.

Why need Component-Based Architecture?

As per the current trend in web application development, the component-based architecture will act as the most usable architecture in future web development. Because, with the help of this technique, we can reduce both development time and cost in a large volume in any large-scale web development project. That’s why technical experts currently recommend implementing this architecture in web-based application development. So, before going to discuss components in-depth, let's discuss why this component-based architecture is required for web-based development.

@Component Metadata

So in Angular, when we want to create any new component, we need to use the @Component decorator. @Component decorator basically classifies a TypeScript class as a component object. Actually, @Component decorator is a function that takes different types of parameters. In the @Component decorator, we can set the values of different properties to finalize or manipulate the behavior of the components. The most commonly used properties of the @Component decorator are as follows.

In the below example, we demonstrate how to define a component using some of the above properties like selector and template.

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

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

Now, in the below example, we will demonstrate how to use other @Component decorator properties like templateUrls.

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...';
}

So, in the above example, we will separate the HTML file for storing the HTML part related to the components. As per the above example, we need to place both the TypeScript file and HTML file in the same location. If we want to place the HTML in a separate folder, then we can use that file in the component decorator using a relative file path. Below is the sample code is written in the app.component.html file.

<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.

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.

Run application

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.

Angular demo

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)

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.

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.

Check 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.

Demostration

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)