Skip to content

Commit 5743677

Browse files
committed
refactor(tabs): provide method for re-aligning the ink bar
Adds the `realignInkBar` method to the `MatTabGroup` which allows consumers to re-align the ink bar programmatically. This is useful for the cases where Material can't figure out that it needs to be re-aligned or doing so would be very inefficient. Fixes #10340.
1 parent c224300 commit 5743677

File tree

2 files changed

+10
-1
lines changed

2 files changed

+10
-1
lines changed

src/lib/tabs/tab-group.ts

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,8 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
8484

8585
@ViewChild('tabBodyWrapper') _tabBodyWrapper: ElementRef;
8686

87+
@ViewChild('tabHeader') _tabHeader: MatTabHeader;
88+
8789
/** The tab index that should be selected after the content has been checked. */
8890
private _indexToSelect: number | null = 0;
8991

@@ -224,6 +226,13 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
224226
this._tabLabelSubscription.unsubscribe();
225227
}
226228

229+
/** Re-aligns the ink bar to the selected tab element. */
230+
realignInkBar() {
231+
if (this._tabHeader) {
232+
this._tabHeader._alignInkBarToSelectedTab();
233+
}
234+
}
235+
227236
_focusChanged(index: number) {
228237
this.focusChange.emit(this._createChangeEvent(index));
229238
}

src/lib/tabs/tab-header.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -450,7 +450,7 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
450450
}
451451

452452
/** Tells the ink-bar to align itself to the current label wrapper */
453-
private _alignInkBarToSelectedTab(): void {
453+
_alignInkBarToSelectedTab(): void {
454454
const selectedLabelWrapper = this._labelWrappers && this._labelWrappers.length ?
455455
this._labelWrappers.toArray()[this.selectedIndex].elementRef.nativeElement :
456456
null;

0 commit comments

Comments
 (0)