InnerHTML *ngIf does not work Angular5

Question

To show a pop up on a GIS openlayers map i use the InnerHtml attribute. If a field is false I want to hide is DIV.

It looks like angular ignores my ngif this is my code:

this.content.innerHTML = `
      <div style="width: 150px; float: right; font-size: 13px;" *ngIf="!test">
              ${ test } 
      </div> `

My boolean test is false. Is it true that ngIf does niet work with innerHTML?

thx al lot

Yes, it is true. You would have to compile the HTML, which is not possible in a prod build, where you don't want to ship the template compiler with your app. If you're doing HTML in your TypeScript code: something is wrong. If you use innerHTML, something is generally wrong. — JB Nizet, Jun 28 '18 at 09:52
possible duplicate of https://stackoverflow.com/questions/50809363/click-action-in-an-innerhtml-using-angular4-not-working/50809586 — Pardeep Jain, Jun 28 '18 at 09:57

score 2 · Accepted Answer · answered Jun 28 '18 at 09:53

2

Angular will not entertain your *ngIf when you are using innerHTML

Whenever you pass some content via innerHTML, Angular is just going to render that content does not evaluate any expression or binding within that content like you did by adding a ngIf event.

answered Jun 28 '18 at 09:53

Pardeep Jain

84,110
37
165
215

is there an other way to make *ngif possobible in a popover? – Hans Jul 10 '18 at 11:00
Simply you can check before assigning by varible `test` – Pardeep Jain Jul 10 '18 at 11:27
What do you mean exactly? – Hans Jul 10 '18 at 11:48

score 0 · Answer 2 · answered Sep 18 '18 at 12:45

You need to add and remove the styles like below

constructor(private elRef: ElementRef) { 

 this.elRef.nativeElement.querySelector('#showResponsiveNavbarone')
 .classList.remove('visibletrue');

}
 <style>
  .visiblefalse{
  display: none !important;
}
.visibletrue{
 display: block !important;
}

InnerHTML *ngIf does not work Angular5

2 Answers2