ng-select2 insertAdjacentHTML-CodePudding

How can I insert ng-select2 into my html via insertAdjacentHTML when I click the button? When I try to do this, it shows Empty. Or is there any other better way?

thanks

this.k  ;
    var str = "";
    str  = "<div class=\"row\">";
    str  = "<div class=\"col-md-3\"> ";
    str  = "  <div class=\"form-group\"> ";
    str  = "<ng-select2 [data]=\"s2Locations_List["   this.k   "]\" [width]=\"'100%'\"  ";
    str  = "  (valueChanged)=\"onChange_Locations($event,"   this.k   ")\" class=\"select2\">";
    str  = "</ng-select2> ";
    str  = "  </div>";
    str  = "</div> ";

    str  = " </div>   ";

    this.locationAreaList.nativeElement.insertAdjacentHTML('beforeend', str);
    this.ddlLocations(this.k);

CodePudding user response：

I suggest you don't append html code in this way.

It's better create a component for rendering your dynamic code and load it when you click the button using Dynamic component loader.

Another alternative would be to use content projection to create flexible, reusable components. In this case take a look to conditional content projection.