fix: consistent names for all cdk directives (#8088)

Renames:
`OverlayOrigin` -> `CdkOverlayOrigin`
`ConnectedOverlayDirective` -> `CdkConnectedOverlay`
`PortalDirective` -> `CdkPortal`
`PortalHostDirective` -> `CdkPortalOutlet`
`ObserveContent` -> `CdkObserveContent`

Also stop using "mat" completely in the cdk.

BREAKING CHANGE:
`MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY` is renamed to
`CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY`

src/cdk/bidi/directionality.ts

@@ -29,7 +29,7 @@ export type Direction = 'ltr' | 'rtl';
  * We also can't re-provide the DOCUMENT token from platform-brower because the unit tests
  * themselves use things like `querySelector` in test code.
  */
-export const DIR_DOCUMENT = new InjectionToken<Document>('mat-dir-doc');
+export const DIR_DOCUMENT = new InjectionToken<Document>('cdk-dir-doc');
 
 /**
  * The directionality (LTR / RTL) context for the application (or a subtree of it).

src/cdk/observers/observe-content.spec.ts

@@ -1,6 +1,6 @@
 import {Component} from '@angular/core';
 import {async, TestBed, ComponentFixture, fakeAsync, tick} from '@angular/core/testing';
-import {ObserversModule, MatMutationObserverFactory} from './observe-content';
+import {ObserversModule, MutationObserverFactory} from './observe-content';
 
 // TODO(elad): `ProxyZone` doesn't seem to capture the events raised by
 // `MutationObserver` and needs to be investigated
@@ -61,7 +61,7 @@ describe('Observe content', () => {
         imports: [ObserversModule],
         declarations: [ComponentWithDebouncedListener],
         providers: [{
-          provide: MatMutationObserverFactory,
+          provide: MutationObserverFactory,
           useValue: {
             create: function(callback: Function) {
               callbacks.push(callback);

src/cdk/observers/observe-content.ts

@@ -26,7 +26,7 @@ import {debounceTime} from 'rxjs/operators';
  * @docs-private
  */
 @Injectable()
-export class MatMutationObserverFactory {
+export class MutationObserverFactory {
   create(callback: MutationCallback): MutationObserver | null {
     return typeof MutationObserver === 'undefined' ? null : new MutationObserver(callback);
   }
@@ -40,7 +40,7 @@ export class MatMutationObserverFactory {
   selector: '[cdkObserveContent]',
   exportAs: 'cdkObserveContent',
 })
-export class ObserveContent implements AfterContentInit, OnDestroy {
+export class CdkObserveContent implements AfterContentInit, OnDestroy {
   private _observer: MutationObserver | null;
 
   /** Event emitted for each change in the element's content. */
@@ -53,7 +53,7 @@ export class ObserveContent implements AfterContentInit, OnDestroy {
   @Input() debounce: number;
 
   constructor(
-    private _mutationObserverFactory: MatMutationObserverFactory,
+    private _mutationObserverFactory: MutationObserverFactory,
     private _elementRef: ElementRef,
     private _ngZone: NgZone) { }
 
@@ -93,8 +93,8 @@ export class ObserveContent implements AfterContentInit, OnDestroy {
 
 
 @NgModule({
-  exports: [ObserveContent],
-  declarations: [ObserveContent],
-  providers: [MatMutationObserverFactory]
+  exports: [CdkObserveContent],
+  declarations: [CdkObserveContent],
+  providers: [MutationObserverFactory]
 })
 export class ObserversModule {}

src/cdk/observers/public-api.ts

@@ -7,3 +7,6 @@
  */
 
 export * from './observe-content';
+
+/** @deprecated Use CdkObserveContent */
+export {CdkObserveContent as ObserveContent} from './observe-content';

src/cdk/overlay/overlay-container.spec.ts

@@ -1,6 +1,6 @@
 import {async, inject, TestBed} from '@angular/core/testing';
 import {Component, NgModule, ViewChild, ViewContainerRef} from '@angular/core';
-import {PortalModule, TemplatePortalDirective} from '@angular/cdk/portal';
+import {PortalModule, CdkPortal} from '@angular/cdk/portal';
 import {Overlay, OverlayContainer, OverlayModule} from './index';
 
 describe('OverlayContainer', () => {
@@ -68,7 +68,7 @@ describe('OverlayContainer', () => {
   providers: [Overlay],
 })
 class TestComponentWithTemplatePortals {
-  @ViewChild(TemplatePortalDirective) templatePortal: TemplatePortalDirective;
+  @ViewChild(CdkPortal) templatePortal: CdkPortal;
 
   constructor(public viewContainerRef: ViewContainerRef) { }
 }

src/cdk/overlay/overlay-directives.spec.ts

@@ -4,7 +4,7 @@ import {ComponentFixture, TestBed, async, inject} from '@angular/core/testing';
 import {Directionality} from '@angular/cdk/bidi';
 import {dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {ESCAPE} from '@angular/cdk/keycodes';
-import {ConnectedOverlayDirective, OverlayModule, OverlayOrigin} from './index';
+import {CdkConnectedOverlay, OverlayModule, CdkOverlayOrigin} from './index';
 import {OverlayContainer} from './overlay-container';
 import {ConnectedPositionStrategy} from './position/connected-position-strategy';
 import {ConnectedOverlayPositionChange} from './position/connected-position';
@@ -330,7 +330,7 @@ class ConnectedOverlayDirectiveTest {
   detachHandler = jasmine.createSpy('detachHandler');
   attachResult: HTMLElement;
 
-  @ViewChild(ConnectedOverlayDirective) connectedOverlayDirective: ConnectedOverlayDirective;
+  @ViewChild(CdkConnectedOverlay) connectedOverlayDirective: CdkConnectedOverlay;
 }
 
 @Component({
@@ -339,7 +339,7 @@ class ConnectedOverlayDirectiveTest {
   <ng-template cdk-connected-overlay>Menu content</ng-template>`,
 })
 class ConnectedOverlayPropertyInitOrder {
-  @ViewChild(ConnectedOverlayDirective) connectedOverlayDirective: ConnectedOverlayDirective;
-  @ViewChild('trigger') trigger: OverlayOrigin;
+  @ViewChild(CdkConnectedOverlay) connectedOverlayDirective: CdkConnectedOverlay;
+  @ViewChild('trigger') trigger: CdkOverlayOrigin;
 }
 

src/cdk/overlay/overlay-directives.ts

@@ -52,24 +52,23 @@ const defaultPositionList = [
 ];
 
 /** Injection token that determines the scroll handling while the connected overlay is open. */
-export const MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY =
-    new InjectionToken<() => ScrollStrategy>('mat-connected-overlay-scroll-strategy');
+export const CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY =
+    new InjectionToken<() => ScrollStrategy>('cdk-connected-overlay-scroll-strategy');
 
 /** @docs-private */
-export function MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay):
+export function CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY(overlay: Overlay):
     () => RepositionScrollStrategy {
   return () => overlay.scrollStrategies.reposition();
 }
 
 /** @docs-private */
-export const MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {
-  provide: MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY,
+export const CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {
+  provide: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY,
   deps: [Overlay],
-  useFactory: MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY,
+  useFactory: CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER_FACTORY,
 };
 
 
-
 /**
  * Directive applied to an element to make it usable as an origin for an Overlay using a
  * ConnectedPositionStrategy.
@@ -78,14 +77,13 @@ export const MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER = {
   selector: '[cdk-overlay-origin], [overlay-origin], [cdkOverlayOrigin]',
   exportAs: 'cdkOverlayOrigin',
 })
-export class OverlayOrigin {
+export class CdkOverlayOrigin {
   constructor(
       /** Reference to the element on which the directive is applied. */
       public elementRef: ElementRef) { }
 }
 
 
-
 /**
  * Directive to facilitate declarative creation of an Overlay using a ConnectedPositionStrategy.
  */
@@ -93,7 +91,7 @@ export class OverlayOrigin {
   selector: '[cdk-connected-overlay], [connected-overlay], [cdkConnectedOverlay]',
   exportAs: 'cdkConnectedOverlay'
 })
-export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
+export class CdkConnectedOverlay implements OnDestroy, OnChanges {
   private _overlayRef: OverlayRef;
   private _templatePortal: TemplatePortal<any>;
   private _hasBackdrop = false;
@@ -105,7 +103,7 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
   private _escapeListener = () => {};
 
   /** Origin for the connected overlay. */
-  @Input('cdkConnectedOverlayOrigin') origin: OverlayOrigin;
+  @Input('cdkConnectedOverlayOrigin') origin: CdkOverlayOrigin;
 
   /** Registered connected position pairs. */
   @Input('cdkConnectedOverlayPositions') positions: ConnectionPositionPair[];
@@ -159,8 +157,8 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
 
   /** @deprecated */
   @Input('origin')
-  get _deprecatedOrigin(): OverlayOrigin { return this.origin; }
-  set _deprecatedOrigin(_origin: OverlayOrigin) { this.origin = _origin; }
+  get _deprecatedOrigin(): CdkOverlayOrigin { return this.origin; }
+  set _deprecatedOrigin(_origin: CdkOverlayOrigin) { this.origin = _origin; }
 
   /** @deprecated */
   @Input('positions')
@@ -238,7 +236,7 @@ export class ConnectedOverlayDirective implements OnDestroy, OnChanges {
       private _renderer: Renderer2,
       templateRef: TemplateRef<any>,
       viewContainerRef: ViewContainerRef,
-      @Inject(MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY) private _scrollStrategy,
+      @Inject(CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY) private _scrollStrategy,
       @Optional() private _dir: Directionality) {
     this._templatePortal = new TemplatePortal(templateRef, viewContainerRef);
   }

src/cdk/overlay/overlay-module.ts

@@ -13,9 +13,9 @@ import {NgModule, Provider} from '@angular/core';
 import {Overlay} from './overlay';
 import {OVERLAY_CONTAINER_PROVIDER} from './overlay-container';
 import {
-  ConnectedOverlayDirective,
-  MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER,
-  OverlayOrigin,
+  CdkConnectedOverlay,
+  CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER,
+  CdkOverlayOrigin,
 } from './overlay-directives';
 import {OverlayPositionBuilder} from './position/overlay-position-builder';
 import {OVERLAY_KEYBOARD_DISPATCHER_PROVIDER} from './keyboard/overlay-keyboard-dispatcher';
@@ -27,13 +27,13 @@ export const OVERLAY_PROVIDERS: Provider[] = [
   OVERLAY_KEYBOARD_DISPATCHER_PROVIDER,
   VIEWPORT_RULER_PROVIDER,
   OVERLAY_CONTAINER_PROVIDER,
-  MAT_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER,
+  CDK_CONNECTED_OVERLAY_SCROLL_STRATEGY_PROVIDER,
 ];
 
 @NgModule({
   imports: [BidiModule, PortalModule, ScrollDispatchModule],
-  exports: [ConnectedOverlayDirective, OverlayOrigin, ScrollDispatchModule],
-  declarations: [ConnectedOverlayDirective, OverlayOrigin],
+  exports: [CdkConnectedOverlay, CdkOverlayOrigin, ScrollDispatchModule],
+  declarations: [CdkConnectedOverlay, CdkOverlayOrigin],
   providers: [OVERLAY_PROVIDERS, ScrollStrategyOptions],
 })
 export class OverlayModule {}

src/cdk/overlay/overlay.spec.ts

@@ -4,7 +4,7 @@ import {
   ComponentPortal,
   PortalModule,
   TemplatePortal,
-  TemplatePortalDirective
+  CdkPortal
 } from '@angular/cdk/portal';
 import {
   Overlay,
@@ -482,7 +482,7 @@ class PizzaMsg { }
 /** Test-bed component that contains a TempatePortal and an ElementRef. */
 @Component({template: `<ng-template cdk-portal>Cake</ng-template>`})
 class TestComponentWithTemplatePortals {
-  @ViewChild(TemplatePortalDirective) templatePortal: TemplatePortalDirective;
+  @ViewChild(CdkPortal) templatePortal: CdkPortal;
 
   constructor(public viewContainerRef: ViewContainerRef) { }
 }

src/cdk/overlay/public-api.ts

@@ -7,20 +7,25 @@
  */
 
 export * from './overlay-config';
-export {Overlay} from './overlay';
-export {OverlayContainer} from './overlay-container';
-export {FullscreenOverlayContainer} from './fullscreen-overlay-container';
-export {OverlayRef} from './overlay-ref';
-export {ConnectedOverlayDirective, OverlayOrigin} from './overlay-directives';
-export {ViewportRuler} from '@angular/cdk/scrolling';
-export {ComponentType} from '@angular/cdk/portal';
-
 export * from './position/connected-position';
 export * from './scroll/index';
 export * from './overlay-module';
+export {Overlay} from './overlay';
+export {OverlayContainer} from './overlay-container';
+export {CdkOverlayOrigin, CdkConnectedOverlay} from './overlay-directives';
+export {FullscreenOverlayContainer} from './fullscreen-overlay-container';
+export {OverlayRef} from './overlay-ref';
+export {ViewportRuler} from '@angular/cdk/scrolling';
+export {ComponentType} from '@angular/cdk/portal';
 
 // Export pre-defined position strategies and interface to build custom ones.
 export {PositionStrategy} from './position/position-strategy';
 export {GlobalPositionStrategy} from './position/global-position-strategy';
 export {ConnectedPositionStrategy} from './position/connected-position-strategy';
 export {VIEWPORT_RULER_PROVIDER} from '@angular/cdk/scrolling';
+
+/** @deprecated Use CdkConnectedOverlay */
+export {CdkConnectedOverlay as ConnectedOverlayDirective} from './overlay-directives';
+
+/** @deprecated Use CdkOverlayOrigin */
+export {CdkOverlayOrigin as OverlayOrigin} from './overlay-directives';

src/cdk/portal/portal-directives.ts

@@ -28,7 +28,7 @@ import {Portal, TemplatePortal, ComponentPortal, BasePortalOutlet} from './porta
   selector: '[cdk-portal], [cdkPortal], [portal]',
   exportAs: 'cdkPortal',
 })
-export class TemplatePortalDirective extends TemplatePortal<any> {
+export class CdkPortal extends TemplatePortal<any> {
   constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
     super(templateRef, viewContainerRef);
   }
@@ -47,7 +47,7 @@ export class TemplatePortalDirective extends TemplatePortal<any> {
   exportAs: 'cdkPortalOutlet, cdkPortalHost',
   inputs: ['portal: cdkPortalOutlet']
 })
-export class PortalOutletDirective extends BasePortalOutlet implements OnDestroy {
+export class CdkPortalOutlet extends BasePortalOutlet implements OnDestroy {
   /** The attached portal. */
   private _portal: Portal<any> | null = null;
 
@@ -134,7 +134,7 @@ export class PortalOutletDirective extends BasePortalOutlet implements OnDestroy
 
 
 @NgModule({
-  exports: [TemplatePortalDirective, PortalOutletDirective],
-  declarations: [TemplatePortalDirective, PortalOutletDirective],
+  exports: [CdkPortal, CdkPortalOutlet],
+  declarations: [CdkPortal, CdkPortalOutlet],
 })
 export class PortalModule {}

src/cdk/portal/portal.md

@@ -27,8 +27,8 @@ built upon.
 
 #### Portals in practice
 
-##### `TemplatePortalDirective`
-Used to get a portal from an `<ng-template>`. `TemplatePortalDirectives` *is* a `Portal`.
+##### `CdkPortal`
+Used to get a portal from an `<ng-template>`. `CdkPortal` *is* a `Portal`.
 
 Usage:
 ```html
@@ -45,7 +45,7 @@ Usage:
 ```
 
 A component can use `@ViewChild` or `@ViewChildren` to get a reference to a
-`TemplatePortalDirective`.
+`CdkPortal`.
 
 ##### `ComponentPortal`
 Used to create a portal from a component type. When a component is dynamically created using
@@ -57,8 +57,8 @@ this.userSettingsPortal = new ComponentPortal(UserSettingsComponent);
 ```
 
 
-##### `PortalOutletDirective`
-Used to add a portal outlet to a template. `PortalOutletDirective` *is* a `PortalOutlet`.
+##### `CdkPortalOutlet`
+Used to add a portal outlet to a template. `CdkPortalOutlet` *is* a `PortalOutlet`.
 
 Usage:
 ```html

src/cdk/portal/portal.spec.ts

@@ -13,7 +13,7 @@ import {
   TemplateRef
 } from '@angular/core';
 import {CommonModule} from '@angular/common';
-import {TemplatePortalDirective, PortalOutletDirective, PortalModule} from './portal-directives';
+import {CdkPortal, CdkPortalOutlet, PortalModule} from './portal-directives';
 import {Portal, ComponentPortal, TemplatePortal} from './portal';
 import {DomPortalOutlet} from './dom-portal-outlet';
 
@@ -28,7 +28,7 @@ describe('Portals', () => {
     TestBed.compileComponents();
   }));
 
-  describe('PortalOutletDirective', () => {
+  describe('CdkPortalOutlet', () => {
     let fixture: ComponentFixture<PortalTestApp>;
 
     beforeEach(() => {
@@ -480,8 +480,8 @@ class ArbitraryViewContainerRefComponent {
   `,
 })
 class PortalTestApp {
-  @ViewChildren(TemplatePortalDirective) portals: QueryList<TemplatePortalDirective>;
-  @ViewChild(PortalOutletDirective) portalOutlet: PortalOutletDirective;
+  @ViewChildren(CdkPortal) portals: QueryList<CdkPortal>;
+  @ViewChild(CdkPortalOutlet) portalOutlet: CdkPortalOutlet;
   @ViewChild('templateRef', { read: TemplateRef }) templateRef: TemplateRef<any>;
 
   selectedPortal: Portal<any>;

src/cdk/portal/public-api.ts

@@ -12,5 +12,8 @@ export * from './portal-directives';
 export * from './portal-injector';
 
 export {DomPortalOutlet as DomPortalHost} from './dom-portal-outlet';
-export {PortalOutletDirective as PortalHostDirective} from './portal-directives';
+export {
+  CdkPortalOutlet as PortalHostDirective,
+  CdkPortal as TemplatePortalDirective,
+} from './portal-directives';
 export {PortalOutlet as PortalHost, BasePortalOutlet as BasePortalHost} from './portal';

src/cdk/stepper/stepper.ts

@@ -194,12 +194,12 @@ export class CdkStepper {
 
   /** Returns a unique id for each step label element. */
   _getStepLabelId(i: number): string {
-    return `mat-step-label-${this._groupId}-${i}`;
+    return `cdk-step-label-${this._groupId}-${i}`;
   }
 
   /** Returns unique id for each step content element. */
   _getStepContentId(i: number): string {
-    return `mat-step-content-${this._groupId}-${i}`;
+    return `cdk-step-content-${this._groupId}-${i}`;
   }
 
   /** Marks the component to be change detected. */

src/demo-app/overlay/overlay-demo.ts

@@ -1,11 +1,11 @@
-import {Overlay, OverlayOrigin, OverlayConfig} from '@angular/cdk/overlay';
+import {Overlay, CdkOverlayOrigin, OverlayConfig} from '@angular/cdk/overlay';
 import {
   ComponentPortal,
   // This import is only used to define a generic type. The current TypeScript version incorrectly
   // considers such imports as unused (https://github.com/Microsoft/TypeScript/issues/14953)
   // tslint:disable-next-line:no-unused-variable
   Portal,
-  TemplatePortalDirective
+  CdkPortal
 } from '@angular/cdk/portal';
 import {
   Component,
@@ -32,10 +32,10 @@ export class OverlayDemo {
   isMenuOpen: boolean = false;
   tortelliniFillings = ['cheese and spinach', 'mushroom and broccoli'];
 
-  @ViewChildren(TemplatePortalDirective) templatePortals: QueryList<Portal<any>>;
-  @ViewChild(OverlayOrigin) _overlayOrigin: OverlayOrigin;
-  @ViewChild('tortelliniOrigin') tortelliniOrigin: OverlayOrigin;
-  @ViewChild('tortelliniTemplate') tortelliniTemplate: TemplatePortalDirective;
+  @ViewChildren(CdkPortal) templatePortals: QueryList<Portal<any>>;
+  @ViewChild(CdkOverlayOrigin) _overlayOrigin: CdkOverlayOrigin;
+  @ViewChild('tortelliniOrigin') tortelliniOrigin: CdkOverlayOrigin;
+  @ViewChild('tortelliniTemplate') tortelliniTemplate: CdkPortal;
 
   constructor(public overlay: Overlay, public viewContainerRef: ViewContainerRef) { }
 

src/demo-app/portal/portal-demo.ts

@@ -1,4 +1,4 @@
-import {ComponentPortal, Portal, TemplatePortalDirective} from '@angular/cdk/portal';
+import {ComponentPortal, Portal, CdkPortal} from '@angular/cdk/portal';
 import {Component, QueryList, ViewChildren} from '@angular/core';
 
 
@@ -9,7 +9,7 @@ import {Component, QueryList, ViewChildren} from '@angular/core';
   styleUrls: ['portal-demo.css'],
 })
 export class PortalDemo {
-  @ViewChildren(TemplatePortalDirective) templatePortals: QueryList<Portal<any>>;
+  @ViewChildren(CdkPortal) templatePortals: QueryList<Portal<any>>;
 
   selectedPortal: Portal<any>;
 

src/lib/dialog/dialog-container.ts

@@ -24,7 +24,7 @@ import {DOCUMENT} from '@angular/platform-browser';
 import {
   BasePortalOutlet,
   ComponentPortal,
-  PortalOutletDirective,
+  CdkPortalOutlet,
   TemplatePortal
 } from '@angular/cdk/portal';
 import {FocusTrap, FocusTrapFactory} from '@angular/cdk/a11y';
@@ -80,7 +80,7 @@ export function throwMatDialogContentAlreadyAttachedError() {
 })
 export class MatDialogContainer extends BasePortalOutlet {
   /** The portal outlet inside of this container into which the dialog content will be loaded. */
-  @ViewChild(PortalOutletDirective) _portalOutlet: PortalOutletDirective;
+  @ViewChild(CdkPortalOutlet) _portalOutlet: CdkPortalOutlet;
 
   /** The class that traps and manages focus within the dialog. */
   private _focusTrap: FocusTrap;

src/lib/select/select.ts

@@ -12,7 +12,7 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
 import {SelectionModel} from '@angular/cdk/collections';
 import {DOWN_ARROW, END, ENTER, HOME, SPACE, UP_ARROW} from '@angular/cdk/keycodes';
 import {
-  ConnectedOverlayDirective,
+  CdkConnectedOverlay,
   Overlay,
   RepositionScrollStrategy,
   ScrollStrategy,
@@ -300,7 +300,7 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
   @ViewChild('panel') panel: ElementRef;
 
   /** Overlay pane containing the options. */
-  @ViewChild(ConnectedOverlayDirective) overlayDir: ConnectedOverlayDirective;
+  @ViewChild(CdkConnectedOverlay) overlayDir: CdkConnectedOverlay;
 
   /** All of the defined select options. */
   @ContentChildren(MatOption, { descendants: true }) options: QueryList<MatOption>;

src/lib/snack-bar/snack-bar-container.ts

@@ -30,7 +30,7 @@ import {
 import {
   BasePortalOutlet,
   ComponentPortal,
-  PortalOutletDirective,
+  CdkPortalOutlet,
 } from '@angular/cdk/portal';
 import {first} from 'rxjs/operators';
 import {AnimationCurves, AnimationDurations} from '@angular/material/core';
@@ -76,7 +76,7 @@ export class MatSnackBarContainer extends BasePortalOutlet implements OnDestroy
   private _destroyed = false;
 
   /** The portal outlet inside of this container into which the snack bar content will be loaded. */
-  @ViewChild(PortalOutletDirective) _portalOutlet: PortalOutletDirective;
+  @ViewChild(CdkPortalOutlet) _portalOutlet: CdkPortalOutlet;
 
   /** Subject for notifying that the snack bar has exited from view. */
   _onExit: Subject<any> = new Subject();

src/lib/tabs/tab-body.ts

@@ -27,7 +27,7 @@ import {
   transition,
   AnimationEvent,
 } from '@angular/animations';
-import {TemplatePortal, PortalOutletDirective} from '@angular/cdk/portal';
+import {TemplatePortal, CdkPortalOutlet} from '@angular/cdk/portal';
 import {Directionality, Direction} from '@angular/cdk/bidi';
 
 
@@ -88,7 +88,7 @@ export type MatTabBodyOriginState = 'left' | 'right';
 })
 export class MatTabBody implements OnInit, AfterViewChecked {
   /** The portal outlet inside of this container into which the tab body content will be loaded. */
-  @ViewChild(PortalOutletDirective) _portalOutlet: PortalOutletDirective;
+  @ViewChild(CdkPortalOutlet) _portalOutlet: CdkPortalOutlet;
 
   /** Event emitted when the tab begins to animate towards the center as the active tab. */
   @Output() _onCentering: EventEmitter<number> = new EventEmitter<number>();

src/lib/tabs/tab-label.ts

@@ -7,10 +7,10 @@
  */
 
 import {Directive, TemplateRef, ViewContainerRef} from '@angular/core';
-import {TemplatePortalDirective} from '@angular/cdk/portal';
+import {CdkPortal} from '@angular/cdk/portal';
 
 /** Workaround for https://github.com/angular/angular/issues/17849 */
-export const _MatTabLabelBaseClass = TemplatePortalDirective;
+export const _MatTabLabelBaseClass = CdkPortal;
 
 /** Used to flag tab labels for use with the portal directive */
 @Directive({