CODEWITHSUNDEEP
javascriptangular
msdosx86
msdosx86

Reputation: 946

Can I use component inside another component in Angular?

Something like this

<app-component1>
   <app-component2></app-component2>
</app-component1>

I did't find about it in Angular docs. When I use component in component, it shows nothing

Upvotes: 2

Views: 6962

Answers (2)

EunChong Lee
EunChong Lee

Reputation: 189

Yes, You can nesting component 

@Component({
   selector: 'app-root',
   directives: [MyChildComponent]
   template: '<div><ChildComponent></ChildComponent></div>'
})
export class AppComponent {}

@Component({
   selector: 'ChildComponent',
   template: '<h2>Child component</h2>'
})
export class MyChildComponent {}

https://codecraft.tv/courses/angular/quickstart/nesting-components-and-inputs/

Upvotes: -1

Ankit Sharma
Ankit Sharma

Reputation: 1704

You need to add <ng-content></ng-content> in the template file for <app-component1> where you wish to include <app-component2></app-component2>.

For example, below could be the HTML file for the component1:-

<div>
  <ng-content></ng-content> <!-- component 2 inserted here -->
</div>

Upvotes: 4

Related Questions