refactor(multiple): Updated components to use host binding for ngSkipHydration (angular#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 {

src/material/menu/menu.ts

@@ -544,6 +544,7 @@ export class _MatMenuBase
     '[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: MatMenu}],

src/material/select/select.ts

@@ -1171,6 +1171,7 @@ export class MatSelectTrigger {}
     '[attr.aria-disabled]': 'disabled.toString()',
     '[attr.aria-invalid]': 'errorState',
     '[attr.aria-activedescendant]': '_getAriaActiveDescendant()',
+    'ngSkipHydration': 'true',
     '[class.mat-mdc-select-disabled]': 'disabled',
     '[class.mat-mdc-select-invalid]': 'errorState',
     '[class.mat-mdc-select-required]': 'required',

src/material/sidenav/drawer.ts

@@ -101,6 +101,7 @@ export function MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY(): boolean {
     'class': 'mat-drawer-content',
     '[style.margin-left.px]': '_container._contentMargins.left',
     '[style.margin-right.px]': '_container._contentMargins.right',
+    'ngSkipHydration': 'true',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -150,6 +151,7 @@ export class MatDrawerContent extends CdkScrollable implements AfterContentInit
     '[@transform]': '_animationState',
     '(@transform.start)': '_animationStarted.next($event)',
     '(@transform.done)': '_animationEnd.next($event)',
+    'ngSkipHydration': 'true',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -635,6 +637,7 @@ export class MatDrawer implements AfterViewInit, AfterContentChecked, OnDestroy
   host: {
     'class': 'mat-drawer-container',
     '[class.mat-drawer-container-explicit-backdrop]': '_backdropOverride',
+    'ngSkipHydration': 'true',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

src/material/sidenav/sidenav.ts

@@ -37,6 +37,7 @@ import {ScrollDispatcher, CdkScrollable} from '@angular/cdk/scrolling';
     'class': 'mat-drawer-content mat-sidenav-content',
     '[style.margin-left.px]': '_container._contentMargins.left',
     '[style.margin-right.px]': '_container._contentMargins.right',
+    'ngSkipHydration': 'true',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -77,6 +78,7 @@ export class MatSidenavContent extends MatDrawerContent {
     '[class.mat-sidenav-fixed]': 'fixedInViewport',
     '[style.top.px]': 'fixedInViewport ? fixedTopGap : null',
     '[style.bottom.px]': 'fixedInViewport ? fixedBottomGap : null',
+    'ngSkipHydration': 'true',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -127,6 +129,7 @@ export class MatSidenav extends MatDrawer {
   host: {
     'class': 'mat-drawer-container mat-sidenav-container',
     '[class.mat-drawer-container-explicit-backdrop]': '_backdropOverride',
+    'ngSkipHydration': 'true',
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,

src/material/sort/sort.ts

@@ -73,7 +73,10 @@ const _MatSortBase = mixinInitialized(mixinDisabled(class {}));
 @Directive({
   selector: '[matSort]',
   exportAs: 'matSort',
-  host: {'class': 'mat-sort'},
+  host: {
+    'class': 'mat-sort',
+    'ngSkipHydration': 'true',
+  },
   inputs: ['disabled: matSortDisabled'],
 })
 export class MatSort

src/material/stepper/stepper.ts

@@ -138,6 +138,7 @@ export class MatStep extends CdkStep implements ErrorStateMatcher, AfterContentI
     '[class.mat-stepper-header-position-bottom]': 'headerPosition === "bottom"',
     '[attr.aria-orientation]': 'orientation',
     'role': 'tablist',
+    'ngSkipHydration': 'true',
   },
   animations: [
     matStepperAnimations.horizontalStepTransition,

src/material/table/table.ts

@@ -45,6 +45,7 @@ export class MatRecycleRows {}
   host: {
     'class': 'mat-mdc-table mdc-data-table__table',
     '[class.mdc-table-fixed-layout]': 'fixedLayout',
+    'ngSkipHydration': 'true',
   },
   providers: [
     {provide: CdkTable, useExisting: MatTable},

src/material/tabs/tab-group.ts

@@ -523,6 +523,7 @@ export abstract class _MatTabGroupBase
     },
   ],
   host: {
+    'ngSkipHydration': 'true',
     'class': 'mat-mdc-tab-group',
     '[class.mat-mdc-tab-group-dynamic-height]': 'dynamicHeight',
     '[class.mat-mdc-tab-group-inverted-header]': 'headerPosition === "below"',