Angular innerHTML property not working while try to render button control

Question

I have created angular application.in here, i want to inject some content using [innerHTML] property like below

export class AppComponent  {
  name = 'Angular';
  public bar = 'bars';
  foo = `<div>`+this.bar+`
  </div>
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
`;
}

I have used this in html file like below

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

But I just simply return only div element. button control is not getting rendered.

I have created a stackb sample for your reference. please provide any idea how to do it

sample - https://stackblitz.com/edit/angular-ena2xj?file=src/app/app.component.ts

Reference - Angular HTML binding

Better Use renderer2 service: alligator.io/angular/using-renderer2 — Chellappan வ
– Chellappan வ, Commented May 24, 2019 at 7:04
Better way to manipulte DOM in angular is using Render2 service. — Chellappan வ
– Chellappan வ, Commented May 24, 2019 at 7:11
@Chellappan, Okay bro, using Render2 service might be also a good solution i hope.. — Maniraj Murugan
– Maniraj Murugan, Commented May 24, 2019 at 7:15
hi @Chellappan, is there any guidelines available to use render 2 service — Kumaresan Sd
– Kumaresan Sd, Commented May 24, 2019 at 7:18

Devraj s · Accepted Answer · 2019-05-24 07:01:16Z

20

you should use DomSanitizer

import { Component } from '@angular/core';
import { DomSanitizer } from '@angular/platform-browser'
@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
        constructor(private sanitized: DomSanitizer) {}

   name = 'Angular';
  public bar = 'bars';
  foo = this.sanitized.bypassSecurityTrustHtml( `<div>`+this.bar+`
  </div>
  <button type="button" onclick="alert('Hello world!')">Click Me!</button>
`);
}

answered May 24, 2019 at 7:01

Devraj s

3012 silver badges7 bronze badges

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

4 Comments

Kumaresan Sd Over a year ago

HI @devraj, Thanks for your quick reply. it is working fine

Kumaresan Sd Over a year ago

I have one more doubt. is is possible to create another component and use here

Devraj s Over a year ago

that is not possible.

Mohammad Reza Ghasemi Over a year ago

What about adding attribute binding to the foo? @Devrajs

Maniraj Murugan · Accepted Answer · 2019-05-24 07:05:17Z

1

You can change it to @ViewChild,

Change your ts file like this,

export class AppComponent  {
  @ViewChild('someVar') el:ElementRef;
  name = 'Angular';
  public bar = 'bar';
  ngAfterViewInit() {
  this.el.nativeElement.innerHTML = `<div>`+this.bar+`
  </div><button type="button" onclick="alert('Hello world!')">Click Me!</button>`;
}
}

Working Stackblitz https://stackblitz.com/edit/angular-vnk9ft

answered May 24, 2019 at 7:05

Maniraj Murugan

9,11424 gold badges77 silver badges125 bronze badges

3 Comments

Maniraj Murugan Over a year ago

@kumaresan_sd, Why don't you want to use ViewChild ??

Kumaresan Sd Over a year ago

i don't want to take element reference because i have to inject this in multiple elements.

Maniraj Murugan Over a year ago

@kumaresan_sd, Okay this question stackoverflow.com/questions/48879407/… propose both solutions, and another answer deals with first solution of it.. Hope you got better solution for your problem..

Collectives™ on Stack Overflow

Angular innerHTML property not working while try to render button control

2 Answers 2

4 Comments

3 Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

3 Comments

Linked

Related