CODEWITHSUNDEEP
angulartypescriptangular-material
Sruthish
Sruthish

Reputation: 53

Dynamically inject item to Mat Menu on runtime

I'm using the mat menu to display the available options in my project as the breadcrumb. when I'm trying to add a new item, it adds to DB and the array object gets it properly, but the angular mat-menu doesn't update.

This is my reference I'm using: https://stackblitz.com/edit/dynamic-nested-topnav-menu-vq6jmd?file=app%2Fapp.component.ts

Can you tell me how to make mat-menu to load data on runtime?

Upvotes: 1

Views: 1593

Answers (2)

Sruthish
Sruthish

Reputation: 53

I removed the Child component and I've added it within the parent component and my dynamic data is loaded now.

As in the example, I Removed the menu-item component and binded it with in the app component.

Upvotes: 0

talhature
talhature

Reputation: 2165

Arrays' content change does not trigger Angular's change detection mechanism.

You can either do it by calling detectChanges manually after adding the new item.

this.changeDetector.detectChanges();

Check this answer for the details: https://stackoverflow.com/a/41298329/11420760

Or you can just reassign your array this will trigger it

Upvotes: 1

Related Questions