fix: add exportAs to missing components/directives

src/cdk/a11y/focus-monitor/focus-monitor.ts

@@ -366,6 +366,7 @@ export class FocusMonitor implements OnDestroy {
  */
 @Directive({
   selector: '[cdkMonitorElementFocus], [cdkMonitorSubtreeFocus]',
+  exportAs: 'cdkMonitorElementFocus, cdkMonitorSubtreeFocus',
 })
 export class CdkMonitorFocus implements OnDestroy {
   private _monitorSubscription: Subscription;

src/cdk/bidi/dir.ts

@@ -27,6 +27,7 @@ import {Direction, Directionality} from './directionality';
   selector: '[dir]',
   providers: [{provide: Directionality, useExisting: Dir}],
   host: {'[dir]': 'dir'},
+  // tslint:disable-next-line:validate-decorators
   exportAs: 'dir',
 })
 export class Dir implements Directionality, AfterContentInit, OnDestroy {

src/cdk/scrolling/scrollable.ts

@@ -17,7 +17,8 @@ import {ScrollDispatcher} from './scroll-dispatcher';
  * can be listened to through the service.
  */
 @Directive({
-  selector: '[cdk-scrollable], [cdkScrollable]'
+  selector: '[cdk-scrollable], [cdkScrollable]',
+  exportAs: 'cdkScrollable',
 })
 export class CdkScrollable implements OnInit, OnDestroy {
   private _elementScrolled: Subject<Event> = new Subject();

src/cdk/stepper/step-label.ts

@@ -10,6 +10,7 @@ import {Directive, TemplateRef} from '@angular/core';
 
 @Directive({
   selector: '[cdkStepLabel]',
+  exportAs: 'cdkStepLabel',
 })
 export class CdkStepLabel {
   constructor(/** @docs-private */ public template: TemplateRef<any>) { }

src/cdk/stepper/stepper-button.ts

@@ -12,6 +12,7 @@ import {CdkStepper} from './stepper';
 /** Button that moves to the next step in a stepper workflow. */
 @Directive({
   selector: 'button[cdkStepperNext]',
+  exportAs: 'cdkStepperNext',
   host: {
     '(click)': '_stepper.next()',
     '[type]': 'type',
@@ -27,6 +28,7 @@ export class CdkStepperNext {
 /** Button that moves to the previous step in a stepper workflow. */
 @Directive({
   selector: 'button[cdkStepperPrevious]',
+  exportAs: 'cdkStepperNext',
   host: {
     '(click)': '_stepper.previous()',
     '[type]': 'type',

src/cdk/table/cell.ts

@@ -12,7 +12,10 @@ import {ContentChild, Directive, ElementRef, Input, TemplateRef} from '@angular/
  * Cell definition for a CDK table.
  * Captures the template of a column's data row cell as well as cell-specific properties.
  */
-@Directive({selector: '[cdkCellDef]'})
+@Directive({
+  selector: '[cdkCellDef]',
+  exportAs: 'cdkCellDef',
+})
 export class CdkCellDef {
   constructor(/** @docs-private */ public template: TemplateRef<any>) { }
 }
@@ -21,7 +24,10 @@ export class CdkCellDef {
  * Header cell definition for a CDK table.
  * Captures the template of a column's header cell and as well as cell-specific properties.
  */
-@Directive({selector: '[cdkHeaderCellDef]'})
+@Directive({
+  selector: '[cdkHeaderCellDef]',
+  exportAs: 'cdkHeaderCellDef',
+})
 export class CdkHeaderCellDef {
   constructor(/** @docs-private */ public template: TemplateRef<any>) { }
 }
@@ -30,7 +36,10 @@ export class CdkHeaderCellDef {
  * Column definition for the CDK table.
  * Defines a set of cells available for a table column.
  */
-@Directive({selector: '[cdkColumnDef]'})
+@Directive({
+  selector: '[cdkColumnDef]',
+  exportAs: 'cdkColumnDef',
+})
 export class CdkColumnDef {
   /** Unique name for this column. */
   @Input('cdkColumnDef')
@@ -62,6 +71,7 @@ export class CdkColumnDef {
 /** Header cell template container that adds the right classes and role. */
 @Directive({
   selector: 'cdk-header-cell, th[cdk-header-cell]',
+  exportAs: 'cdkHeaderCell',
   host: {
     'class': 'cdk-header-cell',
     'role': 'columnheader',
@@ -76,6 +86,7 @@ export class CdkHeaderCell {
 /** Cell template container that adds the right classes and role. */
 @Directive({
   selector: 'cdk-cell, td[cdk-cell]',
+  exportAs: 'cdkCell',
   host: {
     'class': 'cdk-cell',
     'role': 'gridcell',

src/cdk/table/row.ts

@@ -65,6 +65,7 @@ export abstract class BaseRowDef {
  */
 @Directive({
   selector: '[cdkHeaderRowDef]',
+  exportAs: 'cdkHeaderRowDef',
   inputs: ['columns: cdkHeaderRowDef'],
 })
 export class CdkHeaderRowDef extends BaseRowDef {
@@ -80,6 +81,7 @@ export class CdkHeaderRowDef extends BaseRowDef {
  */
 @Directive({
   selector: '[cdkRowDef]',
+  exportAs: 'cdkRowDef',
   inputs: ['columns: cdkRowDefColumns', 'when: cdkRowDefWhen'],
 })
 export class CdkRowDef<T> extends BaseRowDef {
@@ -126,7 +128,10 @@ export interface CdkCellOutletRowContext<T> {
  * Outlet for rendering cells inside of a row or header row.
  * @docs-private
  */
-@Directive({selector: '[cdkCellOutlet]'})
+@Directive({
+  selector: '[cdkCellOutlet]',
+  exportAs: 'cdkCellOutlet',
+})
 export class CdkCellOutlet {
   /** The ordered list of cells to render within this outlet's view container */
   cells: CdkCellDef[];
@@ -152,6 +157,7 @@ export class CdkCellOutlet {
 @Component({
   moduleId: module.id,
   selector: 'cdk-header-row, tr[cdk-header-row]',
+  exportAs: 'cdkHeaderRow',
   template: CDK_ROW_TEMPLATE,
   host: {
     'class': 'cdk-header-row',
@@ -166,6 +172,7 @@ export class CdkHeaderRow { }
 @Component({
   moduleId: module.id,
   selector: 'cdk-row, tr[cdk-row]',
+  exportAs: 'cdkRow',
   template: CDK_ROW_TEMPLATE,
   host: {
     'class': 'cdk-row',

src/cdk/table/table.ts

@@ -47,7 +47,11 @@ import {
  * Provides a handle for the table to grab the view container's ng-container to insert data rows.
  * @docs-private
  */
-@Directive({selector: '[rowPlaceholder]'})
+@Directive({
+  selector: '[rowPlaceholder]',
+  // tslint:disable-next-line:validate-decorators
+  exportAs: 'rowPlaceholder',
+})
 export class RowPlaceholder {
   constructor(public viewContainer: ViewContainerRef, public elementRef: ElementRef) { }
 }
@@ -56,7 +60,11 @@ export class RowPlaceholder {
  * Provides a handle for the table to grab the view container's ng-container to insert the header.
  * @docs-private
  */
-@Directive({selector: '[headerRowPlaceholder]'})
+@Directive({
+  selector: '[headerRowPlaceholder]',
+  // tslint:disable-next-line:validate-decorators
+  exportAs: 'headerRowPlaceholder',
+})
 export class HeaderRowPlaceholder {
   constructor(public viewContainer: ViewContainerRef, public elementRef: ElementRef) { }
 }

src/cdk/text-field/autofill.ts

@@ -118,6 +118,7 @@ export class AutofillMonitor implements OnDestroy {
 /** A directive that can be used to monitor the autofill state of an input. */
 @Directive({
   selector: '[cdkAutofill]',
+  exportAs: 'cdkAutofill',
 })
 export class CdkAutofill implements OnDestroy, OnInit {
   /** Emits when the autofill state of the element changes. */

src/cdk/tree/node.ts

@@ -31,6 +31,7 @@ export class CdkTreeNodeOutletContext<T> {
  */
 @Directive({
   selector: '[cdkTreeNodeDef]',
+  exportAs: 'cdkTreeNodeDef',
   inputs: [
     'when: cdkTreeNodeDefWhen'
   ],

src/cdk/tree/outlet.ts

@@ -15,7 +15,8 @@ import {
  * inside the outlet.
  */
 @Directive({
-  selector: '[cdkTreeNodeOutlet]'
+  selector: '[cdkTreeNodeOutlet]',
+  exportAs: 'cdkTreeNodeOutlet',
 })
 export class CdkTreeNodeOutlet {
   constructor(public viewContainer: ViewContainerRef) {}

src/cdk/tree/padding.ts

@@ -19,6 +19,7 @@ import {CdkTree, CdkTreeNode} from './tree';
  */
 @Directive({
   selector: '[cdkTreeNodePadding]',
+  exportAs: 'cdkTreeNodePadding',
 })
 export class CdkTreeNodePadding<T> implements OnDestroy {
   /** Subject that emits when the component has been destroyed. */

src/cdk/tree/toggle.ts

@@ -18,6 +18,7 @@ import {CdkTree, CdkTreeNode} from './tree';
  */
 @Directive({
   selector: '[cdkTreeNodeToggle]',
+  exportAs: 'cdkTreeNodeToggle',
   host: {
     '(click)': '_toggle($event)',
   }

src/lib/autocomplete/autocomplete-trigger.ts

@@ -88,7 +88,7 @@ export function getMatAutocompleteMissingPanelError(): Error {
 }
 
 @Directive({
-  selector: `input[matAutocomplete], textarea[matAutocomplete]`,
+  selector: 'input[matAutocomplete], textarea[matAutocomplete]',
   host: {
     'role': 'combobox',
     'autocomplete': 'off',

src/lib/badge/badge.ts

@@ -21,6 +21,7 @@ export type MatBadgeSize = 'small' | 'medium' | 'large';
 /** Directive to display a text badge. */
 @Directive({
   selector: '[matBadge]',
+  exportAs: 'matBadge',
   host: {
     'class': 'mat-badge',
     '[class.mat-badge-overlap]': 'overlap',

src/lib/bottom-sheet/bottom-sheet-container.ts

@@ -43,6 +43,7 @@ import {FocusTrap, FocusTrapFactory} from '@angular/cdk/a11y';
 @Component({
   moduleId: module.id,
   selector: 'mat-bottom-sheet-container',
+  exportAs: 'matBottomSheetContainer',
   templateUrl: 'bottom-sheet-container.html',
   styleUrls: ['bottom-sheet-container.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,

src/lib/card/card.ts

@@ -21,7 +21,8 @@ import {
  */
 @Directive({
   selector: 'mat-card-content',
-  host: {'class': 'mat-card-content'}
+  exportAs: 'matCardContent',
+  host: {'class': 'mat-card-content'},
 })
 export class MatCardContent {}
 
@@ -30,10 +31,11 @@ export class MatCardContent {}
  * @docs-private
  */
 @Directive({
-  selector: `mat-card-title, [mat-card-title], [matCardTitle]`,
+  selector: 'mat-card-title, [mat-card-title], [matCardTitle]',
+  exportAs: 'matCardTitle',
   host: {
     'class': 'mat-card-title'
-  }
+  },
 })
 export class MatCardTitle {}
 
@@ -42,10 +44,11 @@ export class MatCardTitle {}
  * @docs-private
  */
 @Directive({
-  selector: `mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]`,
+  selector: 'mat-card-subtitle, [mat-card-subtitle], [matCardSubtitle]',
+  exportAs: 'matCardSubtitle',
   host: {
     'class': 'mat-card-subtitle'
-  }
+  },
 })
 export class MatCardSubtitle {}
 
@@ -59,7 +62,7 @@ export class MatCardSubtitle {}
   host: {
     'class': 'mat-card-actions',
     '[class.mat-card-actions-align-end]': 'align === "end"',
-  }
+  },
 })
 export class MatCardActions {
   /** Position of the actions inside the card. */
@@ -72,7 +75,8 @@ export class MatCardActions {
  */
 @Directive({
   selector: 'mat-card-footer',
-  host: {'class': 'mat-card-footer'}
+  exportAs: 'matCardFooter',
+  host: {'class': 'mat-card-footer'},
 })
 export class MatCardFooter {}
 
@@ -82,7 +86,8 @@ export class MatCardFooter {}
  */
 @Directive({
   selector: '[mat-card-image], [matCardImage]',
-  host: {'class': 'mat-card-image'}
+  exportAs: 'matCardImage',
+  host: {'class': 'mat-card-image'},
 })
 export class MatCardImage {}
 
@@ -92,7 +97,8 @@ export class MatCardImage {}
  */
 @Directive({
   selector: '[mat-card-sm-image], [matCardImageSmall]',
-  host: {'class': 'mat-card-sm-image'}
+  exportAs: 'matCardImageSmall',
+  host: {'class': 'mat-card-sm-image'},
 })
 export class MatCardSmImage {}
 
@@ -102,7 +108,8 @@ export class MatCardSmImage {}
  */
 @Directive({
   selector: '[mat-card-md-image], [matCardImageMedium]',
-  host: {'class': 'mat-card-md-image'}
+  exportAs: 'matCardImageMedium',
+  host: {'class': 'mat-card-md-image'},
 })
 export class MatCardMdImage {}
 
@@ -112,7 +119,8 @@ export class MatCardMdImage {}
  */
 @Directive({
   selector: '[mat-card-lg-image], [matCardImageLarge]',
-  host: {'class': 'mat-card-lg-image'}
+  exportAs: 'matCardImageLarge',
+  host: {'class': 'mat-card-lg-image'},
 })
 export class MatCardLgImage {}
 
@@ -122,7 +130,8 @@ export class MatCardLgImage {}
  */
 @Directive({
   selector: '[mat-card-xl-image], [matCardImageXLarge]',
-  host: {'class': 'mat-card-xl-image'}
+  exportAs: 'matCardImageXLarge',
+  host: {'class': 'mat-card-xl-image'},
 })
 export class MatCardXlImage {}
 
@@ -132,7 +141,8 @@ export class MatCardXlImage {}
  */
 @Directive({
   selector: '[mat-card-avatar], [matCardAvatar]',
-  host: {'class': 'mat-card-avatar'}
+  exportAs: 'matCardAvatar',
+  host: {'class': 'mat-card-avatar'},
 })
 export class MatCardAvatar {}
 
@@ -156,7 +166,7 @@ export class MatCardAvatar {}
   styleUrls: ['card.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {'class': 'mat-card'}
+  host: {'class': 'mat-card'},
 })
 export class MatCard {}
 
@@ -169,10 +179,11 @@ export class MatCard {}
 @Component({
   moduleId: module.id,
   selector: 'mat-card-header',
+  exportAs: 'matCardHeader',
   templateUrl: 'card-header.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {'class': 'mat-card-header'}
+  host: {'class': 'mat-card-header'},
 })
 export class MatCardHeader {}
 
@@ -185,9 +196,10 @@ export class MatCardHeader {}
 @Component({
   moduleId: module.id,
   selector: 'mat-card-title-group',
+  exportAs: 'matCardTitleGroup',
   templateUrl: 'card-title-group.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
-  host: {'class': 'mat-card-title-group'}
+  host: {'class': 'mat-card-title-group'},
 })
 export class MatCardTitleGroup {}

src/lib/checkbox/checkbox-required-validator.ts

@@ -30,6 +30,7 @@ export const MAT_CHECKBOX_REQUIRED_VALIDATOR: Provider = {
 @Directive({
   selector: `mat-checkbox[required][formControlName],
              mat-checkbox[required][formControl], mat-checkbox[required][ngModel]`,
+  exportAs: 'matCheckboxRequiredValidator',
   providers: [MAT_CHECKBOX_REQUIRED_VALIDATOR],
   host: {'[attr.required]': 'required ? "" : null'}
 })