Nested Component in Angular 5

In this article ,I will show you about nested component in angular 5.

Step 1 : First create the angular 5 project https://programmergangtuts.blogspot.com/2018/02/creating-first-angular-5-project.html .Go to cmd and run as administrator->navigate to your project folder and in project folder type 'ng g c customer' .Here AngularDemo is our project which was previously created and shown below :

Step 2 : When you run above command ,customer folder and necessary files are created inside it which is as shown below :

Step 3 : When you run the above command ,it will automatically register the newly generated component inside declarations array of @NgModule which is shown below :

Step 4 : Go to src->app->customer->customer.component.ts and paste the following code ;

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

@Component({
  selector: 'app-customer',
  templateUrl: './customer.component.html',
  styleUrls: ['./customer.component.css']
})
export class CustomerComponent implements OnInit {
  customerName:string;
  customerCode:string;
  constructor() { 
    this.customerName="Manichandra Rai";
    this.customerCode="1001";
  }

  ngOnInit() {
  }

}

Step 5 : Go to src->app->customer->customer.component.html and paste the following code :

<table>
  <tr>
    <td>Customer Code</td>
    <td>Customer Name</td>
  </tr>
  <tr>
    <td>{{customerCode}}</td>
    <td>{{customerName}}</td>
  </tr>
</table>

Step 6 : Go to src->app->customer->customer.component.css and paste the following code :

table{
    color:black;
    font-family: Arial, Helvetica, sans-serif;
    font-size: large;
    border-collapse: collapse;
}
td{
    border: 1px solid black;
}

Step 7 : Go to src->app->app.component.ts and paste the following code :

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

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

Step 8 : Go to src->app->app.component.html and paste the following code :

<!--The content below is only a placeholder and can be replaced.-->
<P class="customstyle">
  {{title}}
</P>
<p><app-customer></app-customer></p>

Step 9: Go to src->app->app.component.css and paste the following code :

.customstyle{
 font-weight:bold;
 color:red;
font-style:italic;
text-decoration: underline;
font-size: x-large;
}

Step 10 : Go  to cmd  and type 'ng serve --open' and hit enter and you will get the following output :

Happy Coding !!!