diff --git a/src/components/menu/nz-menu.component.spec.ts b/src/components/menu/nz-menu.component.spec.ts
index 885a88c9263..123b5f814b3 100644
--- a/src/components/menu/nz-menu.component.spec.ts
+++ b/src/components/menu/nz-menu.component.spec.ts
@@ -188,6 +188,26 @@ describe('NzMenuComponent', () => {
// const debugElement4 = fixture.debugElement.query(By.directive(NzSubMenuComponent));
// expect(debugElement4.nativeElement.classList.contains('ant-menu-submenu-open')).toBe(true);
})
+
+ it('should apply class based on sub-items select state', () => {
+ const fixture = TestBed.createComponent(TestMenuSubMenu);
+ const testComponent = fixture.debugElement.componentInstance;
+ const debugElement = fixture.debugElement.query(By.directive(NzSubMenuComponent));
+ expect(debugElement).toBeDefined();
+
+ testComponent._mode = 'vertical';
+ testComponent.selectOne = false;
+ fixture.detectChanges();
+ const debugElement1 = fixture.debugElement.query(By.directive(NzSubMenuComponent));
+ expect(debugElement1.nativeElement.classList.contains('ant-menu-submenu-selected')).toBe(false);
+
+ testComponent._mode = 'vertical';
+ testComponent.selectOne = true;
+ fixture.detectChanges();
+ const debugElement2 = fixture.debugElement.query(By.directive(NzSubMenuComponent));
+ expect(debugElement2.nativeElement.classList.contains('ant-menu-submenu-selected')).toBe(true);
+
+ })
});
});
@@ -238,7 +258,7 @@ class TestMenuTheme {
Navigation One
@@ -255,6 +275,7 @@ class TestMenuSubMenu {
isTestOpen = true;
isOpenOne = false;
isOpenTwo = false;
+ selectOne = false;
openChange(value) {
if (!this.isTestOpen) {
diff --git a/src/components/menu/nz-submenu.component.ts b/src/components/menu/nz-submenu.component.ts
index ec555505a43..79fdf26290e 100644
--- a/src/components/menu/nz-submenu.component.ts
+++ b/src/components/menu/nz-submenu.component.ts
@@ -57,6 +57,13 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterViewInit {
@Input() nzOpen = false;
@Output() nzOpenChange: EventEmitter = new EventEmitter();
+ get subItemSelected(): boolean {
+ return !!this.nzMenuComponent.menuItems.find(e => e.selected && e.nzSubMenuComponent === this);
+ }
+ get submenuSelected(): boolean {
+ return !!this.subMenus._results.find(e => e !== this && e.subItemSelected)
+ }
+
clickSubMenuTitle() {
if ((this.nzMenuComponent.nzMode === 'inline') || (!this.isInDropDown)) {
this.nzOpen = !this.nzOpen;
@@ -106,12 +113,16 @@ export class NzSubMenuComponent implements OnInit, OnDestroy, AfterViewInit {
return this.isInDropDown && (this.nzMenuComponent.nzMode === 'horizontal');
}
-
@HostBinding('class.ant-menu-submenu')
get setMenuSubmenuClass() {
return !this.isInDropDown;
}
+ @HostBinding('class.ant-menu-submenu-selected')
+ get setMenuSubmenuSelectedClass() {
+ return this.submenuSelected || this.subItemSelected;
+ }
+
@HostBinding('class.ant-menu-submenu-vertical')
get setMenuVerticalClass() {
return (!this.isInDropDown) && (this.nzMenuComponent.nzMode === 'vertical');