Skip to content

Commit 35b3226

Browse files
authored
fix(tabs): no longer use OnPush (#16529)
This resolves an issue with ivy where the template content would be checked out of sync with the tab view. See #15440 for additional context.
1 parent b30aedd commit 35b3226

File tree

5 files changed

+22
-6
lines changed

5 files changed

+22
-6
lines changed

src/material/tabs/tab-body.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -251,7 +251,8 @@ export abstract class _MatTabBodyBase implements OnInit, OnDestroy {
251251
templateUrl: 'tab-body.html',
252252
styleUrls: ['tab-body.css'],
253253
encapsulation: ViewEncapsulation.None,
254-
changeDetection: ChangeDetectionStrategy.OnPush,
254+
// tslint:disable-next-line:validate-decorators
255+
changeDetection: ChangeDetectionStrategy.Default,
255256
animations: [matTabsAnimations.translateTab],
256257
host: {
257258
'class': 'mat-tab-body',

src/material/tabs/tab-group.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -360,7 +360,8 @@ export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements
360360
templateUrl: 'tab-group.html',
361361
styleUrls: ['tab-group.css'],
362362
encapsulation: ViewEncapsulation.None,
363-
changeDetection: ChangeDetectionStrategy.OnPush,
363+
// tslint:disable-next-line:validate-decorators
364+
changeDetection: ChangeDetectionStrategy.Default,
364365
inputs: ['color', 'disableRipple'],
365366
host: {
366367
'class': 'mat-tab-group',

src/material/tabs/tab-header.ts

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,8 @@ export abstract class _MatTabHeaderBase extends MatPaginatedTabHeader implements
8383
inputs: ['selectedIndex'],
8484
outputs: ['selectFocusedIndex', 'indexFocused'],
8585
encapsulation: ViewEncapsulation.None,
86-
changeDetection: ChangeDetectionStrategy.OnPush,
86+
// tslint:disable-next-line:validate-decorators
87+
changeDetection: ChangeDetectionStrategy.Default,
8788
host: {
8889
'class': 'mat-tab-header',
8990
'[class.mat-tab-header-pagination-controls-enabled]': '_showPaginationControls',

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

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -160,7 +160,8 @@ export abstract class _MatTabNavBase extends MatPaginatedTabHeader implements Af
160160
'[class.mat-warn]': 'color === "warn"',
161161
},
162162
encapsulation: ViewEncapsulation.None,
163-
changeDetection: ChangeDetectionStrategy.OnPush,
163+
// tslint:disable-next-line:validate-decorators
164+
changeDetection: ChangeDetectionStrategy.Default,
164165
})
165166
export class MatTabNav extends _MatTabNavBase {
166167
@ContentChildren(forwardRef(() => MatTabLink), {descendants: true}) _items: QueryList<MatTabLink>;

src/material/tabs/tab.ts

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -38,13 +38,25 @@ const _MatTabMixinBase: CanDisableCtor & typeof MatTabBase =
3838
selector: 'mat-tab',
3939
templateUrl: 'tab.html',
4040
inputs: ['disabled'],
41-
changeDetection: ChangeDetectionStrategy.OnPush,
41+
// tslint:disable-next-line:validate-decorators
42+
changeDetection: ChangeDetectionStrategy.Default,
4243
encapsulation: ViewEncapsulation.None,
4344
exportAs: 'matTab',
4445
})
4546
export class MatTab extends _MatTabMixinBase implements OnInit, CanDisable, OnChanges, OnDestroy {
4647
/** Content for the tab label given by `<ng-template mat-tab-label>`. */
47-
@ContentChild(MatTabLabel, {static: false}) templateLabel: MatTabLabel;
48+
@ContentChild(MatTabLabel, {static: false})
49+
get templateLabel(): MatTabLabel { return this._templateLabel; }
50+
set templateLabel(value: MatTabLabel) {
51+
// Only update the templateLabel via query if there is actually
52+
// a MatTabLabel found. This works around an issue where a user may have
53+
// manually set `templateLabel` during creation mode, which would then get clobbered
54+
// by `undefined` when this query resolves.
55+
if (value) {
56+
this._templateLabel = value;
57+
}
58+
}
59+
private _templateLabel: MatTabLabel;
4860

4961
/**
5062
* Template provided in the tab content that will be used if present, used to enable lazy-loading

0 commit comments

Comments
 (0)