angular 2 access ng-content within component

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.

3
Leave a Reply

avatar
3 Comment threads
0 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
1 Comment authors
Jason Recent comment authors
  Subscribe  
newest oldest most voted
Notify of
Jason
Guest

https://angular.io/api/core/ContentChildren

class SomeDir implements AfterContentInit {

  @ContentChildren(ChildDirective) contentChildren : QueryList<ChildDirective>;

  ngAfterContentInit() {
    // contentChildren is set
  }
}

Note that if you do console.log(contentChildren), it will only work on ngAfterContentInit or a later event.

Jason
Guest

You need to leverage the @ContentChild decorator for this. @Component({ selector: 'upper', template: `<ng-content></ng-content>` }) export class UpperComponent { @Input content: String; @ContentChild(...) element: any; } Edit I investigated a bit more your issue and it’s not possible to use @ContentChild here since you don’t have a root inner DOM element. You need to leverage the DOM directly. Here is a working solution: @Component({ selector: 'upper', template: `<ng-content></ng-content>` }) export class UpperComponent { constructor(private elt:ElementRef, private renderer:Renderer) { } ngAfterViewInit() { var textNode = this.elt.nativeElement.childNodes[0]; var textInput = textNode.nodeValue; this.renderer.setText(textNode, textInput.toUpperCase()); } } See this plunkr for more details: https://plnkr.co/edit/KBxWOnyvLovboGWDGfat?p=preview

Jason
Guest

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