I am looking to create a unique dynamic component with a custom template that resolves interpolations based on the dynamic component's context.
To achieve this, I understand that I can utilize the following code snippet to generate a dynamic component (ensure it is listed in entryComponents within the module):
Here is my initial static component:
@Component({
selector: 'html-type',
template: `<ng-template #htmlcontrolcomponent></ng-template>`
})
export class HtmlTypeComponent implements AfterViewInit{
@ViewChild('htmlcontrolcomponent', { read: ViewContainerRef }) entry: ViewContainerRef;
constructor(private resolver: ComponentFactoryResolver) {
super();
}
ngAfterViewInit() {
this.createComponent("<div>{{contextvar}}</div>");
}
createComponent(template) {
this.entry.clear();
const factory = this.resolver.resolveComponentFactory(HtmlControlComponent);
const componentRef = this.entry.createComponent(factory);
componentRef.instance.template = template; // seeking alternative methods
}
This is the component to be dynamically included:
import { Component} from '@angular/core';
@Component({
selector: 'html-control',
template: '',
})
export class HtmlControlComponent {
contextvar: string = "This is my current context";
}
Is there a way to update the template of a dynamically generated component?
The goal here is for the dynamic component's template to be customizable, allowing user input and sanitization. Can you suggest a method?