angularnavngfor

angular nav-menu for loop not displaying

I'm trying to create a nav-menu item with a dropdown menu of projects. I have an array of the projects I want to loop through. I can get the dropdown to work, but if I put in an *ngFor anywhere in the nav menu, the entire dropdown disappears.

If I put the *ngFor in the top li element, it disappears.

I've tried putting the whole code in an ng-container with a for loop, but it also disappears.

I've also tried putting it in the mat-menu, but that throws the error: "Property 'menu' does not exist on type 'NavMenuComponent' at <button mat-button [matMenuTriggerFor]="menu">Project"

I've also tried putting the *ngFor in an Li element with just some text (no buttons or links). Once I add the *ngFor, it completely disappears.

Angular ngfor loop displaying menu This is a related question, but the solution did not work for me.

This is the code for my drop down.

          <li >
             <!--#docregion mat-menu-trigger-for -->
            <button mat-button [matMenuTriggerFor]="menu">Project</button>
             <!--#enddocregion mat-menu-trigger-for -->
            <mat-menu #menu="matMenu">
              <button mat-menu-item class="nav-link text-dark" [routerLink]="['/project-user']">Name of the individual projects</button>
              <button mat-menu-item>Item 2</button>
            </mat-menu>
          </li>

I'm not sure what to do. Here's the top portion of my entire nav menu, if that'll be of use:

<div class="container">
      <a class="navbar-brand" [routerLink]="['/']">TaskManager</a>
      <button
        class="navbar-toggler"
        type="button"
        data-toggle="collapse"
        data-target=".navbar-collapse"
        aria-label="Toggle navigation"
        [attr.aria-expanded]="isExpanded"
        (click)="toggle()"
      >
        <span class="navbar-toggler-icon"></span>
      </button>
      <div
        class="navbar-collapse collapse d-sm-inline-flex justify-content-end"
        [ngClass]="{ show: isExpanded }"
      >
        <ul class="navbar-nav flex-grow">
Solution

  • "Property 'menu' does not exist on type 'NavMenuComponent'

    You are getting this error because you try to put *ngFor on a mat-menu called #menu and that is referenced in matMenuTriggerFor. If you put a *ngFor on this, then it will create multiple mat-menu with same reference and therefore matMenuTriggerFor will not know which menu to open (since duplicate menu's with the same name).

    Instead of adding *ngIf on mat-menu, you can create an empty ng-container inside and then perform your loop in that:

    <li >
    <!--#docregion mat-menu-trigger-for -->
   <button mat-button [matMenuTriggerFor]="menu">Project</button>
    <!--#enddocregion mat-menu-trigger-for -->
   <mat-menu #menu="matMenu">
    <!-- assuming your array of projects is called ALL_PROJECTS -->
    <ng-container *ngFor="let project of ALL_PROJECTS">
        <!-- assuming your project contains 'name' and 'url' property -->
        <button mat-menu-item class="nav-link text-dark" [routerLink]="project.url">{{project.name}}</button>
    </ng-container>
   </mat-menu>
</li>

    You can also create an array of projects with their names and urls instead of hard coding them in your HTML like this:

    class Project {
  name: string;
  url: string;
}

// This is your array of projects
ALL_PROJECTS: Array<Project> = [
  {name: 'Project 1', url: 'project-1-url'},
  {name: 'Project 2', url: 'project-2-url'},
  {name: 'Project 3', url: 'project-3-url'},
]