Nested navigation menu with CdkMenu

Question

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)

Answer 1

Apply { static: true } in @ViewChild should resolve the issue:

@ViewChild('childMenu', { static: true }) public childMenu!: TemplateRef<any>;

Demo @ StackBlitz