In the previous tutorial, I have discussed angular 2 component with a very simple example that shows some students record. But now in this tutorial, I will discuss nested component in angular 2 (Parent and child component). i.e A component inside another component. This is the continuation to the previous tutorial, so I would recommend you to read previous tutorial “Angular 2 component” before reading this one.
As we already know Angular 2 is all about the components. A component in angular 2 allows us to create a reusable user interface(UI) widget. A component can be used by any other component.
- Introduction to Angular 2 with some core features
- How to setup angular 2 in asp.net mvc 5 application
- Learn Angular 2 components
In the previous tutorial, you have seen the output that shows some static record of students. But now in this tutorial, you will see the below output. There is two part in this below output screenshot. The one is header part(which shows welcome to student record) and the second one is a student record part(which shows student data). So, the key point in this output is that these two parts belong to the different angular components. One component is headerComponent and the second one is studentComponent. We can say headerComponent is child component and the studentComponent is parent component.
Note: – studentComponent is created in the previous tutorial. And the headerComponent will be created in this tutorial. So, if you don’t know how we created studentComponent, then go back to the previous tutorial “Angular 2 component”.
Nested Component in angular 2.
Let’s see how to use the nested component in angular 2.
Step # 1 – Create a new folder.
Go to solution explorer => right click on the app folder => choose Add => new Folder => then enter the name (E.g. header) => click ok button. It will create a new folder under the app folder with the name of “header”
Step # 2 – Create header.component.ts file
Go to solution explorer => right click on the header folder => Add => choose “TypeScript File” => then enter name (E.g. header.component.ts) => then click ok button. It will create a new typescript file with the name header.component.ts. Copy the below code and put into header.component.ts file.
Step # 3 – Create header.component.html file
Go to solution explorer => right click on header folder => Add => choose html file => then enter name (E.g. header.component.html) => then click ok button. It will create a new html file under the header folder. Copy the below simple html code and put into header.component.html file.
Step # 4 – Add Directive to student.component.html
As you know we have created directive <student-header> in header.component.ts file. Now in this step, we will add that directive in student.component.html file. Go to solution explorer => app => student folder => open student.component.html file => and then add this directive <student-header> just above the table tag. See below in code.
Step # 5 – Update app.module.ts file
In this step we will update app.module.ts file. We have to do two changes in app.module.ts file. First, we have to import headerComponent just below studentComponent and then we have to add headerComponent in declarations.
Step # 6 – Run your project
In this step just run your project (ctrl + f5). Then you will see a below screenshot output in your browser.