diff --git a/src/cdk/a11y/focus-monitor/focus-monitor.ts b/src/cdk/a11y/focus-monitor/focus-monitor.ts
index 78df74ebcaa7..a6b59a6049ce 100644
--- a/src/cdk/a11y/focus-monitor/focus-monitor.ts
+++ b/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;
diff --git a/src/cdk/bidi/dir.ts b/src/cdk/bidi/dir.ts
index f5fe1230a839..cd1c9aa79532 100644
--- a/src/cdk/bidi/dir.ts
+++ b/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 {
diff --git a/src/cdk/scrolling/scrollable.ts b/src/cdk/scrolling/scrollable.ts
index 9a1a24fc8afd..5b21314daf9a 100644
--- a/src/cdk/scrolling/scrollable.ts
+++ b/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();
diff --git a/src/cdk/stepper/step-label.ts b/src/cdk/stepper/step-label.ts
index a7f048239890..a46a90d4cee4 100644
--- a/src/cdk/stepper/step-label.ts
+++ b/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>) { }
diff --git a/src/cdk/stepper/stepper-button.ts b/src/cdk/stepper/stepper-button.ts
index 55f66fb0bc65..e2d4adccb267 100644
--- a/src/cdk/stepper/stepper-button.ts
+++ b/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',
diff --git a/src/cdk/table/cell.ts b/src/cdk/table/cell.ts
index 1ce2acedece1..431a47bfd95b 100644
--- a/src/cdk/table/cell.ts
+++ b/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',
diff --git a/src/cdk/table/row.ts b/src/cdk/table/row.ts
index 0a9019d49602..90ab8965ed3b 100644
--- a/src/cdk/table/row.ts
+++ b/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',
diff --git a/src/cdk/table/table.ts b/src/cdk/table/table.ts
index f2399144594f..66a926f0f901 100644
--- a/src/cdk/table/table.ts
+++ b/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) { }
 }
diff --git a/src/cdk/text-field/autofill.ts b/src/cdk/text-field/autofill.ts
index 4ff43e715fe3..806e20d805d4 100644
--- a/src/cdk/text-field/autofill.ts
+++ b/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. */
diff --git a/src/cdk/tree/node.ts b/src/cdk/tree/node.ts
index df34de29f279..e47abecebed2 100644
--- a/src/cdk/tree/node.ts
+++ b/src/cdk/tree/node.ts
@@ -31,6 +31,7 @@ export class CdkTreeNodeOutletContext<T> {
  */
 @Directive({
   selector: '[cdkTreeNodeDef]',
+  exportAs: 'cdkTreeNodeDef',
   inputs: [
     'when: cdkTreeNodeDefWhen'
   ],
diff --git a/src/cdk/tree/outlet.ts b/src/cdk/tree/outlet.ts
index 2895003d893a..48b0dd0c6952 100644
--- a/src/cdk/tree/outlet.ts
+++ b/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) {}
diff --git a/src/cdk/tree/padding.ts b/src/cdk/tree/padding.ts
index 1cee182752f1..0eb057a50824 100644
--- a/src/cdk/tree/padding.ts
+++ b/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. */
diff --git a/src/cdk/tree/toggle.ts b/src/cdk/tree/toggle.ts
index a6aa04084d0a..29f924366c7d 100644
--- a/src/cdk/tree/toggle.ts
+++ b/src/cdk/tree/toggle.ts
@@ -18,6 +18,7 @@ import {CdkTree, CdkTreeNode} from './tree';
  */
 @Directive({
   selector: '[cdkTreeNodeToggle]',
+  exportAs: 'cdkTreeNodeToggle',
   host: {
     '(click)': '_toggle($event)',
   }
diff --git a/src/lib/autocomplete/autocomplete-trigger.ts b/src/lib/autocomplete/autocomplete-trigger.ts
index 7018ab310e5e..6bb9fab44b9b 100644
--- a/src/lib/autocomplete/autocomplete-trigger.ts
+++ b/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',
diff --git a/src/lib/badge/badge.ts b/src/lib/badge/badge.ts
index 25f42d5c4dfc..0ddc3636e31f 100644
--- a/src/lib/badge/badge.ts
+++ b/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',
diff --git a/src/lib/bottom-sheet/bottom-sheet-container.ts b/src/lib/bottom-sheet/bottom-sheet-container.ts
index aab2a3da6087..91cc4b52d5cb 100644
--- a/src/lib/bottom-sheet/bottom-sheet-container.ts
+++ b/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,
diff --git a/src/lib/card/card.ts b/src/lib/card/card.ts
index 431af65b8aca..53beb945484a 100644
--- a/src/lib/card/card.ts
+++ b/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 {}
diff --git a/src/lib/checkbox/checkbox-required-validator.ts b/src/lib/checkbox/checkbox-required-validator.ts
index d4f474265309..4d12ba5b2580 100644
--- a/src/lib/checkbox/checkbox-required-validator.ts
+++ b/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'}
 })
diff --git a/src/lib/chips/chip.ts b/src/lib/chips/chip.ts
index 5d257bfdc212..e4266913d0ac 100644
--- a/src/lib/chips/chip.ts
+++ b/src/lib/chips/chip.ts
@@ -74,7 +74,8 @@ const CHIP_ATTRIBUTE_NAMES = ['mat-basic-chip'];
  */
 @Directive({
   selector: 'mat-chip-avatar, [matChipAvatar]',
-  host: {'class': 'mat-chip-avatar'}
+  exportAs: 'matChipAvatar',
+  host: {'class': 'mat-chip-avatar'},
 })
 export class MatChipAvatar {}
 
@@ -84,6 +85,7 @@ export class MatChipAvatar {}
  */
 @Directive({
   selector: 'mat-chip-trailing-icon, [matChipTrailingIcon]',
+  exportAs: 'matChipTrailingIcon',
   host: {'class': 'mat-chip-trailing-icon'}
 })
 export class MatChipTrailingIcon {}
@@ -92,7 +94,7 @@ export class MatChipTrailingIcon {}
  * Material design styled Chip component. Used inside the MatChipList component.
  */
 @Directive({
-  selector: `mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]`,
+  selector: 'mat-basic-chip, [mat-basic-chip], mat-chip, [mat-chip]',
   inputs: ['color', 'disabled', 'disableRipple'],
   exportAs: 'matChip',
   host: {
@@ -374,6 +376,7 @@ export class MatChip extends _MatChipMixinBase implements FocusableOption, OnDes
  */
 @Directive({
   selector: '[matChipRemove]',
+  exportAs: 'matChipRemove',
   host: {
     'class': 'mat-chip-remove mat-chip-trailing-icon',
     '(click)': '_handleClick()',
diff --git a/src/lib/core/line/line.ts b/src/lib/core/line/line.ts
index f840efde8e51..66a54b2fdb44 100644
--- a/src/lib/core/line/line.ts
+++ b/src/lib/core/line/line.ts
@@ -22,7 +22,8 @@ import {MatCommonModule} from '../common-behaviors/common-module';
  */
 @Directive({
   selector: '[mat-line], [matLine]',
-  host: {'class': 'mat-line'}
+  exportAs: 'matLine',
+  host: {'class': 'mat-line'},
 })
 export class MatLine {}
 
diff --git a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts
index cd245b01f69c..771ed2241cca 100644
--- a/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts
+++ b/src/lib/core/selection/pseudo-checkbox/pseudo-checkbox.ts
@@ -25,17 +25,18 @@ export type MatPseudoCheckboxState = 'unchecked' | 'checked' | 'indeterminate';
  */
 @Component({
   moduleId: module.id,
-  encapsulation: ViewEncapsulation.None,
-  changeDetection: ChangeDetectionStrategy.OnPush,
   selector: 'mat-pseudo-checkbox',
-  styleUrls: ['pseudo-checkbox.css'],
+  exportAs: 'matPseudoCheckbox',
   template: '',
+  styleUrls: ['pseudo-checkbox.css'],
   host: {
     'class': 'mat-pseudo-checkbox',
     '[class.mat-pseudo-checkbox-indeterminate]': 'state === "indeterminate"',
     '[class.mat-pseudo-checkbox-checked]': 'state === "checked"',
     '[class.mat-pseudo-checkbox-disabled]': 'disabled',
   },
+  encapsulation: ViewEncapsulation.None,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class MatPseudoCheckbox {
   /** Display state of the checkbox. */
diff --git a/src/lib/datepicker/calendar.ts b/src/lib/datepicker/calendar.ts
index 815151fc9cb2..82aadf710f2d 100644
--- a/src/lib/datepicker/calendar.ts
+++ b/src/lib/datepicker/calendar.ts
@@ -38,6 +38,7 @@ import {MatYearView} from './year-view';
 @Component({
   moduleId: module.id,
   selector: 'mat-calendar-header',
+  exportAs: 'matCalendarHeader',
   templateUrl: 'calendar-header.html',
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/lib/datepicker/datepicker-toggle.ts b/src/lib/datepicker/datepicker-toggle.ts
index 51c2ac16f367..ce0cffd09527 100644
--- a/src/lib/datepicker/datepicker-toggle.ts
+++ b/src/lib/datepicker/datepicker-toggle.ts
@@ -27,7 +27,8 @@ import {MatDatepickerIntl} from './datepicker-intl';
 
 /** Can be used to override the icon of a `matDatepickerToggle`. */
 @Directive({
-  selector: '[matDatepickerToggleIcon]'
+  selector: '[matDatepickerToggleIcon]',
+  exportAs: 'matDatepickerToggleIcon',
 })
 export class MatDatepickerToggleIcon {}
 
diff --git a/src/lib/dialog/dialog-content-directives.ts b/src/lib/dialog/dialog-content-directives.ts
index c3f5b7bb4bc4..6160bbf28646 100644
--- a/src/lib/dialog/dialog-content-directives.ts
+++ b/src/lib/dialog/dialog-content-directives.ts
@@ -25,13 +25,13 @@ let dialogElementUid = 0;
  * Button that will close the current dialog.
  */
 @Directive({
-  selector: `button[mat-dialog-close], button[matDialogClose]`,
+  selector: 'button[mat-dialog-close], button[matDialogClose]',
   exportAs: 'matDialogClose',
   host: {
     '(click)': 'dialogRef.close(dialogResult)',
     '[attr.aria-label]': 'ariaLabel',
     'type': 'button', // Prevents accidental form submits.
-  }
+  },
 })
 export class MatDialogClose implements OnInit, OnChanges {
   /** Screenreader label for the button. */
@@ -108,8 +108,9 @@ export class MatDialogTitle implements OnInit {
  * Scrollable content container of a dialog.
  */
 @Directive({
-  selector: `[mat-dialog-content], mat-dialog-content, [matDialogContent]`,
-  host: {'class': 'mat-dialog-content'}
+  selector: '[mat-dialog-content], mat-dialog-content, [matDialogContent]',
+  exportAs: 'matDialogContent',
+  host: {'class': 'mat-dialog-content'},
 })
 export class MatDialogContent {}
 
@@ -119,8 +120,9 @@ export class MatDialogContent {}
  * Stays fixed to the bottom when scrolling.
  */
 @Directive({
-  selector: `[mat-dialog-actions], mat-dialog-actions, [matDialogActions]`,
-  host: {'class': 'mat-dialog-actions'}
+  selector: '[mat-dialog-actions], mat-dialog-actions, [matDialogActions]',
+  exportAs: 'matDialogActions',
+  host: {'class': 'mat-dialog-actions'},
 })
 export class MatDialogActions {}
 
diff --git a/src/lib/divider/divider.ts b/src/lib/divider/divider.ts
index 97f4856a9d15..d34fe3e94d01 100644
--- a/src/lib/divider/divider.ts
+++ b/src/lib/divider/divider.ts
@@ -12,6 +12,9 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
 @Component({
   moduleId: module.id,
   selector: 'mat-divider',
+  exportAs: 'matDivider',
+  template: '',
+  styleUrls: ['divider.css'],
   host: {
     'role': 'separator',
     '[attr.aria-orientation]': 'vertical ? "vertical" : "horizontal"',
@@ -19,8 +22,6 @@ import {coerceBooleanProperty} from '@angular/cdk/coercion';
     '[class.mat-divider-inset]': 'inset',
     'class': 'mat-divider'
   },
-  template: '',
-  styleUrls: ['divider.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/src/lib/expansion/expansion-panel-content.ts b/src/lib/expansion/expansion-panel-content.ts
index b755fc8870f1..5b35bbd915be 100644
--- a/src/lib/expansion/expansion-panel-content.ts
+++ b/src/lib/expansion/expansion-panel-content.ts
@@ -13,7 +13,8 @@ import {Directive, TemplateRef} from '@angular/core';
  * after the panel is opened for the first time.
  */
 @Directive({
-  selector: 'ng-template[matExpansionPanelContent]'
+  selector: 'ng-template[matExpansionPanelContent]',
+  exportAs: 'matExpansionPanelContent',
 })
 export class MatExpansionPanelContent {
   constructor(public _template: TemplateRef<any>) {}
diff --git a/src/lib/expansion/expansion-panel-header.ts b/src/lib/expansion/expansion-panel-header.ts
index c3f20e688638..a4a93d0ad2ac 100644
--- a/src/lib/expansion/expansion-panel-header.ts
+++ b/src/lib/expansion/expansion-panel-header.ts
@@ -33,8 +33,9 @@ import {MatExpansionPanel} from './expansion-panel';
 @Component({
   moduleId: module.id,
   selector: 'mat-expansion-panel-header',
-  styleUrls: ['./expansion-panel-header.css'],
+  exportAs: 'matExpansionPanelHeader',
   templateUrl: './expansion-panel-header.html',
+  styleUrls: ['./expansion-panel-header.css'],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: [
@@ -140,9 +141,10 @@ export class MatExpansionPanelHeader implements OnDestroy {
  */
 @Directive({
   selector: 'mat-panel-description',
+  exportAs: 'matExpansionPanelDescription',
   host : {
     class: 'mat-expansion-panel-header-description'
-  }
+  },
 })
 export class MatExpansionPanelDescription {}
 
@@ -153,6 +155,7 @@ export class MatExpansionPanelDescription {}
  */
 @Directive({
   selector: 'mat-panel-title',
+  exportAs: 'matExpansionPanelTitle',
   host : {
     class: 'mat-expansion-panel-header-title'
   }
diff --git a/src/lib/expansion/expansion-panel.ts b/src/lib/expansion/expansion-panel.ts
index 1fb2e03205cd..7fa1fa673475 100644
--- a/src/lib/expansion/expansion-panel.ts
+++ b/src/lib/expansion/expansion-panel.ts
@@ -61,7 +61,7 @@ let uniqueId = 0;
     'class': 'mat-expansion-panel',
     '[class.mat-expanded]': 'expanded',
     '[class.mat-expansion-panel-spacing]': '_hasSpacing()',
-  }
+  },
 })
 export class MatExpansionPanel extends CdkAccordionItem
     implements AfterContentInit, OnChanges, OnDestroy {
@@ -158,8 +158,9 @@ export class MatExpansionPanel extends CdkAccordionItem
 
 @Directive({
   selector: 'mat-action-row',
+  exportAs: 'matExpansionPanelActionRow',
   host: {
     class: 'mat-action-row'
-  }
+  },
 })
 export class MatExpansionPanelActionRow {}
diff --git a/src/lib/form-field/error.ts b/src/lib/form-field/error.ts
index 6f5e9494fa12..3fd667e0af15 100644
--- a/src/lib/form-field/error.ts
+++ b/src/lib/form-field/error.ts
@@ -15,11 +15,12 @@ let nextUniqueId = 0;
 /** Single error message to be shown underneath the form field. */
 @Directive({
   selector: 'mat-error',
+  exportAs: 'matError',
   host: {
     'class': 'mat-error',
     'role': 'alert',
     '[attr.id]': 'id',
-  }
+  },
 })
 export class MatError {
   @Input() id: string = `mat-error-${nextUniqueId++}`;
diff --git a/src/lib/form-field/hint.ts b/src/lib/form-field/hint.ts
index 6299bc3b7a92..9f086c342b0c 100644
--- a/src/lib/form-field/hint.ts
+++ b/src/lib/form-field/hint.ts
@@ -15,13 +15,14 @@ let nextUniqueId = 0;
 /** Hint text to be shown underneath the form field control. */
 @Directive({
   selector: 'mat-hint',
+  exportAs: 'matHint',
   host: {
     'class': 'mat-hint',
-    '[class.mat-right]': 'align == "end"',
+    '[class.mat-right]': 'align === "end"',
     '[attr.id]': 'id',
     // Remove align attribute to prevent it from interfering with layout.
     '[attr.align]': 'null',
-  }
+  },
 })
 export class MatHint {
   /** Whether to align the hint label at the start or end of the line. */
diff --git a/src/lib/form-field/label.ts b/src/lib/form-field/label.ts
index a811a445f2a5..b1907e1248ea 100644
--- a/src/lib/form-field/label.ts
+++ b/src/lib/form-field/label.ts
@@ -11,6 +11,7 @@ import {Directive} from '@angular/core';
 
 /** The floating label for a `mat-form-field`. */
 @Directive({
-  selector: 'mat-label'
+  selector: 'mat-label',
+  exportAs: 'matLabel',
 })
 export class MatLabel {}
diff --git a/src/lib/form-field/placeholder.ts b/src/lib/form-field/placeholder.ts
index 8c4e6f6cfff5..13b127237ee2 100644
--- a/src/lib/form-field/placeholder.ts
+++ b/src/lib/form-field/placeholder.ts
@@ -11,6 +11,7 @@ import {Directive} from '@angular/core';
 
 /** The placeholder text for an `MatFormField`. */
 @Directive({
-  selector: 'mat-placeholder'
+  selector: 'mat-placeholder',
+  exportAs: 'matPlaceholder',
 })
 export class MatPlaceholder {}
diff --git a/src/lib/form-field/prefix.ts b/src/lib/form-field/prefix.ts
index 29574d570471..77c9ce9bd91e 100644
--- a/src/lib/form-field/prefix.ts
+++ b/src/lib/form-field/prefix.ts
@@ -12,5 +12,6 @@ import {Directive} from '@angular/core';
 /** Prefix to be placed the the front of the form field. */
 @Directive({
   selector: '[matPrefix]',
+  exportAs: 'matPrefix',
 })
 export class MatPrefix {}
diff --git a/src/lib/form-field/suffix.ts b/src/lib/form-field/suffix.ts
index 39bfeaa493c6..24ff1b44102a 100644
--- a/src/lib/form-field/suffix.ts
+++ b/src/lib/form-field/suffix.ts
@@ -12,5 +12,6 @@ import {Directive} from '@angular/core';
 /** Suffix to be placed at the end of the form field. */
 @Directive({
   selector: '[matSuffix]',
+  exportAs: 'matSuffix',
 })
 export class MatSuffix {}
diff --git a/src/lib/grid-list/grid-tile.ts b/src/lib/grid-list/grid-tile.ts
index 87bc53abfc29..3974a8a002fd 100644
--- a/src/lib/grid-list/grid-tile.ts
+++ b/src/lib/grid-list/grid-tile.ts
@@ -60,6 +60,7 @@ export class MatGridTile {
 @Component({
   moduleId: module.id,
   selector: 'mat-grid-tile-header, mat-grid-tile-footer',
+  exportAs: 'matGridTileText',
   templateUrl: 'grid-tile-text.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
@@ -85,7 +86,8 @@ export class MatGridTileText implements AfterContentInit {
  */
 @Directive({
   selector: '[mat-grid-avatar], [matGridAvatar]',
-  host: {'class': 'mat-grid-avatar'}
+  exportAs: 'matGridAvatar',
+  host: {'class': 'mat-grid-avatar'},
 })
 export class MatGridAvatarCssMatStyler {}
 
@@ -95,6 +97,7 @@ export class MatGridAvatarCssMatStyler {}
  */
 @Directive({
   selector: 'mat-grid-tile-header',
+  exportAs: 'matGridTileHeader',
   host: {'class': 'mat-grid-tile-header'}
 })
 export class MatGridTileHeaderCssMatStyler {}
@@ -105,6 +108,7 @@ export class MatGridTileHeaderCssMatStyler {}
  */
 @Directive({
   selector: 'mat-grid-tile-footer',
+  exportAs: 'matGridTileFooter',
   host: {'class': 'mat-grid-tile-footer'}
 })
 export class MatGridTileFooterCssMatStyler {}
diff --git a/src/lib/input/input.ts b/src/lib/input/input.ts
index cd9603ca2f57..473e57f6cdb9 100644
--- a/src/lib/input/input.ts
+++ b/src/lib/input/input.ts
@@ -58,7 +58,7 @@ export const _MatInputMixinBase = mixinErrorState(MatInputBase);
 
 /** Directive that allows a native input to work inside a `MatFormField`. */
 @Directive({
-  selector: `input[matInput], textarea[matInput]`,
+  selector: 'input[matInput], textarea[matInput]',
   exportAs: 'matInput',
   host: {
     /**
diff --git a/src/lib/list/list.ts b/src/lib/list/list.ts
index 00f9c7b8ab36..0b955752a5a1 100644
--- a/src/lib/list/list.ts
+++ b/src/lib/list/list.ts
@@ -65,7 +65,8 @@ export class MatList extends _MatListMixinBase implements CanDisableRipple {}
  */
 @Directive({
   selector: '[mat-list-avatar], [matListAvatar]',
-  host: {'class': 'mat-list-avatar'}
+  exportAs: 'matListAvatar',
+  host: {'class': 'mat-list-avatar'},
 })
 export class MatListAvatarCssMatStyler {}
 
@@ -75,7 +76,8 @@ export class MatListAvatarCssMatStyler {}
  */
 @Directive({
   selector: '[mat-list-icon], [matListIcon]',
-  host: {'class': 'mat-list-icon'}
+  exportAs: 'matListIcon',
+  host: {'class': 'mat-list-icon'},
 })
 export class MatListIconCssMatStyler {}
 
@@ -85,7 +87,8 @@ export class MatListIconCssMatStyler {}
  */
 @Directive({
   selector: '[mat-subheader], [matSubheader]',
-  host: {'class': 'mat-subheader'}
+  exportAs: 'matSubheader',
+  host: {'class': 'mat-subheader'},
 })
 export class MatListSubheaderCssMatStyler {}
 
diff --git a/src/lib/menu/menu-content.ts b/src/lib/menu/menu-content.ts
index e8d16b824ea5..210e3a239113 100644
--- a/src/lib/menu/menu-content.ts
+++ b/src/lib/menu/menu-content.ts
@@ -23,7 +23,8 @@ import {DOCUMENT} from '@angular/common';
  * Menu content that will be rendered lazily once the menu is opened.
  */
 @Directive({
-  selector: 'ng-template[matMenuContent]'
+  selector: 'ng-template[matMenuContent]',
+  exportAs: 'matMenuContent',
 })
 export class MatMenuContent implements OnDestroy {
   private _portal: TemplatePortal<any>;
diff --git a/src/lib/menu/menu-trigger.ts b/src/lib/menu/menu-trigger.ts
index 86a1a6a89da4..259e2b83c249 100644
--- a/src/lib/menu/menu-trigger.ts
+++ b/src/lib/menu/menu-trigger.ts
@@ -62,7 +62,7 @@ export const MENU_PANEL_TOP_PADDING = 8;
  * responsible for toggling the display of the provided menu instance.
  */
 @Directive({
-  selector: `[mat-menu-trigger-for], [matMenuTriggerFor]`,
+  selector: '[mat-menu-trigger-for], [matMenuTriggerFor]',
   host: {
     'aria-haspopup': 'true',
     '(mousedown)': '_handleMousedown($event)',
diff --git a/src/lib/progress-spinner/progress-spinner.ts b/src/lib/progress-spinner/progress-spinner.ts
index dc7b88885c33..f019120fcf75 100644
--- a/src/lib/progress-spinner/progress-spinner.ts
+++ b/src/lib/progress-spinner/progress-spinner.ts
@@ -229,6 +229,7 @@ export class MatProgressSpinner extends _MatProgressSpinnerMixinBase implements
 @Component({
   moduleId: module.id,
   selector: 'mat-spinner',
+  exportAs: 'matSpinner',
   host: {
     'role': 'progressbar',
     'mode': 'indeterminate',
diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
index 11866e13f3f9..a3a75bd0145e 100644
--- a/src/lib/select/select.ts
+++ b/src/lib/select/select.ts
@@ -163,7 +163,8 @@ export const _MatSelectMixinBase = mixinDisableRipple(
  * Allows the user to customize the trigger that is displayed when the select has a value.
  */
 @Directive({
-  selector: 'mat-select-trigger'
+  selector: 'mat-select-trigger',
+  exportAs: 'matSelectTrigger',
 })
 export class MatSelectTrigger {}
 
diff --git a/src/lib/sidenav/drawer.ts b/src/lib/sidenav/drawer.ts
index d0bbf4cb4eb3..466e84078fda 100644
--- a/src/lib/sidenav/drawer.ts
+++ b/src/lib/sidenav/drawer.ts
@@ -59,6 +59,7 @@ export const MAT_DRAWER_DEFAULT_AUTOSIZE =
 @Component({
   moduleId: module.id,
   selector: 'mat-drawer-content',
+  exportAs: 'matDrawerContent',
   template: '<ng-content></ng-content>',
   host: {
     'class': 'mat-drawer-content',
diff --git a/src/lib/sidenav/sidenav.ts b/src/lib/sidenav/sidenav.ts
index e4d44a05ea57..2d649ed57a0b 100644
--- a/src/lib/sidenav/sidenav.ts
+++ b/src/lib/sidenav/sidenav.ts
@@ -26,6 +26,7 @@ import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion
 @Component({
   moduleId: module.id,
   selector: 'mat-sidenav-content',
+  exportAs: 'matSidenavContent',
   template: '<ng-content></ng-content>',
   host: {
     'class': 'mat-drawer-content mat-sidenav-content',
diff --git a/src/lib/snack-bar/simple-snack-bar.ts b/src/lib/snack-bar/simple-snack-bar.ts
index 0bfa2039bb62..8f6c5be5c5fb 100644
--- a/src/lib/snack-bar/simple-snack-bar.ts
+++ b/src/lib/snack-bar/simple-snack-bar.ts
@@ -19,6 +19,7 @@ import {matSnackBarAnimations} from './snack-bar-animations';
 @Component({
   moduleId: module.id,
   selector: 'simple-snack-bar',
+  exportAs: 'matSimpleSnackBar',
   templateUrl: 'simple-snack-bar.html',
   styleUrls: ['simple-snack-bar.css'],
   encapsulation: ViewEncapsulation.None,
@@ -27,7 +28,7 @@ import {matSnackBarAnimations} from './snack-bar-animations';
   host: {
     '[@contentFade]': '',
     'class': 'mat-simple-snackbar',
-  }
+  },
 })
 export class SimpleSnackBar {
   /** Data that was injected into the snack bar. */
diff --git a/src/lib/snack-bar/snack-bar-container.ts b/src/lib/snack-bar/snack-bar-container.ts
index 86fc42141050..f649c8774e78 100644
--- a/src/lib/snack-bar/snack-bar-container.ts
+++ b/src/lib/snack-bar/snack-bar-container.ts
@@ -38,6 +38,7 @@ import {MatSnackBarConfig} from './snack-bar-config';
 @Component({
   moduleId: module.id,
   selector: 'snack-bar-container',
+  exportAs: 'matSnackBarContainer',
   templateUrl: 'snack-bar-container.html',
   styleUrls: ['snack-bar-container.css'],
   changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/src/lib/stepper/step-header.ts b/src/lib/stepper/step-header.ts
index e28acbd13e19..ef50bfeeeab5 100644
--- a/src/lib/stepper/step-header.ts
+++ b/src/lib/stepper/step-header.ts
@@ -26,6 +26,7 @@ import {MatStepperIconContext} from './stepper-icon';
 @Component({
   moduleId: module.id,
   selector: 'mat-step-header',
+  exportAs: 'matStepHeader',
   templateUrl: 'step-header.html',
   styleUrls: ['step-header.css'],
   host: {
diff --git a/src/lib/stepper/step-label.ts b/src/lib/stepper/step-label.ts
index 7a5ab7fae3f4..a60dac22ee20 100644
--- a/src/lib/stepper/step-label.ts
+++ b/src/lib/stepper/step-label.ts
@@ -11,6 +11,7 @@ import {CdkStepLabel} from '@angular/cdk/stepper';
 
 @Directive({
   selector: '[matStepLabel]',
+  exportAs: 'matStepLabel',
 })
 export class MatStepLabel extends CdkStepLabel {
   constructor(template: TemplateRef<any>) {
diff --git a/src/lib/stepper/stepper-button.ts b/src/lib/stepper/stepper-button.ts
index a055aa628b87..6dcfe70a003c 100644
--- a/src/lib/stepper/stepper-button.ts
+++ b/src/lib/stepper/stepper-button.ts
@@ -13,6 +13,7 @@ import {MatStepper} from './stepper';
 /** Button that moves to the next step in a stepper workflow. */
 @Directive({
   selector: 'button[matStepperNext]',
+  exportAs: 'matStepperNext',
   host: {
     '(click)': '_stepper.next()',
     '[type]': 'type',
@@ -25,6 +26,7 @@ export class MatStepperNext extends CdkStepperNext {}
 /** Button that moves to the previous step in a stepper workflow. */
 @Directive({
   selector: 'button[matStepperPrevious]',
+  exportAs: 'matStepperPrevious',
   host: {
     '(click)': '_stepper.previous()',
     '[type]': 'type',
diff --git a/src/lib/stepper/stepper-icon.ts b/src/lib/stepper/stepper-icon.ts
index c8cc8556072e..c3edf9d351ae 100644
--- a/src/lib/stepper/stepper-icon.ts
+++ b/src/lib/stepper/stepper-icon.ts
@@ -23,6 +23,7 @@ export interface MatStepperIconContext {
  */
 @Directive({
   selector: 'ng-template[matStepperIcon]',
+  exportAs: 'matStepperIcon',
 })
 export class MatStepperIcon {
   /** Name of the icon to be overridden. */
diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts
index c8c83263cc4a..795a1eb2fe11 100644
--- a/src/lib/stepper/stepper.ts
+++ b/src/lib/stepper/stepper.ts
@@ -70,7 +70,8 @@ export class MatStep extends CdkStep implements ErrorStateMatcher {
 
 
 @Directive({
-  selector: '[matStepper]'
+  selector: '[matStepper]',
+  exportAs: 'matStepper',
 })
 export class MatStepper extends CdkStepper implements AfterContentInit {
   /** The list of step headers of the steps in the stepper. */
diff --git a/src/lib/table/cell.ts b/src/lib/table/cell.ts
index 7e0ae29e43d3..66d875b0e370 100644
--- a/src/lib/table/cell.ts
+++ b/src/lib/table/cell.ts
@@ -21,6 +21,7 @@ import {
  */
 @Directive({
   selector: '[matCellDef]',
+  exportAs: 'matCellDef',
   providers: [{provide: CdkCellDef, useExisting: MatCellDef}]
 })
 export class MatCellDef extends CdkCellDef { }
@@ -31,6 +32,7 @@ export class MatCellDef extends CdkCellDef { }
  */
 @Directive({
   selector: '[matHeaderCellDef]',
+  exportAs: 'matHeaderCellDef',
   providers: [{provide: CdkHeaderCellDef, useExisting: MatHeaderCellDef}]
 })
 export class MatHeaderCellDef extends CdkHeaderCellDef { }
@@ -41,6 +43,7 @@ export class MatHeaderCellDef extends CdkHeaderCellDef { }
  */
 @Directive({
   selector: '[matColumnDef]',
+  exportAs: 'matColumnDef',
   providers: [{provide: CdkColumnDef, useExisting: MatColumnDef}],
 })
 export class MatColumnDef extends CdkColumnDef {
@@ -51,6 +54,7 @@ export class MatColumnDef extends CdkColumnDef {
 /** Header cell template container that adds the right classes and role. */
 @Directive({
   selector: 'mat-header-cell, th[mat-header-cell]',
+  exportAs: 'matHeaderCell',
   host: {
     'class': 'mat-header-cell',
     'role': 'columnheader',
@@ -67,6 +71,7 @@ export class MatHeaderCell extends CdkHeaderCell {
 /** Cell template container that adds the right classes and role. */
 @Directive({
   selector: 'mat-cell, td[mat-cell]',
+  exportAs: 'matCell',
   host: {
     'class': 'mat-cell',
     'role': 'gridcell',
diff --git a/src/lib/table/row.ts b/src/lib/table/row.ts
index 6e68efdf3f02..0d617e28f23b 100644
--- a/src/lib/table/row.ts
+++ b/src/lib/table/row.ts
@@ -21,6 +21,7 @@ import {
  */
 @Directive({
   selector: '[matHeaderRowDef]',
+  exportAs: 'matHeaderRowDef',
   providers: [{provide: CdkHeaderRowDef, useExisting: MatHeaderRowDef}],
   inputs: ['columns: matHeaderRowDef'],
 })
@@ -33,6 +34,7 @@ export class MatHeaderRowDef extends CdkHeaderRowDef { }
  */
 @Directive({
   selector: '[matRowDef]',
+  exportAs: 'matRowDef',
   providers: [{provide: CdkRowDef, useExisting: MatRowDef}],
   inputs: ['columns: matRowDefColumns', 'when: matRowDefWhen'],
 })
diff --git a/src/lib/tabs/ink-bar.ts b/src/lib/tabs/ink-bar.ts
index 9db224d3c645..7d79019adc96 100644
--- a/src/lib/tabs/ink-bar.ts
+++ b/src/lib/tabs/ink-bar.ts
@@ -41,6 +41,7 @@ export const _matInkBarPositioner: _MatInkBarPositioner = (element: HTMLElement)
  */
 @Directive({
   selector: 'mat-ink-bar',
+  exportAs: 'matInkBar',
   host: {
     'class': 'mat-ink-bar',
   },
diff --git a/src/lib/tabs/tab-body.ts b/src/lib/tabs/tab-body.ts
index 51eb1ba29a6e..24d9ae9d141f 100644
--- a/src/lib/tabs/tab-body.ts
+++ b/src/lib/tabs/tab-body.ts
@@ -57,7 +57,8 @@ export type MatTabBodyOriginState = 'left' | 'right';
  * @docs-private
  */
 @Directive({
-  selector: '[matTabBodyHost]'
+  selector: '[matTabBodyHost]',
+  exportAs: 'matTabBodyHost',
 })
 export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestroy {
   /** Subscription to events for when the tab body begins centering. */
@@ -104,6 +105,7 @@ export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestr
 @Component({
   moduleId: module.id,
   selector: 'mat-tab-body',
+  exportAs: 'matTabBody',
   templateUrl: 'tab-body.html',
   styleUrls: ['tab-body.css'],
   encapsulation: ViewEncapsulation.None,
diff --git a/src/lib/tabs/tab-content.ts b/src/lib/tabs/tab-content.ts
index 369a97ff318d..25333100f262 100644
--- a/src/lib/tabs/tab-content.ts
+++ b/src/lib/tabs/tab-content.ts
@@ -9,7 +9,10 @@
 import {Directive, TemplateRef} from '@angular/core';
 
 /** Decorates the `ng-template` tags and reads out the template from it. */
-@Directive({selector: '[matTabContent]'})
+@Directive({
+  selector: '[matTabContent]',
+  exportAs: 'matTabContent',
+})
 export class MatTabContent {
   constructor(public template: TemplateRef<any>) { }
 }
diff --git a/src/lib/tabs/tab-header.ts b/src/lib/tabs/tab-header.ts
index 89816844a8b7..6fdaf08afc35 100644
--- a/src/lib/tabs/tab-header.ts
+++ b/src/lib/tabs/tab-header.ts
@@ -61,6 +61,7 @@ export const _MatTabHeaderMixinBase = mixinDisableRipple(MatTabHeaderBase);
 @Component({
   moduleId: module.id,
   selector: 'mat-tab-header',
+  exportAs: 'matTabHeader',
   templateUrl: 'tab-header.html',
   styleUrls: ['tab-header.css'],
   inputs: ['disableRipple'],
diff --git a/src/lib/tabs/tab-label-wrapper.ts b/src/lib/tabs/tab-label-wrapper.ts
index 44177c937628..38b218e2f6e7 100644
--- a/src/lib/tabs/tab-label-wrapper.ts
+++ b/src/lib/tabs/tab-label-wrapper.ts
@@ -20,10 +20,11 @@ export const _MatTabLabelWrapperMixinBase = mixinDisabled(MatTabLabelWrapperBase
  */
 @Directive({
   selector: '[matTabLabelWrapper]',
+  exportAs: 'matTabLabelWrapper',
   inputs: ['disabled'],
   host: {
     '[class.mat-tab-disabled]': 'disabled'
-  }
+  },
 })
 export class MatTabLabelWrapper extends _MatTabLabelWrapperMixinBase implements CanDisable {
   constructor(public elementRef: ElementRef) {
diff --git a/src/lib/tabs/tab-label.ts b/src/lib/tabs/tab-label.ts
index c56212fac575..2e03ec18f56c 100644
--- a/src/lib/tabs/tab-label.ts
+++ b/src/lib/tabs/tab-label.ts
@@ -12,6 +12,7 @@ import {CdkPortal} from '@angular/cdk/portal';
 /** Used to flag tab labels for use with the portal directive */
 @Directive({
   selector: '[mat-tab-label], [matTabLabel]',
+  exportAs: 'matTabLabel',
 })
 export class MatTabLabel extends CdkPortal {
   constructor(templateRef: TemplateRef<any>, viewContainerRef: ViewContainerRef) {
diff --git a/src/lib/tooltip/tooltip.ts b/src/lib/tooltip/tooltip.ts
index fbd3ea0d9c57..9a1b89d20289 100644
--- a/src/lib/tooltip/tooltip.ts
+++ b/src/lib/tooltip/tooltip.ts
@@ -492,6 +492,7 @@ export type TooltipVisibility = 'initial' | 'visible' | 'hidden';
 @Component({
   moduleId: module.id,
   selector: 'mat-tooltip-component',
+  exportAs: 'matTooltipComponent',
   templateUrl: 'tooltip.html',
   styleUrls: ['tooltip.css'],
   encapsulation: ViewEncapsulation.None,
@@ -503,7 +504,7 @@ export type TooltipVisibility = 'initial' | 'visible' | 'hidden';
     '[style.zoom]': '_visibility === "visible" ? 1 : null',
     '(body:click)': 'this._handleBodyInteraction()',
     'aria-hidden': 'true',
-  }
+  },
 })
 export class TooltipComponent {
   /** Message to display in the tooltip */
diff --git a/src/lib/tree/node.ts b/src/lib/tree/node.ts
index f5523820d48a..1b8f753f6476 100644
--- a/src/lib/tree/node.ts
+++ b/src/lib/tree/node.ts
@@ -41,7 +41,7 @@ export const _MatNestedTreeNodeMixinBase = mixinTabIndex(mixinDisabled(CdkNested
     '[attr.role]': 'role',
     'class': 'mat-tree-node'
   },
-  providers: [{provide: CdkTreeNode, useExisting: MatTreeNode}]
+  providers: [{provide: CdkTreeNode, useExisting: MatTreeNode}],
 })
 export class MatTreeNode<T> extends _MatTreeNodeMixinBase<T> implements HasTabIndex, CanDisable {
   @Input() role: 'treeitem' | 'group' = 'treeitem';
@@ -60,10 +60,11 @@ export class MatTreeNode<T> extends _MatTreeNodeMixinBase<T> implements HasTabIn
  */
 @Directive({
   selector: '[matTreeNodeDef]',
+  exportAs: 'matTreeNodeDef',
   inputs: [
     'when: matTreeNodeDefWhen'
   ],
-  providers: [{provide: CdkTreeNodeDef, useExisting: MatTreeNodeDef}]
+  providers: [{provide: CdkTreeNodeDef, useExisting: MatTreeNodeDef}],
 })
 export class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
   @Input('matTreeNode') data: T;
@@ -84,7 +85,7 @@ export class MatTreeNodeDef<T> extends CdkTreeNodeDef<T> {
   providers: [
     {provide: CdkNestedTreeNode, useExisting: MatNestedTreeNode},
     {provide: CdkTreeNode, useExisting: MatNestedTreeNode}
-  ]
+  ],
 })
 export class MatNestedTreeNode<T> extends _MatNestedTreeNodeMixinBase<T>
     implements HasTabIndex, CanDisable {
diff --git a/src/lib/tree/outlet.ts b/src/lib/tree/outlet.ts
index 6d01a6bf65e6..069a21d97a9a 100644
--- a/src/lib/tree/outlet.ts
+++ b/src/lib/tree/outlet.ts
@@ -16,7 +16,8 @@ import {
  * inside the outlet.
  */
 @Directive({
-  selector: '[matTreeNodeOutlet]'
+  selector: '[matTreeNodeOutlet]',
+  exportAs: 'matTreeNodeOutlet',
 })
 export class MatTreeNodeOutlet implements CdkTreeNodeOutlet {
   constructor(public viewContainer: ViewContainerRef) {}
diff --git a/src/lib/tree/padding.ts b/src/lib/tree/padding.ts
index 5738c82b4ee3..09ccab20eacd 100644
--- a/src/lib/tree/padding.ts
+++ b/src/lib/tree/padding.ts
@@ -14,6 +14,7 @@ import {Directive, Input} from '@angular/core';
  */
 @Directive({
   selector: '[matTreeNodePadding]',
+  exportAs: 'matTreeNodePadding',
   providers: [{provide: CdkTreeNodePadding, useExisting: MatTreeNodePadding}]
 })
 export class MatTreeNodePadding<T> extends CdkTreeNodePadding<T> {
diff --git a/src/lib/tree/toggle.ts b/src/lib/tree/toggle.ts
index 4983bc447e69..a7a340090864 100644
--- a/src/lib/tree/toggle.ts
+++ b/src/lib/tree/toggle.ts
@@ -14,6 +14,7 @@ import {CdkTreeNodeToggle} from '@angular/cdk/tree';
  */
 @Directive({
   selector: '[matTreeNodeToggle]',
+  exportAs: 'matTreeNodeToggle',
   host: {
     '(click)': '_toggle($event)',
   },
diff --git a/tslint.json b/tslint.json
index c3a9ad2c6e4f..b9949647e34a 100644
--- a/tslint.json
+++ b/tslint.json
@@ -93,19 +93,25 @@
       "HostBinding",
       "HostListener"
     ],
-    "validate-decorators": [true, {
-      "Component": {
-        "!host": "\\[class\\]",
-        "!preserveWhitespaces": ".*",
-        "!styles": ".*",
-        "changeDetection": "\\.OnPush$",
-        "encapsulation": "\\.None$",
-        "moduleId": "^module\\.id$"
+    "validate-decorators": [
+      true,
+      {
+        "Component": {
+          "!host": "\\[class\\]",
+          "!preserveWhitespaces": ".*",
+          "!styles": ".*",
+          "changeDetection": "\\.OnPush$",
+          "encapsulation": "\\.None$",
+          "exportAs": "'(cdk|mat)[A-Z][a-zA-Z]+(, (cdk|mat)[A-Z][a-zA-Z]+)*'",
+          "moduleId": "^module\\.id$"
+        },
+        "Directive": {
+          "!host": "\\[class\\]",
+          "exportAs": "'(cdk|mat)[A-Z][a-zA-Z]+(, (cdk|mat)[A-Z][a-zA-Z]+)*'"
+        }
       },
-      "Directive": {
-        "!host": "\\[class\\]"
-      }
-    }, "src/+(lib|cdk|material-experimental|cdk-experimental)/**/!(*.spec).ts"],
+      "src/+(lib|cdk|material-experimental|cdk-experimental)/**/!(*.spec).ts"
+    ],
     "require-license-banner": [
       true,
       "src/+(lib|cdk|material-experimental|cdk-experimental|demo-app)/**/!(*.spec).ts"