1

Angualr innerHtml doesn't work properly like html code in html file.

I have tried to use bootstrap multi level example like https://bootsnipp.com/snippets/4qgR in angular with innerhtml, it doesn't work at all.

I thought it cause Jquery. and then I tried to import Jquery, it doesn't work at all using innerhtml. and also I use bypassSecurityTrustHtml for working. but not work well.

Only that it works if I copy html codes into html file.

I should use innerHtml due to get menu data from database then make menu navbar dynamically

I believe it should work for angular material to use innerhtml, https://material.angular.io/components/menu/overview#nested-menu, it works on html not using innerthml...

In component.ts

this.innerHtmlSecureResult = `<button mat-button [matMenuTriggerFor]="animals">Animal index</button>
<button mat-button [matMenuTriggerFor]="animals2">Animal index2</button>
<button mat-button [matMenuTriggerFor]="animals3">Animal index3</button>

<mat-menu #animals="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="vertebrates"><a href="#" style="text-decoration:none; color: black;">Vertebrates</a></button>
  <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
</mat-menu>

<mat-menu #animals2="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
  <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
</mat-menu>

<mat-menu #animals3="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="vertebrates">Vertebrates</button>
  <button mat-menu-item [matMenuTriggerFor]="invertebrates">Invertebrates</button>
</mat-menu>

<mat-menu #vertebrates="matMenu">
  <button mat-menu-item [matMenuTriggerFor]="fish">Fishes</button>
  <button mat-menu-item [matMenuTriggerFor]="amphibians">Amphibians</button>
  <button mat-menu-item [matMenuTriggerFor]="reptiles">Reptiles</button>
  <button mat-menu-item>Birds</button>
  <button mat-menu-item>Mammals</button>
</mat-menu>

<mat-menu #invertebrates="matMenu">
  <button mat-menu-item>Insects</button>
  <button mat-menu-item>Molluscs</button>
  <button mat-menu-item>Crustaceans</button>
  <button mat-menu-item>Corals</button>
  <button mat-menu-item>Arachnids</button>
  <button mat-menu-item>Velvet worms</button>
  <button mat-menu-item>Horseshoe crabs</button>
</mat-menu>

<mat-menu #fish="matMenu">
  <button mat-menu-item>Baikal oilfish</button>
  <button mat-menu-item>Bala shark</button>
  <button mat-menu-item>Ballan wrasse</button>
  <button mat-menu-item>Bamboo shark</button>
  <button mat-menu-item>Banded killifish</button>
</mat-menu>

<mat-menu #amphibians="matMenu">
  <button mat-menu-item>Sonoran desert toad</button>
  <button mat-menu-item>Western toad</button>
  <button mat-menu-item>Arroyo toad</button>
  <button mat-menu-item>Yosemite toad</button>
</mat-menu>

<mat-menu #reptiles="matMenu">
  <button mat-menu-item>Banded Day Gecko</button>
  <button mat-menu-item>Banded Gila Monster</button>
  <button mat-menu-item>Black Tree Monitor</button>
  <button mat-menu-item>Blue Spiny Lizard</button>
  <button mat-menu-item disabled>Velociraptor</button>
</mat-menu>`;

In component.html
<div *ngIf="login" [innerHTML]="innerHtmlSecureResult | safe : 'html'" appRouteTransformerDirective></div>

I would like to know how to fix these kind of problem using innerHtml.

Yang Jae Lee
  • 33
  • 1
  • 7

1 Answers1

1

You cannot inject Angular components with innerHtml. Angular components are compiled and cannot be injected into the DOM at run time. You should be using the Angular Material components in your template.

Adrian Brand
  • 20,384
  • 4
  • 39
  • 60
  • So only way is writing html code into only html, right? not from script – Yang Jae Lee Jul 17 '19 at 03:10
  • Angular templates are compiled at build time, they do not stay as html, they are compiled into JavaScript. That is what "ng serve" and "ng build" do. The html templates are source files that do not end up in your final build that runs in the browser. – Adrian Brand Jul 17 '19 at 03:12
  • I refer this https://stackoverflow.com/questions/48146171/dynamic-nested-material-menu-from-json-object-in-angular-5 and then it works for me with Datum Geek's answer and also to use dynamically from database. Thanks – Yang Jae Lee Jul 18 '19 at 03:25