Dynamically inject item to Mat Menu on runtime

Question

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?

Answer 1

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.