angular 2 access ng-content within component

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

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

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.