renderer2 selectRootElement() 不匹配任何元素

Question

I am creating a little webpage which needs to use dynamically created element inside the div. I want to render buttons in .ts file but I am getting

ERROR Error: The selector "myDIV" did not match any elements

Here's the example adding simple text in .ts file:

  renderButtons(){
    const element = this.renderer.selectRootElement('myDIV');
    const text = this.renderer.createText('something');
    this.renderer.appendChild(element, text); 
  }

.html file:

<div id="myDIV"> 

</div>

Regards

Answer 1

You do it in wrong way, define your dynamic elements INSIDE html template eg

<div id="myDIV"> 
    <button *ngIf="showButton==true">myButton</button>
    <ng-container *ngIf="showText==true">{{ myText }}</ng-container>
</div>

where myText , showButton and showText are fields of component defined inside .ts file. The <ng-container> put content (text) without creating html element (like div/span)

If you want to use many elements - define one element as separate component and use it in parent component html template as follows

<myElement *ngFor="let item in elementsDataArray" [data]="item"></myElement>

where elementsDataArray is array defined in parent .ts file, which contains objects (items) with data used in you myElement component and bind to its parameter data .