Angular - Nested Components Angular

Figure 1

 Adding a component to another component is Nested Components in Angular. 

From Figure 1, 

• EmployeeDetails header should come from AppComponent 
• And the below table contains employee Details should come from another component.

3 steps need to be followed to achieve this.

Step 1:

• Create a new folder employeecomponent and add below files inside 
• EmployeeComponent.ts
• app.EmployeeComponent.html 

                    

Folder structure after adding files

Step 2:

Add below changes in the newly added files

• EmployeeComponent.ts
• import { Component } from "@angular/core";

  @Component(

      {

          selector:'Employees',

          templateUrl:'app.EmployeeComponent.html'  

      }

  )

  export class EmployeeComponent

  {

      FirstName : string = "Angular";

      LastName : string = "Tutorial";

  }

• app.EmployeeComponent.html 
• <table border="1px">

      <tr>

          <td>FirstName</td>

          <td>{{FirstName}}</td>

      </tr>

      <tr>

          <td>LastName</td>

          <td>{{LastName}}</td>

      </tr>

  </table>

Step 3:

Import the component in app.module.ts and add EmployeeComponent in declaration as below and compile and Run the application. We will get the desired output as seen at the top

import { EmployeeComponent } from "./employeecomponent/EmployeeComponent";

@NgModule({

  declarations: [

    AppComponent,     

    EmployeeComponent

  ],

........

........

})