refactor(multiple): Updated components to use host binding for ngSkipHydration (#26763)

This adds the skip hydration host binding to every component where
direct dom manipulation occurs that would break hydration. This allows
anyone that uses material components to not have to worry about manually
adding this attribute themselves.

Author: jessicajaniuk

src/cdk/table/table.ts

@@ -205,6 +205,7 @@ export interface RenderRow<T> {
   host: {
     'class': 'cdk-table',
     '[class.cdk-table-fixed-layout]': 'fixedLayout',
+    'ngSkipHydration': 'true',
   },
   encapsulation: ViewEncapsulation.None,
   // The "OnPush" status for the `MatTable` component is effectively a noop, so we are removing it.

src/material/autocomplete/autocomplete.ts

@@ -330,6 +330,7 @@ export abstract class _MatAutocompleteBase
   inputs: ['disableRipple'],
   host: {
     'class': 'mat-mdc-autocomplete',
+    'ngSkipHydration': 'true',
   },
   providers: [{provide: MAT_OPTION_PARENT_COMPONENT, useExisting: MatAutocomplete}],
   animations: [panelAnimation],

src/material/chips/chip-listbox.ts

@@ -75,6 +75,7 @@ export const MAT_CHIP_LISTBOX_CONTROL_VALUE_ACCESSOR: any = {
     '[attr.aria-disabled]': 'disabled.toString()',
     '[attr.aria-multiselectable]': 'multiple',
     '[attr.aria-orientation]': 'ariaOrientation',
+    'ngSkipHydration': 'true',
     '[class.mat-mdc-chip-list-disabled]': 'disabled',
     '[class.mat-mdc-chip-list-required]': 'required',
     '(focus)': 'focus()',

src/material/legacy-autocomplete/autocomplete.ts

@@ -35,6 +35,7 @@ import {_MatAutocompleteBase} from '@angular/material/autocomplete';
   inputs: ['disableRipple'],
   host: {
     'class': 'mat-autocomplete',
+    'ngSkipHydration': 'true',
   },
   providers: [{provide: MAT_LEGACY_OPTION_PARENT_COMPONENT, useExisting: MatLegacyAutocomplete}],
 })

src/material/legacy-chips/chip-list.ts

@@ -109,6 +109,7 @@ export class MatLegacyChipListChange {
     '(blur)': '_blur()',
     '(keydown)': '_keydown($event)',
     '[id]': '_uid',
+    'ngSkipHydration': 'true',
   },
   providers: [{provide: MatLegacyFormFieldControl, useExisting: MatLegacyChipList}],
   styleUrls: ['chips.css'],

src/material/legacy-form-field/form-field.ts

@@ -153,6 +153,7 @@ export const MAT_LEGACY_FORM_FIELD_DEFAULT_OPTIONS =
     '[class.ng-invalid]': '_shouldForward("invalid")',
     '[class.ng-pending]': '_shouldForward("pending")',
     '[class._mat-animation-noopable]': '!_animationsEnabled',
+    'ngSkipHydration': 'true',
   },
   inputs: ['color'],
   encapsulation: ViewEncapsulation.None,

src/material/legacy-menu/menu.ts

@@ -39,6 +39,7 @@ import {
     '[attr.aria-label]': 'null',
     '[attr.aria-labelledby]': 'null',
     '[attr.aria-describedby]': 'null',
+    'ngSkipHydration': 'true',
   },
   animations: [matMenuAnimations.transformMenu, matMenuAnimations.fadeInItems],
   providers: [{provide: MAT_MENU_PANEL, useExisting: MatLegacyMenu}],

src/material/legacy-select/select.ts

@@ -149,6 +149,7 @@ export class MatLegacySelectTrigger {}
     '(keydown)': '_handleKeydown($event)',
     '(focus)': '_onFocus()',
     '(blur)': '_onBlur()',
+    'ngSkipHydration': 'true',
   },
   animations: [
     matLegacySelectAnimations.transformPanelWrap,

src/material/legacy-table/table.ts

@@ -46,6 +46,7 @@ export class MatLegacyRecycleRows {}
   host: {
     'class': 'mat-table',
     '[class.mat-table-fixed-layout]': 'fixedLayout',
+    'ngSkipHydration': 'true',
   },
   providers: [
     // TODO(michaeljamesparsons) Abstract the view repeater strategy to a directive API so this code

src/material/legacy-tabs/tab-group.ts

@@ -54,6 +54,7 @@ import {
     'class': 'mat-tab-group',
     '[class.mat-tab-group-dynamic-height]': 'dynamicHeight',
     '[class.mat-tab-group-inverted-header]': 'headerPosition === "below"',
+    'ngSkipHydration': 'true',
   },
 })
 export class MatLegacyTabGroup extends _MatTabGroupBase {