How to dynamically create div with dynamic Id in angular 4

Question

I am trying to add div with id using typescript but it is not assigning it. I am only getting div

app.component.html

<div class="one" [innerHtml]="htmlToAdd">

</div>

app.component.ts

import { Component } from '@angular/core';
import { Http } from '@angular/http';
import * as shape from 'd3-shape';
import { ElementRef } from '@angular/core';
declare var $: any;

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
   ngOnInit() {

    this.addDiv()

  }

  addDiv(){
     this.htmlToAdd = '<div class="two" id="myId">my div</div>';
  }

}

You probably have to bypass angular's security mechanisms. check this — Fussel
– Fussel, Commented Apr 25, 2018 at 8:11
@ochs.tobi please remove your comment. That's error inducing and completely false. — user4676340
– user4676340, Commented Apr 25, 2018 at 8:14
you cannot add dynamic HTML via innerHTML in angular even with domsanitizer . it just renders the HTML as markup. You need something like dynamic component loading — Niladri
– Niladri, Commented Apr 25, 2018 at 8:18

Fussel · Accepted Answer · 2018-04-25 09:02:37Z

0

To give this an awnser, even tho it might not be an optimal solution. Here is a Stackblitz

In your component

trustedHtml: SafeHtml;

constructor(public s: DomSanitizer) {}

ngOnInit() {
    this.addDiv();
}

public addDiv() {
    this.trustedHtml = this.s.bypassSecurityTrustHtml("<div class='two' id='myId'>my div</div>")
}

and your Html

<div [innerHTML]="trustedHtml"></div>

answered Apr 25, 2018 at 9:02

Fussel

1,8651 gold badge10 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to dynamically create div with dynamic Id in angular 4

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related