I want to apply html component in existing application.
@Component({
selector: 'my-app',
template: `<ng-container> {{html}} </ng-container>`
})
export class AppComponent {
html = '<my-app></my-app>';
}
@Component({
selector: 'my',
template: `<span>{{name}}</span>`
})
export class MyComponent {
name = 'test';
}
it writes screen "<my-app></my-app>" but it should be "test"
It won't work like with Angular. Maybe if you use angular elements.
First thing you need to do is bind the html using [innerHtml] binding on some element. You also need to mark the html as trusted https://angular.io/api/platform-browser/DomSanitizer. Once you have done this a my-app element will be added to the DOM but this is not an angular component. If you use angular elements, it will get turned into a component. The downside is that all the interactions with a dynamic created component (via html) will need to be via the dom element. The upside is that now you can create your angular components from anywhere, including jQuery, angular Js or what ever.
import { Component, Input } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser';
@Component({
selector: 'custom-hello',
template: `
<h1>Hello {{name}}!</h1>
<div [innerHtml]="test"></div>
`,
styles: []
})
export class CustomHelloComponent {
@Input() name: string;
constructor(
private sanitizer: DomSanitizer,
) {
}
test = this.sanitizer.bypassSecurityTrustHtml('<my-test-component name="dynamic"></my-test-component>');
}
@Component({
selector: 'my-test-component',
template: `<h1>Hello {{name}}!</h1>`,
styles: []
})
export class MyTestComponent {
@Input() name: string;
}
The angular way of showing a dynamic component is below as documented here (https://angular.io/guide/dynamic-component-loader) but you will need the component reference, not the selector (and the component needs to be in the module's entryComponentes):
https://stackblitz.com/edit/ng-dyn-component?file=src/app/app.component.ts
@Directive({
selector: '[container-ref]',
})
export class ContainerRefDirective {
constructor(public viewContainerRef: ViewContainerRef) { }
}
@Component({
selector: 'my-app',
template: `<ng-template container-ref></ng-template>`
})
export class AppComponent {
@ViewChild(ContainerRefDirective, { static: true })
container: ContainerRefDirective;
constructor(private cfr: ComponentFactoryResolver) {
}
ngOnInit() {
const componentFactory = this.cfr.resolveComponentFactory(MyComponent);
const viewContainerRef = this.container.viewContainerRef;
const componentRef = viewContainerRef.createComponent(componentFactory);
}
}
@Component({
selector: 'my',
template: `<span>{{name}}</span>`
})
export class MyComponent {
name = 'test';
}
sanitizer.bypassSecurityTrustHtml('<my-test-component name="dynamic"></my-test-component>') parameter is static hard coded component string. I am getting is from binding as a variable. So it did not worked for me.