Seeking a technique for accessing the values of a component when utilizing <ng-content>:
import {Component} from '@angular/core';
@Component({
selector: 'home-page',
template: `<person-box>{{name}}</person-box> <!-- something similar -->`
})
export class HomePageComponent {
// code missing?
}
Code for the component:
import {Component} from '@angular/core';
@Component({
selector: 'person-box',
template: `<div style="background-color: blue;"><ng-content></ng-content></div>`
})
export class PersonBoxComponent {
name = 'Katharina Muster';
}
(The example above is quite simple.)
Using @ViewChild makes it function properly:
import {Component} from '@angular/core';
@Component({
selector: 'home-page',
template: `<person-box>{{box.name}}</person-box>`
})
export class HomePageComponent {
@ViewChild(PersonBoxComponent) box: PersonBoxComponent;
}