Access transcluded content

Question

I have a componenet which i use to display a block of code which is transcluded in the component

 console.log(\"Asd\")
         


        

Answer 1

The <ng-content> element will never be added to the DOM itself, therefore adding a template variable and querying for it doesn't work.
You can wrap <ng-content> with another element and add the template variable there and query this element using @ViewChild().

Then you can just get the innerHTML of the wrapper element

@Component({
    selector: 'item',
    template: '<div #wrapper><ng-content></ng-content></div>'})
class Item implements AfterContentInit {

    @ViewChild('wrapper') wrapper:ElementRef;
    @Input() type:string = "type-goes-here";

    ngAfterContentInit() {
        console.log(this.wrapper.nativeElement.innerHTML); // or `wrapper.text`
    }
}

See also Get component child as string