fix(material/menu): update submenu indication when menu is assigned (#25608)

In #24437 we added the ability to conditionally remove a menu from a menu trigger. The problem is that the flag that determines if the menu item has the small triangle indicator is only set in the constructor. These changes move the logic to the setter and add a `markForCheck` to ensure that the view is in sync.

Author: crisbeto

src/material/legacy-menu/menu.spec.ts

@@ -2304,6 +2304,12 @@ describe('MatMenu', () => {
       expect(menuItems[0].querySelector('.mat-menu-submenu-icon')).toBeTruthy();
       expect(menuItems[1].classList).not.toContain('mat-menu-item-submenu-trigger');
       expect(menuItems[1].querySelector('.mat-menu-submenu-icon')).toBeFalsy();
+
+      instance.levelOneTrigger.menu = null;
+      fixture.detectChanges();
+
+      expect(menuItems[0].classList).not.toContain('mat-menu-item-submenu-trigger');
+      expect(menuItems[0].querySelector('.mat-menu-submenu-icon')).toBeFalsy();
     }));
 
     it('should increase the sub-menu elevation based on its depth', fakeAsync(() => {

src/material/menu/menu-item.ts

@@ -183,6 +183,12 @@ export class MatMenuItem
     this._changeDetectorRef?.markForCheck();
   }
 
+  _setTriggersSubmenu(triggersSubmenu: boolean) {
+    // @breaking-change 12.0.0 Remove null check for `_changeDetectorRef`.
+    this._triggersSubmenu = triggersSubmenu;
+    this._changeDetectorRef?.markForCheck();
+  }
+
   _hasFocus(): boolean {
     return this._document && this._document.activeElement === this._getHostElement();
   }

src/material/menu/menu-trigger.ts

@@ -159,6 +159,8 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
         }
       });
     }
+
+    this._menuItemInstance?._setTriggersSubmenu(this.triggersSubmenu());
   }
   private _menu: MatMenuPanel | null;
 
@@ -257,10 +259,6 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
       this._handleTouchStart,
       passiveEventListenerOptions,
     );
-
-    if (_menuItemInstance) {
-      _menuItemInstance._triggersSubmenu = this.triggersSubmenu();
-    }
   }
 
   ngAfterContentInit() {
@@ -296,7 +294,7 @@ export abstract class _MatMenuTriggerBase implements AfterContentInit, OnDestroy
 
   /** Whether the menu triggers a sub-menu or a top-level one. */
   triggersSubmenu(): boolean {
-    return !!(this._menuItemInstance && this._parentMaterialMenu);
+    return !!(this._menuItemInstance && this._parentMaterialMenu && this.menu);
   }
 
   /** Toggles the menu between the open and closed states. */

src/material/menu/menu.spec.ts

@@ -2315,6 +2315,12 @@ describe('MDC-based MatMenu', () => {
       expect(menuItems[0].querySelector('.mat-mdc-menu-submenu-icon')).toBeTruthy();
       expect(menuItems[1].classList).not.toContain('mat-mdc-menu-item-submenu-trigger');
       expect(menuItems[1].querySelector('.mat-mdc-menu-submenu-icon')).toBeFalsy();
+
+      instance.levelOneTrigger.menu = null;
+      fixture.detectChanges();
+
+      expect(menuItems[0].classList).not.toContain('mat-mdc-menu-item-submenu-trigger');
+      expect(menuItems[0].querySelector('.mat-mdc-menu-submenu-icon')).toBeFalsy();
     }));
 
     it('should increase the sub-menu elevation based on its depth', fakeAsync(() => {

tools/public_api_guard/material/menu.md

@@ -219,6 +219,8 @@ export class MatMenuItem extends _MatMenuItemBase implements FocusableOption, Ca
     role: 'menuitem' | 'menuitemradio' | 'menuitemcheckbox';
     // (undocumented)
     _setHighlighted(isHighlighted: boolean): void;
+    // (undocumented)
+    _setTriggersSubmenu(triggersSubmenu: boolean): void;
     _triggersSubmenu: boolean;
     // (undocumented)
     static ɵcmp: i0.ɵɵComponentDeclaration<MatMenuItem, "[mat-menu-item]", ["matMenuItem"], { "disabled": "disabled"; "disableRipple": "disableRipple"; "role": "role"; }, {}, never, ["mat-icon", "*"], false>;