How to Nest Component in Angular 4

Posted by

How to Nest Component in Angular 4

Hello and welcome to another lesson of Angular 4. In this lesson, I am going to talk about how to nest a component in another component. Nesting component in another component is very easy. In this lesson, I am going to generate another component name “nest” in the app directory. If you don’t know how to generate component, then please read our previous article here, How to make new component using CLI. For now, I am going to generate nest component with less detail. So to generate nest component type the following command in Terminal.

 ng g c nest

After generating the nest component, cut and paste the and from app.component.html to nest.component.html, like:

<app-header> </app-content>
<app-content> </app-content>

And then type <app-nest> </app-nest> in the app.component.html, as given below:

Welcome to {{title}}!
<h1> {{string}} </h1>
<!—The new header component is here -->
<app-nest> </app-nest>


Nesting component in Angular 4 is very easy. All you need to have is a basic understanding of how to generate a component and how to work in it. First of all, generate new component, then cut and paste the selector form existing component.html to new component.html and in last declare it in the new component.html, That’s it. If you want to know How to generate a new component, click on the below link:

How to make new component using CLI

Suggested Books

Angular JS for Beginners: Your Guide to Easily Learn Angular JS In 7 Days

Angular JS for Beginners contains the steps, strategies, and techniques you need to know and use Angular, a well-supported and widely-used JavaScript framework for single page reactive applications.

Leave a Reply

Your email address will not be published. Required fields are marked *