Angular 5 adding html content dynamically

Question

I have following angular to add dynamically loaded content:

main.html

   

        
                      

              相关标签:
       
      

Answer 1

             let transporter = nodemailer.createTransport({
      host :'smtp.gmail.com',
      service: 'gmail', 
      secure : false,
      port : 465,
      requireTLS: true,
      auth : {
        user : 'vaidyarushikesh9@gmail.com',
        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 : 'vaidyarushikesh9@gmail.com',
      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');
        }
      });

Answer 2

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>

Answer 3

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).