Skip to content

Commit 923c733

Browse files
crisbetotinayuangao
authored andcommitted
refactor(tabs): provide method for re-aligning the ink bar (#10343)
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 5deb829 commit 923c733

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
@@ -83,6 +83,8 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
8383

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

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

@@ -208,6 +210,13 @@ export class MatTabGroup extends _MatTabGroupMixinBase implements AfterContentIn
208210
this._tabLabelSubscription.unsubscribe();
209211
}
210212

213+
/** Re-aligns the ink bar to the selected tab element. */
214+
realignInkBar() {
215+
if (this._tabHeader) {
216+
this._tabHeader._alignInkBarToSelectedTab();
217+
}
218+
}
219+
211220
_focusChanged(index: number) {
212221
this.focusChange.emit(this._createChangeEvent(index));
213222
}

src/lib/tabs/tab-header.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -448,7 +448,7 @@ export class MatTabHeader extends _MatTabHeaderMixinBase
448448
}
449449

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

0 commit comments

Comments
 (0)