ViewChildren change text content for an element added dynamicly

Question

I want to change the text content inside a span property by accessing it by an Id. When the spans elements exist already, I am able to change the content after hitting a button, but when the spans elements are added dynamicly, the text content does not change even if the new added span element exist in the DOM. How can I access an Id of an element added dynamicly and change his content ?

Template code

<span class="classTarget" #target>Original text</span>
<span class="classTarget" #target>Original text</span>
<button (click)="changeText()"</button>
<button (click)="insertNewLine()"</button>

Ts code

@ViewChildren('target') targets: QueryList<ElementRef>;

changeText() {
    this.targets.forEach(el => {
        //The text is updated except for the elements added dynamicly !
        el.nativeElement.textContent = "New Text";
    });
}

insertNewLine() {
    const newSpan = <span class="classTarget" #target>Original text</span>;
    this.el.nativeElement.parentElement.insertAdjacentHTML('beforeend', newSpan);
}