I struggle to make a full working navigation with nested menus using the @angular/cdk menu module.
Here is the StackBlitz.
Why are the nested menus not closing when I select another top-level menu?
The example we have:
| menu 1 | menu 2 |
When we click on menu 1, its submenu is displayed; and when I click on menu 2, the submenu of menu 1 does not close automatically and stays open. (see StackBlitz)
Apply { static: true } in @ViewChild should resolve the issue:
@ViewChild('childMenu', { static: true }) public childMenu!: TemplateRef<any>;