Skip to content

Commit

Permalink
fix(multiple): avoid component ID collisions between legacy and non-l…
Browse files Browse the repository at this point in the history
…egacy components

Fixes that the metadata of some of the legacy components was exactly the same as the non-legacy versions which causes a warning to be logged.

Fixes #27163.

(cherry picked from commit 95e18c5)
  • Loading branch information
crisbeto committed Jul 7, 2023
1 parent bbc58ad commit 6e1a7d6
Show file tree
Hide file tree
Showing 5 changed files with 18 additions and 0 deletions.
5 changes: 5 additions & 0 deletions src/material/legacy-dialog/testing/dialog-opener.ts
Original file line number Diff line number Diff line change
Expand Up @@ -27,6 +27,11 @@ import {_MatTestDialogOpenerBase} from '@angular/material/dialog/testing';
template: '',
changeDetection: ChangeDetectionStrategy.OnPush,
encapsulation: ViewEncapsulation.None,
host: {
// This binding is used to ensure that the component ID
// doesn't clash with the `MatTestDialogOpener`.
'[attr.mat-id-collision]': 'null',
},
})
export class MatTestLegacyDialogOpener<T = unknown, R = unknown> extends _MatTestDialogOpenerBase<
MatLegacyDialogContainer,
Expand Down
2 changes: 2 additions & 0 deletions src/material/legacy-menu/menu.ts
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,8 @@ import {
'[attr.aria-labelledby]': 'null',
'[attr.aria-describedby]': 'null',
'ngSkipHydration': '',
// This binding is used to ensure that the component ID doesn't clash with the `MatMenu`.
'[attr.mat-id-collision]': 'null',
},
animations: [matMenuAnimations.transformMenu, matMenuAnimations.fadeInItems],
providers: [{provide: MAT_MENU_PANEL, useExisting: MatLegacyMenu}],
Expand Down
4 changes: 4 additions & 0 deletions src/material/legacy-table/text-column.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ import {ChangeDetectionStrategy, Component, ViewEncapsulation} from '@angular/co
</ng-container>
`,
encapsulation: ViewEncapsulation.None,
host: {
// This binding is used to ensure that the component ID doesn't clash with the `MatTextColumn`.
'[attr.mat-id-collision]': 'null',
},
// Change detection is intentionally not set to OnPush. This component's template will be provided
// to the table to be inserted into its view. This is problematic when change detection runs since
// the bindings in this template will be evaluated _after_ the table's view is evaluated, which
Expand Down
4 changes: 4 additions & 0 deletions src/material/legacy-tabs/tab.ts
Original file line number Diff line number Diff line change
Expand Up @@ -34,6 +34,10 @@ import {
encapsulation: ViewEncapsulation.None,
exportAs: 'matTab',
providers: [{provide: MAT_TAB, useExisting: MatLegacyTab}],
host: {
// This binding is used to ensure that the component ID doesn't clash with the `MatTab`.
'[attr.mat-id-collision]': 'null',
},
})
export class MatLegacyTab extends _MatTabBase {
/** Content for the tab label given by `<ng-template mat-tab-label>`. */
Expand Down
3 changes: 3 additions & 0 deletions src/material/legacy-tooltip/tooltip.ts
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,9 @@ export class MatLegacyTooltip extends _MatTooltipBase<LegacyTooltipComponent> {
'[style.zoom]': 'isVisible() ? 1 : null',
'(mouseleave)': '_handleMouseLeave($event)',
'aria-hidden': 'true',
// This binding is used to ensure that the component
// ID doesn't clash with the `TooltipComponent`.
'[attr.mat-id-collision]': 'null',
},
})
export class LegacyTooltipComponent extends _TooltipComponentBase {
Expand Down

0 comments on commit 6e1a7d6

Please sign in to comment.