I would like to get the innerText of the ng-content
of a component as a simple string to be able to reuse it.
I tried something like this:
@Component({
selector: 'my-comp',
template: `
<div class="text-container">
<span class="text" [title]="text">{{text}}</span>
</div>
<ng-template #text>
<ng-content></ng-content>
</ng-template>
`
})
export class MyComponent implements AfterViewInit {
@ViewChild('text') text: TemplateRef<string>;
ngAfterViewInit(): void {
console.log(this.text);
}
}
And I use it like this:
<my-com>
My simple string text
</my-com>
The goal is to get my string My simple string text
into the variable text
...
Thoughts?
I don't think what you want can be made work (see comments below your question)
My suggestion is
<ng-template #text>My simple string text</ng-template>
<my-comp [text]="text"></my-comp>
and get it like
@Input() text: TemplateRef<string>;
ngAfterViewInit(): void {
console.log('text', this.text);
}
Then you can use the template reference to output it
<ng-container *ngTemplateOutlet="text"></ng-container>