I am struggling to insert HTML content into a specific id by using Angular. Although the HTML displays, the functionality of ngModel and click event is not working. How do I resolve this issue?
app.component.html
<div id="myid">
</div>
app.component.ts
import { Component, ElementRef } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
mytext = "insert text here"
constructor(private myElement: ElementRef) {}
ngOnInit() {
this.insertDiv()
}
showAlert(){
alert("Hello")
}
insertDiv(){
var div = document.createElement('div');
div.innerHTML = `<div>
<input type="text" [(ngModel)]="mytext">
<button type="button" class="btn (click)="showAlert()">Click Me</button>
</div>`;
this.myElement.nativeElement.querySelector('#myid').append(div)
}
}