fix(multiple): avoid component ID collisions between legacy and non-l…

…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)

src/material/legacy-dialog/testing/dialog-opener.ts

@@ -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,

src/material/legacy-menu/menu.ts

@@ -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}],

src/material/legacy-table/text-column.ts

@@ -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

src/material/legacy-tabs/tab.ts

@@ -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>`. */

src/material/legacy-tooltip/tooltip.ts

@@ -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 {