chore: fix inherited host binding issue with sidenav (#15895)

Due to the inheritance changes present in the Ivy refactor,
animation host bindings are being inherited into a the SideNav
sub component unexpectedly. This patch ensures that SideNav
uses the same animation binding as does its super class.

Author: matsko

src/material/sidenav/drawer.ts

@@ -36,6 +36,7 @@ import {
   ViewChild,
   ViewEncapsulation,
   HostListener,
+  HostBinding,
 } from '@angular/core';
 import {fromEvent, merge, Observable, Subject} from 'rxjs';
 import {
@@ -116,7 +117,6 @@ export class MatDrawerContent extends CdkScrollable implements AfterContentInit
   animations: [matDrawerAnimations.transformDrawer],
   host: {
     'class': 'mat-drawer',
-    '[@transform]': '_animationState',
     // must prevent the browser from aligning text based on value
     '[attr.align]': 'null',
     '[class.mat-drawer-end]': 'position === "end"',
@@ -179,6 +179,11 @@ export class MatDrawer implements AfterContentInit, AfterContentChecked, OnDestr
   _animationEnd = new Subject<AnimationEvent>();
 
   /** Current state of the sidenav animation. */
+  // @HostBinding is used in the class as it is expected to be extended.  Since @Component decorator
+  // metadata is not inherited by child classes, instead the host binding data is defined in a way
+  // that can be inherited.
+  // tslint:disable:no-host-decorator-in-concrete
+  @HostBinding('@transform')
   _animationState: 'open-instant' | 'open' | 'void' = 'void';
 
   /** Event emitted when the drawer open state is changed. */

src/material/sidenav/sidenav.ts

@@ -59,7 +59,6 @@ export class MatSidenavContent extends MatDrawerContent {
   host: {
     'class': 'mat-drawer mat-sidenav',
     'tabIndex': '-1',
-    '[@transform]': '_animationState',
     // must prevent the browser from aligning text based on value
     '[attr.align]': 'null',
     '[class.mat-drawer-end]': 'position === "end"',