Sander,
Thanks for your reply and help. I did found another solution, which I will
post below as I hadn't found a method similar to yours. I have tweaked the
solution I found to work for my needs, however, I am interested in finding
out more about your way. With your method, can I use Directives, structural
and custom, as well as Angular EventListeners in the loaded HTML code?
Thanks again!
import {
Compiler, Component, Injector, VERSION, ViewChild, NgModule, NgModuleRef,
ViewContainerRef
} from '@angular/core';
@Component({
selector: 'my-app',
template: `
<h1>Hello {{name}}</h1>
<ng-container #vc></ng-container>
`
})
export class AppComponent {
@ViewChild('vc', {read: ViewContainerRef}) vc;
name = `Angular! v${VERSION.full}`;
constructor(private _compiler: Compiler,
private _injector: Injector,
private _m: NgModuleRef<any>) {
}
ngAfterViewInit() {
const tmpCmp = Component({
moduleId: module.id, templateUrl: './e.component.html'})(class {
});
const tmpModule = NgModule({declarations: [tmpCmp]})(class {
});
this._compiler.compileModuleAndAllComponentsAsync(tmpModule)
.then((factories) => {
const f = factories.componentFactories[0];
const cmpRef = f.create(this._injector, [], null, this._m);
cmpRef.instance.name = 'dynamic';
this.vc.insert(cmpRef.hostView);
})
}
}
On Wednesday, December 26, 2018 at 10:57:25 PM UTC-7, Sander Elias wrote:
>
> Hi Scott,
>
> Your use-case is quite common. The easiest way is to create a component to
> show your loaded code.
> I Added a small module to my samples repo
> <https://github.com/SanderElias/Samples/blob/master/src/app/html-load/htmlload/htmlload.component.ts>.
>
> You can check that out.
>
> the gist is this:
> ngOnInit() {
> /** I don't need to unsubscribe, because htmlLoad completes */
> this.html.load('Some url provided').subscribe(html => {
> /**
> * setting innerHTML doesn't "run" scripts,
> * instead create a document fragment
> */
> const frag = document.createRange().createContextualFragment(html);
> /** erase old content */
> this.elm.innerHTML = '';
> /** add the new 'html' to the page */
> this.elm.appendChild(frag);
> });
> }
>
> I hope this helps you.
>
> Regards
> Sander
>
>
>
--
You received this message because you are subscribed to the Google Groups
"Angular and AngularJS discussion" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
To post to this group, send email to [email protected].
Visit this group at https://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.
