Accessing innerText inside Component - html

Question

I'm having pretty simple component that looks like this and basicly does the job.
import { Component, Input } from '#angular/core';
#Component({
selector: 'app-code',
template: ' <pre><code [highlight]="code" [languages]="languages" [lineNumbers]="true"></code></pre> '
})
export class CodeComponent {
readonly languages = ['java'];
#Input()
code = '';
constructor() {
}
}
But, I'd like to make minor change to it
#Component({
selector: 'app-code',
template: '<pre><code [highlight]="code" [languages]="languages" [lineNumbers]="true"></code></pre>'
})
export class CodeComponent {
readonly languages = ['java'];
code = '';
constructor(private elem: ElementRef) {
this.code = elem.nativeElement.innerText;
}
}
So instead of writing
<app-code [code]="'some code goes here'"></app-code>
I can write
<app-code>some code goes here</app-code>
Unfortunatelly, It's not working, my code block remains empty

Answer 1

You cannot get innerText because CodeComponent is not drawn.
You need to use ngAfterViewInit.
#Component({
selector: 'app-code',
template: '<pre><code [highlight]="code" [languages]="languages" [lineNumbers]="true"></code></pre>'
})
export class CodeComponent {
readonly languages = ['java'];
code = '';
constructor(private elem: ElementRef) {
}
ngAfterViewInit() {
this.code = elem.nativeElement.innerText;
}
}