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">
"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'},
]