angular 2 access ng-content within component
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.
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