angular 2 access ng-content within component

Question

How can I access the "content" of a component from within the component class itself?

I would like to do something like this:

<upper>my text to transform to upper case</upper> 

How can I get the content or the upper tag within my component like I would use @Input for attributes?

@Component({     selector: 'upper',     template: `<ng-content></ng-content>` }) export class UpperComponent {     @Input      content: String; } 

PS: I know I could use pipes for the upper case transformation, this is only an example, I don't want to create an upper component, just know how to access the component's content from with the component class.

Answer 1

If you want to get a reference to a component of the transcluded content, you can use:

@Component({     selector: 'upper',     template: `<ng-content></ng-content>` }) export class UpperComponent {     @ContentChild(SomeComponent) content: SomeComponent; } 

If you wrap <ng-content> then you can access access to the transcluded content like

@Component({     selector: 'upper',     template: `   <div #contentWrapper>     <ng-content></ng-content>   </div>` }) export class UpperComponent {     @ViewChild('contentWrapper') content: ElementRef;      ngAfterViewInit() {       console.debug(this.content.nativeElement);     } }