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: https://alligator.io/angular/using-renderer2/ — Chellappan வ, May 24 '19 at 07:04
Better way to manipulte DOM in angular is using Render2 service. — Chellappan வ, May 24 '19 at 07:11
@Chellappan, Okay bro, using Render2 service might be also a good solution i hope.. — Maniraj Murugan, May 24 '19 at 07:15
hi @Chellappan, is there any guidelines available to use render 2 service — Kumaresan Sd, May 24 '19 at 07:18
Hi @kumaresan_sd Check this:alligator.io/angular/using-renderer2 — Chellappan வ, May 24 '19 at 07:21
HI @ManirajfromKarur, i have one more scenario, how to achieve this https://stackblitz.com/edit/angular-phv9ry?file=src/app/app.component.ts — Kumaresan Sd, May 24 '19 at 07:31
i have created one component and i want to render it using this innerHTML property — Kumaresan Sd, May 24 '19 at 07:32
reference - https://stackoverflow.com/questions/56289132/can-not-use-another-component-in-innerhtml-property-binding — Kumaresan Sd, May 24 '19 at 08:56

score 15 · Accepted Answer · answered May 24 '19 at 07:01

15

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 '19 at 07:01

Devraj s

251
2
7

HI @devraj, Thanks for your quick reply. it is working fine – Kumaresan Sd May 24 '19 at 07:03
I have one more doubt. is is possible to create another component and use here – Kumaresan Sd May 24 '19 at 07:04
that is not possible. – Devraj s May 24 '19 at 07:05

score 1 · Answer 2 · answered May 24 '19 at 07:05

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 '19 at 07:05

Maniraj Murugan

8,868
20
67
116

@kumaresan_sd, Why don't you want to use ```ViewChild``` ?? – Maniraj Murugan May 24 '19 at 07:09
i don't want to take element reference because i have to inject this in multiple elements. – Kumaresan Sd May 24 '19 at 07:10
@kumaresan_sd, Okay this question https://stackoverflow.com/questions/48879407/innerhtml-is-not-working-for-some-tags-like-button-or-custom-tags propose both solutions, and another answer deals with first solution of it.. Hope you got better solution for your problem.. – Maniraj Murugan May 24 '19 at 07:12

Angular innerHTML property not working while try to render button control

2 Answers2