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

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"',