CODEWITHSUNDEEP
typescriptangular
Thomas
Thomas

Reputation: 10065

Accessing the component's values when using `<ng-content>`

Looking for a method to access the component's values when using <ng-content>:

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

@Component({
  selector: 'home-page',
  template: `<person-box>{{name}}</person-box> <!-- something like this -->`
})
export class HomePageComponent {
  // missing code?
}

Component's code:

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';
}

(Above example is of course very simplified.)

When using @ViewChild it works:

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

@Component({
  selector: 'home-page',
  template: `<person-box>{{box.name}}</person-box>`
})
export class HomePageComponent {
  @ViewChild(PersonBoxComponent) box: PersonBoxComponent;
}

Upvotes: 1

Views: 110

Answers (1)

G&#252;nter Z&#246;chbauer
G&#252;nter Z&#246;chbauer

Reputation: 657338

@ContentChild(PersonBoxComponent) box:PersonBoxComponent;

ngAfterContentInit() {
  console.log(this.box);
}

Upvotes: 3

Related Questions