 |
| 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
],
........
........
})
