Child Components In Angular
In this article, we will learn about how to add a child component to our Angular application. To create a new Angular project, we use the Angular CLI command ng new. It produces AppComponent, which is the application's main component. Using the selector <app-root>, the AppComponent is bootstrapped in the AppModule and loaded in the index.html file. <app-root>Loading...</app-root>. Let's add another component to the program in this article.
What is a Child Component
Each Angular Component oversees a distinct activity or workflow in Angular component-based architecture. Each Component is a reusable unit's independent block.
Many Angular Components will be present in real-world Angular apps. The root component's sole purpose is to host these child components. These child components, in turn, can host further child components, forming a Component Tree-like structure.
In this article, we will learn how to create a child or nested component and add it to the App Component.
Create a new application
Using the following command, create a new Angular application.
ng new child-component
How to add Child Component
- Create the Child Component by following the steps below. Metadata in the child Component specifies the selector to be used.
- In the module class, import the Child Component and declare it in the declaration Array.
- In the Parent Component Template, use the CSS Selector to designate where you want the Child Component to appear.
Adding a Child Component in Angular
Make a child component.
Customer Class
export class Customer {
customerNo: number;
name:string ;
address:string;
city:string;
state:string;
country:string;
}
Create Child Component
ng g c customer-list
import { Component } from '@angular/core';
import { Customer } from './customer';
@Component({
selector: 'customer-list',
templateUrl: './customer-list.component.html'
})
export class CustomerListComponent
{
customers: Customer[] = [
{customerNo: 1, name: 'Rahuld Dravid', address: '', city: 'Banglaore', state: 'Karnataka', country: 'India'},
{customerNo: 2, name: 'Sachin Tendulkar', address: '', city: 'Mumbai', state: 'Maharastra', country: 'India'},
{customerNo: 3, name: 'Saurrav Ganguly', address: '', city: 'Kolkata', state: 'West Bengal', country: 'India'},
{customerNo: 4, name: 'Mahendra Singh Dhoni', address: '', city: 'Ranchi', state: 'Bihar', country: 'India'},
{customerNo: 5, name: 'Virat Kohli', address: '', city: 'Delhi', state: 'Delhi', country: 'India'},
]
}
import { Component } from '@angular/core';
import { Customer } from './customer';
@Component({
selector: 'customer-list',
templateUrl: './customer-list.component.html'
})
export class CustomerListComponent
{
customers: Customer[] = [
{customerNo: 1, name: 'Rahuld Dravid', address: '', city: 'Banglaore', state: 'Karnataka', country: 'India'},
{customerNo: 2, name: 'Sachin Tendulkar', address: '', city: 'Mumbai', state: 'Maharastra', country: 'India'},
{customerNo: 3, name: 'Saurrav Ganguly', address: '', city: 'Kolkata', state: 'West Bengal', country: 'India'},
{customerNo: 4, name: 'Mahendra Singh Dhoni', address: '', city: 'Ranchi', state: 'Bihar', country: 'India'},
{customerNo: 5, name: 'Virat Kohli', address: '', city: 'Delhi', state: 'Delhi', country: 'India'},
]
}
<h2>List of Customers</h2>
<table class='table'>
<thead>
<tr>
<th>No</th>
<th>Name</th>
<th>Address</th>
<th>City</th>
<th>State</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let customer of customers;">
<td>{{customer.customerNo}}</td>
<td>{{customer.name}}</td>
<td>{{customer.address}}</td>
<td>{{customer.city}}</td>
<td>{{customer.state}}</td>
</tr>
</tbody>
</table>
Import the Child Component in the Module
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import {NgbModule} from '@ng-bootstrap/ng-bootstrap';
import { AppComponent } from './app.component';
import {CustomerListComponent} from './customer-list.component';
@NgModule({
declarations: [
AppComponent, CustomerListComponent
],
imports: [
BrowserModule,NgbModule.forRoot()
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
import { AppComponent } from './app.component';
import {CustomerListComponent} from './customer-list.component';
@NgModule({
declarations: [
AppComponent, CustomerListComponent
]
<h1>{{title}}. </h1>
<customer-list></customer-list>
<customer-list></customer-list>