Ad

Angular Component Inside Angular Component? ``

I've tried with ng-template and with ng-container, but I can't figure out how to include a component inside a component…

import { Component } from '@angular/core';


@Component({
  selector: 'hello',
  //  template: `<h1>Hello</h1><div>I am in a div<ng-container></ng-container>; now this is end</div>`,
  template: `<h1>Hello</h1><div>I am in a div<ng-template></ng-template>; now this is end</div>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {}


@Component({
  selector: 'intestines',
  template: 'Eww',
  styles: []
})
export class IntestinesComponent  {}


@Component({
  selector: 'my-app',
  template: `<hello><intestines></intestines></hello>`,
  styles: [ 'p { font-family: Lato; }' ]
})
export class AppComponent  {}

https://stackblitz.com/edit/angular-2b2yl3

Ad

Answer

Use ng-content

@Component({
  selector: 'hello',
  template: `<h1>Hello</h1><div>I am in a div<ng-content></ng-content>; now this is end</div>`,
  styles: [`h1 { font-family: Lato; }`]
})
export class HelloComponent  {}

Also check this article may be useful for you.

Ad
source: stackoverflow.com
Ad