Skip to content

Commit 38086cc

Browse files
committed
fix(material/tabs): tab nav bar animation not working when navigating forwards
Fixes a regression introduced in #30121. It looks like we were depending on the incorrect internal state to animate correctly. These changes fix the issue by removing a call that was redundant in the first place. Fixes #30303.
1 parent a11b03b commit 38086cc

File tree

2 files changed

+5
-11
lines changed

2 files changed

+5
-11
lines changed

src/material/tabs/tab-nav-bar/tab-nav-bar.ts

+4-10
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
* found in the LICENSE file at https://angular.dev/license
77
*/
88
import {
9-
AfterContentChecked,
109
AfterContentInit,
1110
AfterViewInit,
1211
booleanAttribute,
@@ -75,10 +74,7 @@ import {_CdkPrivateStyleLoader} from '@angular/cdk/private';
7574
changeDetection: ChangeDetectionStrategy.Default,
7675
imports: [MatRipple, CdkObserveContent],
7776
})
78-
export class MatTabNav
79-
extends MatPaginatedTabHeader
80-
implements AfterContentChecked, AfterContentInit, OnDestroy, AfterViewInit
81-
{
77+
export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit, AfterViewInit {
8278
/** Whether the ink bar should fit its width to the size of the tab label content. */
8379
@Input({transform: booleanAttribute})
8480
get fitInkBarToContent(): boolean {
@@ -194,9 +190,9 @@ export class MatTabNav
194190
this._inkBar = new MatInkBar(this._items);
195191
// We need this to run before the `changes` subscription in parent to ensure that the
196192
// selectedIndex is up-to-date by the time the super class starts looking for it.
197-
this._items.changes.pipe(startWith(null), takeUntil(this._destroyed)).subscribe(() => {
198-
this.updateActiveLink();
199-
});
193+
this._items.changes
194+
.pipe(startWith(null), takeUntil(this._destroyed))
195+
.subscribe(() => this.updateActiveLink());
200196

201197
super.ngAfterContentInit();
202198
}
@@ -229,9 +225,7 @@ export class MatTabNav
229225
}
230226
}
231227

232-
// The ink bar should hide itself if no items are active.
233228
this.selectedIndex = -1;
234-
this._inkBar.hide();
235229
}
236230

237231
_getRole(): string | null {

tools/public_api_guard/material/tabs.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -442,7 +442,7 @@ export class MatTabLink extends InkBarItem implements AfterViewInit, OnDestroy,
442442
}
443443

444444
// @public
445-
export class MatTabNav extends MatPaginatedTabHeader implements AfterContentChecked, AfterContentInit, OnDestroy, AfterViewInit {
445+
export class MatTabNav extends MatPaginatedTabHeader implements AfterContentInit, AfterViewInit {
446446
constructor(...args: unknown[]);
447447
// (undocumented)
448448
get animationDuration(): string;

0 commit comments

Comments
 (0)