fix(sidenav): implicit content element being registered twice with scroll dispatcher (#13973)

When the consumer doesn't provide a `mat-sidenav-content`, we create one implicitly for them. The implicit content element has a `cdkScrollable` on it, which means that the it'll be registered on the `ScrollDispatcher` as a `CdkScrollable`, however since `MatSidenavContent` also extends `CdkScrollable`, it'll be registered again as a `MatSidenavContent`. These change remove the extra `cdkScrollable` from the view in order to avoid the issue.

These changes also provide the sidenav content as a `CdkScrollable` for DI purposes.

Author: crisbeto

src/material/sidenav/drawer.ts

@@ -103,6 +103,10 @@ export function MAT_DRAWER_DEFAULT_AUTOSIZE_FACTORY(): boolean {
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
+  providers: [{
+    provide: CdkScrollable,
+    useExisting: MatDrawerContent,
+  }]
 })
 export class MatDrawerContent extends CdkScrollable implements AfterContentInit {
   constructor(

src/material/sidenav/sidenav-container.html

@@ -5,6 +5,6 @@
 
 <ng-content select="mat-sidenav-content">
 </ng-content>
-<mat-sidenav-content *ngIf="!_content" cdkScrollable>
+<mat-sidenav-content *ngIf="!_content">
   <ng-content></ng-content>
 </mat-sidenav-content>

src/material/sidenav/sidenav.ts

@@ -28,7 +28,7 @@ import {
   coerceNumberProperty,
   NumberInput,
 } from '@angular/cdk/coercion';
-import {ScrollDispatcher} from '@angular/cdk/scrolling';
+import {ScrollDispatcher, CdkScrollable} from '@angular/cdk/scrolling';
 
 @Component({
   selector: 'mat-sidenav-content',
@@ -40,6 +40,10 @@ import {ScrollDispatcher} from '@angular/cdk/scrolling';
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
+  providers: [{
+    provide: CdkScrollable,
+    useExisting: MatSidenavContent,
+  }]
 })
 export class MatSidenavContent extends MatDrawerContent {
   constructor(