Whenever a user clicks a button, I trigger the following method.
@ViewChild("privs") privs: ElementRef;
addPrivs() {
this.privs.nativeElement
.insertAdjacentHTML('beforeend', '<generic1>yey!</generic1>');
}
This is how my markup looks like.
<generic1>woosh</generic1>
<div #privs></div>
I've declared the subcomponent named generic1 in the module's imports as follows.
import { Component } from "@angular/core";
@Component({
selector: "generic1",
template: "<div>mamba...</div>"
})
export class Generic1 { }
The problem I'm facing is that the statically created component in the markup displays correctly, but the dynamically appended one doesn't. Upon inspecting the DOM, I notice that the generic1 tag is added, but Angular does not render it (I can see the text yey! and the tag but not the actual component).
Any idea what I might be missing?
I've searched online for examples, but haven't found anything indicating an issue with my setup. It must be something beyond my current understanding...