From 611b6d4b17601a36c967b6324e121c7812409347 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Tue, 20 Oct 2026 17:36:31 +0300 Subject: [PATCH 1/3] fix(nav-toggle): fixing the nav toggle and close directives targets --- CHANGELOG.md | 2 + .../core/src/core/navigation/directives.ts | 20 +++++++- .../navigation-drawer.component.spec.ts | 47 ++++++++++++++++++- 3 files changed, 66 insertions(+), 3 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b8297582c72..15c30ee84ad 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -24,6 +24,8 @@ All notable changes for each version of this project will be documented in this - Touch pans no longer leave slides partially moved or visible behind the current slide, for example when a pan is cancelled, reversed past the first or last slide of a non-looping carousel, released as a tap, or interrupted by removing slides or changing `gesturesSupport` or `vertical`. - Panning a carousel without slides no longer throws an error, and panning a carousel with a single slide no longer moves the slide against itself. - A slide activated through its `active` property now animates in the direction of its position, or in its own `direction` when one is set. +- `IgxNavigationToggleDirective`, `IgxNavigationCloseDirective` + - The `igxNavToggle` and `igxNavClose` inputs can now be set in applications compiled with `strictTemplates`. Previously the inputs were private and setting them failed the template type check. ## 22.2.3 diff --git a/projects/igniteui-angular/core/src/core/navigation/directives.ts b/projects/igniteui-angular/core/src/core/navigation/directives.ts index 0ea6582939a..b53269c8f49 100644 --- a/projects/igniteui-angular/core/src/core/navigation/directives.ts +++ b/projects/igniteui-angular/core/src/core/navigation/directives.ts @@ -15,7 +15,15 @@ import { IgxNavigationService } from './nav.service'; standalone: true }) export class IgxNavigationToggleDirective { - @Input('igxNavToggle') private target: any; + /** + * The ID of the target registered in the navigation service, which is toggled on click. + * + * @example + * ```html + * + * ``` + */ + @Input('igxNavToggle') public target: any; public state: IgxNavigationService; @@ -45,7 +53,15 @@ export class IgxNavigationToggleDirective { standalone: true }) export class IgxNavigationCloseDirective { - @Input('igxNavClose') private target: any; + /** + * The ID of the target registered in the navigation service, which is closed on click. + * + * @example + * ```html + * + * ``` + */ + @Input('igxNavClose') public target: any; public state: IgxNavigationService; diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts index 18b64f96325..63c7ecfb5c0 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts +++ b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts @@ -5,7 +5,7 @@ import { By } from '@angular/platform-browser'; import { nextFrame } from '../../../test-utils/ui-interactions.spec'; import { advance, useFakeClock } from '../../../test-utils/helper-utils.spec'; import { IgxNavigationDrawerComponent } from './navigation-drawer.component'; -import { IgxNavigationService } from 'igniteui-angular/core'; +import { IgxNavigationCloseDirective, IgxNavigationService, IgxNavigationToggleDirective } from 'igniteui-angular/core'; import { IgxNavDrawerItemDirective, IgxNavDrawerMiniTemplateDirective, IgxNavDrawerTemplateDirective } from './navigation-drawer.directives'; import { IgxNavbarComponent } from 'igniteui-angular/navbar'; import { IgxFlexDirective, IgxLayoutDirective } from 'igniteui-angular/directives'; @@ -148,6 +148,33 @@ describe('Navigation Drawer', () => { expect(drawer.isOpen).toBeFalsy(); }); + it('should open and close through the igxNavToggle and igxNavClose directives', async () => { + const fixture = TestBed.createComponent(TestNavDirectivesComponent); + fixture.detectChanges(); + const drawer = fixture.componentInstance.navDrawer; + const toggleButton: HTMLElement = fixture.nativeElement.querySelector('#toggle'); + const closeButton: HTMLElement = fixture.nativeElement.querySelector('#close'); + expect(drawer.isOpen).toBeFalsy(); + + toggleButton.click(); + expect(drawer.isOpen).toBeTruthy(); + toggleButton.click(); + expect(drawer.isOpen).toBeFalsy(); + + toggleButton.click(); + closeButton.click(); + expect(drawer.isOpen).toBeFalsy(); + closeButton.click(); // should do nothing + expect(drawer.isOpen).toBeFalsy(); + + // a target that is not registered in the navigation service is ignored + expect(() => { + fixture.nativeElement.querySelector('#toggleMissing').click(); + fixture.nativeElement.querySelector('#closeMissing').click(); + }).not.toThrow(); + expect(drawer.isOpen).toBeFalsy(); + }); + it('async API calls should emit events', async () => { await TestBed.compileComponents(); const fixture = TestBed.createComponent(TestComponentDIComponent); @@ -873,6 +900,24 @@ class TestComponentDIComponent { public drawerWidth: string | number; } +@Component({ + providers: [IgxNavigationService], + selector: 'igx-test-cmp-nav-directives', + template: ` + + + + + + `, + changeDetection: ChangeDetectionStrategy.Eager, + imports: [IgxNavigationDrawerComponent, IgxNavigationToggleDirective, IgxNavigationCloseDirective] +}) +class TestNavDirectivesComponent { + @ViewChild(IgxNavigationDrawerComponent, { static: true }) + public navDrawer: IgxNavigationDrawerComponent; +} + @Component({ selector: 'igx-test-cmp-pin', providers: [IgxNavigationService], From 59267bc01128ed145562a50291959a07b6bbc5c2 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Wed, 21 Oct 2026 16:43:03 +0300 Subject: [PATCH 2/3] Update CHANGELOG.md Co-authored-by: ivanvpetrov <110455887+ivanvpetrov@users.noreply.github.com> --- CHANGELOG.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 8f1ae27a0b2..8bcac092eea 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -28,7 +28,7 @@ All notable changes for each version of this project will be documented in this - Panning a carousel without slides no longer throws an error, and panning a carousel with a single slide no longer moves the slide against itself. - A slide activated through its `active` property now animates in the direction of its position, or in its own `direction` when one is set. - `IgxNavigationToggleDirective`, `IgxNavigationCloseDirective` - - The `igxNavToggle` and `igxNavClose` inputs can now be set in applications compiled with `strictTemplates`. Previously the inputs were private and setting them failed the template type check. + - The `igxNavToggle` and `igxNavClose` inputs are now public, so they can be set in applications compiled with `strictInputAccessModifiers`. Previously the inputs were private and setting them failed the template type check. - `IgxStepperComponent` - When the steps are rendered with `@for`, no `ExpressionChangedAfterItHasBeenCheckedError` is thrown on init in development mode, and the active step and the step indicators are rendered on init in `OnPush` hosts. - `activeChange` is no longer emitted twice for the step activated on init, or for steps bound to `[active]="false"` that were not active. It is now emitted for the steps whose collapse animation is interrupted by changing `orientation`, `verticalAnimationType` or `horizontalAnimationType`. From 63f2666489b52ef3876ace8fff7d4acd91f2c992 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Wed, 21 Oct 2026 16:43:21 +0300 Subject: [PATCH 3/3] Update projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts Co-authored-by: ivanvpetrov <110455887+ivanvpetrov@users.noreply.github.com> --- .../navigation-drawer.component.spec.ts | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts index 63c7ecfb5c0..a41bc52357f 100644 --- a/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts +++ b/projects/igniteui-angular/navigation-drawer/src/navigation-drawer/navigation-drawer.component.spec.ts @@ -162,17 +162,19 @@ describe('Navigation Drawer', () => { expect(drawer.isOpen).toBeFalsy(); toggleButton.click(); + expect(drawer.isOpen).toBeTruthy(); closeButton.click(); expect(drawer.isOpen).toBeFalsy(); closeButton.click(); // should do nothing expect(drawer.isOpen).toBeFalsy(); // a target that is not registered in the navigation service is ignored - expect(() => { - fixture.nativeElement.querySelector('#toggleMissing').click(); - fixture.nativeElement.querySelector('#closeMissing').click(); - }).not.toThrow(); + expect(() => fixture.nativeElement.querySelector('#toggleMissing').click()).not.toThrow(); expect(drawer.isOpen).toBeFalsy(); + + toggleButton.click(); + expect(() => fixture.nativeElement.querySelector('#closeMissing').click()).not.toThrow(); + expect(drawer.isOpen).toBeTruthy(); }); it('async API calls should emit events', async () => {