Angular 5 adding html content dynamically

Question

I have following angular to add dynamically loaded content:

main.html

<div class="top">
 <ng-template #main></ng-template>
</div>

main.ts

import { Component, ViewChild, ComponentFactoryResolver, ViewContainerRef } from '@angular/core';
@Component({
 selector: 'page-main_page',
 templateUrl: 'main_page.html'
})
export class main_page { 
 @ViewChild('main', { read: ViewContainerRef }) entry: ViewContainerRef;
 data: any;
constructor(public resolver: ComponentFactoryResolver){ 
}; 
 ngOnInit(){ 
 this.getDynamicREST().then((res)=>{
 this.data = res; //Where it is a html markup from php server: <div class="sample"> Example </div>
 const factory = this.resolver.resolveComponentFactory(this.data);
 this.entry.createComponent(factory);
 })
 };
}

In the getDynamicRest(), I am getting a html markup from php server such as :

 <div class="sample"> Example </div>

However I am getting an error "Error: No component factory found for <div class="sample"> Example </div>"

Any suggestions would be much appreciated.

Answer 1

The ComponentFactoryResolver's resolveComponentFactory method accepts an Angular Component.

In your case, you are injecting HTML into your template, not a component. To inject HTML, save it in a variable and use the DomSanitizer to either sanitize it or bypass the security check:

export class main_page {
 data: SafeHtml;
 constructor(private sanitizer: DomSanitizer) {} 
 ngOnInit(){ 
 this.getDynamicREST().then((res)=> {
 this.data = this.sanitizer.sanitize(res);
 /* OR */
 this.data = this.sanitizer.bypassSecurityTrustHtml(res);
 })
 };
}

Then, in your template:

<div class="top">
 <div [innerHtml]="data"></div>
</div>

• Pipo: The sanitize should use this.sanitizer.sanitize(SecurityContext.HTML, res)
• Darey: Do you know, how do we dynamically inject html(which has bindings). How does the binded values represent. the purpose is to make the binding work with the properties which are in the component.
• Saad: @Darey any solution ?
• Sherif eldeeb: I think that that this method is not suitable for angular components or directives. ex: <my-component></..> or <div [myDirective]="something">
• bokkie: @Saad but from what I read, in order for the bindings to work, I need to declare the inputs and the outputs. But I don't know them. My scenario is that I have a list of user created items, that can have whatever properties the user wants to add to them, and when one gets selected, on the right side I need to display the details. The details come as html from the backend, built with bindings and all, and in another call the data that needs to be bound. Do you have any suggestion?

Answer 2

There is a new library that does the job. It is called ngx-dynamic-hooks. Link here.

With this one you don't have to disable AOT (as with ngx-dynamic-template, link here).

Answer 3

 let transporter = nodemailer.createTransport({
 host :'smtp.gmail.com',
 service: 'gmail', 
 secure : false,
 port : 465,
 requireTLS: true,
 auth : {
 user : '[email protected]',
 pass : 'PAssword', 
 }
 }); 
 var email = req.body.email`enter code here`;
 let htmlContent = `<h1><strong>Foreget Password Link Form</strong></h1>
 <p>Hi,</p>
 <p>http://localhost:4200/forget/${email} contacted with the following Details</p>`;
 let mailoptions = {
 from : '[email protected]',
 to : req.body.email,
 subject : 'tesst',
 text: '',
 html: htmlContent
 };
 transporter.sendMail(mailoptions,function(err,data){
 if(err){
 console.log('errr',err)
 }else{
 console.log('email send');
 }
 });

• Adrian Mole: While this code may solve the question, including an explanation of how and why this solves the problem would really help to improve the quality of your post, and probably result in more up-votes. Remember that you are answering the question for readers in the future, not just the person asking now. Please edit your answer to add explanations and give an indication of what limitations and assumptions apply.