Angular material navigation doesn't work properly

Question

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.

Answer 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.