I have a component A which only contain a div with an id and a buttons that renders a component inside the div using innterHTML document.getElementById('my-router-outlet').innerHTML = '<app-component-b-page></app-component-b-page>';. But this is not rendering I wonder why?.
I'm trying to avoid using ngIf to be a selector for which component should be rendered for performance reason. Also if I clear the innerHTML does the resources of that component will be cleared?
Okay so a few things here
innerHTML = '<app-component-b-page></app-component-b-page>' is never going to work, angular wont recognise the angular component tag from a innerHTML call
using *ngIf wont affect the performance of the page, so doing the following
<app-component-b-page *ngIf="value === true"></app-component-b-page>
is probably you best option here
*ngIf you can use @ViewChild and ComponentFactoryResolverIn your HTML
<!-- this is where your component will be rendered -->
<div #entry></div>
In your component
import { Component, OnInit, ViewChild, ViewContainerRef, ComponentFactoryResolver } from '@angular/core'
import { YourComponent } from ... // import the component you want to inject
// ...
export class ...
@ViewChild('entry', {read: ViewContainerRef, static: true }) entry: ViewContainerRef;
constructor(
private _resolver: ComponentFactoryResolver
) {}
showComponent() {
const factory = this._resolver.resolveComponentFactory(YourComponent);
// this will insert your component onto the page
const component = this.entry.createComponent(factory);
}
// and if you want to dynamically remove the created component you can do this
removeComponent() {
this.entry.clear();
}
custom and then, when a rodent action on it is recognized, I want to add a custom element. So: <div custom>Beep</div> and the in @HostListener("click")onClick(){}, I'd like to render in <app-icon-boink></app-icon-boink>. I want to believe that it's doable...<div #entry> whereas I don't have that luxury. I'm getting the element injected: constructor(private element: ElementRef){} and can't manipulate it.ComponentFactoryResolver is obsoleted as of v13, it says. I'm sure the suggestion is still valid in an agnostic way, though. So my comment shouldn't be seen as a negative remark. Just an observation to future readers.You are adding the element to the dom directly and it's not rendered by Angular. You should go for the *ngIf.
