I am interested in dynamically creating a component inside another component. This will allow me to pass my dynamic HTML template directly to the decorator like this:
//code
/**
* @param template is the HTML template
* @param container is @ViewChild('dynamicFront', { read: ViewContainerRef }) _containerFront: ViewContainerRef;
*/
private addComponent(template, container) {
@Component({
template: template
})
class DynamicComponent {
constructor(public _parent: TemplateEditorComponent) {
this._parent.templateForm.controls['field_heading'].valueChanges.subscribe(value => {
console.log(value);
})
}
}
@NgModule({
imports: [
ReactiveFormsModule,
BrowserModule,
EditorModule
],
declarations: [DynamicComponent, EditableDivDirective, InlineEditorDirective]
})
class DynamicComponentModule { }
const mod = this.compiler.compileModuleAndAllComponentsSync(DynamicComponentModule);
const factory = mod.componentFactories.find((comp) =>
comp.componentType === DynamicComponent
);
const component = container.createComponent(factory);
}
and in the HTML component I am displaying the template like this:
<ng-template #dynamicFront></ng-template>
I am encountering some build errors such as the template not being a string, etc. My goal is to display raw HTML content retrieved from the database and allow users to edit text within this raw HTML template using TinyMCE for editing purposes.