fix(): add exportAs to missing components

* Adds the `exportAs` option to the missing components inside of Angular Material

Fixes angular#7361

src/cdk/observers/observe-content.ts

@@ -37,7 +37,8 @@ export class MatMutationObserverFactory {
  * its associated element has changed.
  */
 @Directive({
-  selector: '[cdkObserveContent]'
+  selector: '[cdkObserveContent]',
+  exportAs: 'cdkObserveContent',
 })
 export class ObserveContent implements AfterContentInit, OnDestroy {
   private _observer: MutationObserver | null;

src/cdk/portal/portal-directives.ts

@@ -49,6 +49,7 @@ export class TemplatePortalDirective extends TemplatePortal<any> {
  */
 @Directive({
   selector: '[cdkPortalHost], [portalHost]',
+  exportAs: 'cdkPortalHost, portalHost',
   inputs: ['portal: cdkPortalHost']
 })
 export class PortalHostDirective extends BasePortalHost implements OnDestroy {

src/cdk/stepper/stepper.ts

@@ -59,6 +59,7 @@ export class StepperSelectionEvent {
 @Component({
   moduleId: module.id,
   selector: 'cdk-step',
+  exportAs: 'cdkStep',
   templateUrl: 'step.html',
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
@@ -119,6 +120,7 @@ export class CdkStep {
 
 @Directive({
   selector: '[cdkStepper]',
+  exportAs: 'cdkStepper',
 })
 export class CdkStepper {
   /** The list of step components that the stepper is holding. */

src/cdk/table/table.ts

@@ -71,6 +71,7 @@ export const CDK_TABLE_TEMPLATE = `
 @Component({
   moduleId: module.id,
   selector: 'cdk-table',
+  exportAs: 'cdkTable',
   template: CDK_TABLE_TEMPLATE,
   host: {
     'class': 'cdk-table',

src/lib/button-toggle/button-toggle.ts

@@ -263,6 +263,7 @@ export class MatButtonToggleGroupMultiple extends _MatButtonToggleGroupMixinBase
   styleUrls: ['button-toggle.css'],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  exportAs: 'matButtonToggle',
   changeDetection: ChangeDetectionStrategy.OnPush,
   host: {
     '[class.mat-button-toggle-standalone]': '!buttonToggleGroup && !buttonToggleGroupMultiple',

src/lib/button/button.ts

@@ -116,6 +116,7 @@ export const _MatButtonMixinBase = mixinColor(mixinDisabled(mixinDisableRipple(M
   moduleId: module.id,
   selector: `button[mat-button], button[mat-raised-button], button[mat-icon-button],
              button[mat-fab], button[mat-mini-fab]`,
+  exportAs: 'matButton',
   host: {
     '[disabled]': 'disabled || null',
   },
@@ -181,6 +182,7 @@ export class MatButton extends _MatButtonMixinBase
 @Component({
   moduleId: module.id,
   selector: `a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]`,
+  exportAs: 'matButton, matAnchor',
   host: {
     '[attr.tabindex]': 'disabled ? -1 : 0',
     '[attr.disabled]': 'disabled || null',

src/lib/card/card.ts

@@ -55,6 +55,7 @@ export class MatCardSubtitle {}
  */
 @Directive({
   selector: 'mat-card-actions',
+  exportAs: 'matCardActions',
   host: {
     'class': 'mat-card-actions',
     '[class.mat-card-actions-align-end]': 'align === "end"',
@@ -150,6 +151,7 @@ export class MatCardAvatar {}
 @Component({
   moduleId: module.id,
   selector: 'mat-card',
+  exportAs: 'matCard',
   templateUrl: 'card.html',
   styleUrls: ['card.css'],
   encapsulation: ViewEncapsulation.None,

src/lib/checkbox/checkbox.ts

@@ -95,6 +95,7 @@ export const _MatCheckboxMixinBase =
   selector: 'mat-checkbox',
   templateUrl: 'checkbox.html',
   styleUrls: ['checkbox.css'],
+  exportAs: 'matCheckbox',
   host: {
     'class': 'mat-checkbox',
     '[id]': 'id',

src/lib/chips/chip-input.ts

@@ -23,6 +23,7 @@ export interface MatChipInputEvent {
  */
 @Directive({
   selector: 'input[matChipInputFor]',
+  exportAs: 'matChipInput, matChipInputFor',
   host: {
     'class': 'mat-chip-input mat-input-element',
     '(keydown)': '_keydown($event)',

src/lib/core/option/optgroup.ts

@@ -23,6 +23,7 @@ let _uniqueOptgroupIdCounter = 0;
 @Component({
   moduleId: module.id,
   selector: 'mat-optgroup',
+  exportAs: 'matOptgroup',
   templateUrl: 'optgroup.html',
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,

src/lib/core/option/option.ts

@@ -39,6 +39,7 @@ export class MatOptionSelectionChange {
 @Component({
   moduleId: module.id,
   selector: 'mat-option',
+  exportAs: 'matOption',
   host: {
     'role': 'option',
     '[attr.tabindex]': '_getTabIndex()',

src/lib/datepicker/datepicker.ts

@@ -120,6 +120,7 @@ export class MatDatepickerContent<D> implements AfterContentInit {
   moduleId: module.id,
   selector: 'mat-datepicker',
   template: '',
+  exportAs: 'matDatepicker',
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,

src/lib/dialog/dialog-content-directives.ts

@@ -18,6 +18,7 @@ let dialogElementUid = 0;
  */
 @Directive({
   selector: `button[mat-dialog-close], button[matDialogClose]`,
+  exportAs: 'matDialogClose',
   host: {
     '(click)': 'dialogRef.close(dialogResult)',
     '[attr.aria-label]': 'ariaLabel',
@@ -49,6 +50,7 @@ export class MatDialogClose implements OnChanges {
  */
 @Directive({
   selector: '[mat-dialog-title], [matDialogTitle]',
+  exportAs: 'matDialogTitle',
   host: {
     'class': 'mat-dialog-title',
     '[id]': 'id',

src/lib/expansion/accordion.ts

@@ -20,6 +20,7 @@ let nextId = 0;
  */
 @Directive({
   selector: 'cdk-accordion, [cdk-accordion]',
+  exportAs: 'cdkAccordion',
 })
 export class CdkAccordion {
   /** A readonly id value to use for unique selection coordination. */
@@ -51,6 +52,7 @@ export class CdkAccordion {
  */
 @Directive({
   selector: 'mat-accordion',
+  exportAs: 'matAccordion',
   host: {
     class: 'mat-accordion'
   }

src/lib/expansion/expansion-panel.ts

@@ -56,6 +56,7 @@ export const EXPANSION_PANEL_ANIMATION_TIMING = '225ms cubic-bezier(0.4,0.0,0.2,
   moduleId: module.id,
   styleUrls: ['./expansion-panel.css'],
   selector: 'mat-expansion-panel',
+  exportAs: 'matExpansionPanel',
   templateUrl: './expansion-panel.html',
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,

src/lib/form-field/form-field.ts

@@ -53,6 +53,7 @@ let nextUniqueId = 0;
   moduleId: module.id,
   // TODO(mmalerba): the input-container selectors and classes are deprecated and will be removed.
   selector: 'mat-input-container, mat-form-field',
+  exportAs: 'matFormField, matInputContainer',
   templateUrl: 'form-field.html',
   // MatInput is a directive and can't have styles, so we need to include its styles here.
   // The MatInput styles are fairly minimal so it shouldn't be a big deal for people who

src/lib/grid-list/grid-list.ts

@@ -38,6 +38,7 @@ const MAT_FIT_MODE = 'fit';
 @Component({
   moduleId: module.id,
   selector: 'mat-grid-list',
+  exportAs: 'matGridList',
   templateUrl: 'grid-list.html',
   styleUrls: ['grid-list.css'],
   host: {

src/lib/grid-list/grid-tile.ts

@@ -24,6 +24,7 @@ import {coerceToNumber} from './grid-list-measure';
 @Component({
   moduleId: module.id,
   selector: 'mat-grid-tile',
+  exportAs: 'matGridTile',
   host: {
     'class': 'mat-grid-tile',
   },

src/lib/icon/icon.ts

@@ -62,6 +62,7 @@ export const _MatIconMixinBase = mixinColor(MatIconBase);
   moduleId: module.id,
   template: '<ng-content></ng-content>',
   selector: 'mat-icon',
+  exportAs: 'matIcon',
   styleUrls: ['icon.css'],
   inputs: ['color'],
   host: {

src/lib/input/input.ts

@@ -51,6 +51,7 @@ let nextUniqueId = 0;
 /** Directive that allows a native input to work inside a `MatFormField`. */
 @Directive({
   selector: `input[matInput], textarea[matInput]`,
+  exportAs: 'matInput',
   host: {
     'class': 'mat-input-element mat-form-field-autofill-control',
     // Native input properties that are overwritten by Angular inputs need to be synced with

src/lib/list/list.ts

@@ -46,6 +46,7 @@ export class MatListDivider {}
 @Component({
   moduleId: module.id,
   selector: 'mat-list, mat-nav-list',
+  exportAs: 'matList, matNavList',
   host: {'role': 'list'},
   template: '<ng-content></ng-content>',
   styleUrls: ['list.css'],
@@ -120,6 +121,7 @@ export class MatListSubheaderCssMatStyler {}
 @Component({
   moduleId: module.id,
   selector: 'mat-list-item, a[mat-list-item]',
+  exportAs: 'matListItem',
   host: {
     'role': 'listitem',
     'class': 'mat-list-item',

src/lib/list/selection-list.ts

@@ -64,6 +64,7 @@ const FOCUSED_STYLE: string = 'mat-list-item-focus';
 @Component({
   moduleId: module.id,
   selector: 'mat-list-option',
+  exportAs: 'matListOption',
   inputs: ['disableRipple'],
   host: {
     'role': 'option',
@@ -187,6 +188,7 @@ export class MatListOption extends _MatListOptionMixinBase
 @Component({
   moduleId: module.id,
   selector: 'mat-selection-list',
+  exportAs: 'matSelectionList',
   inputs: ['disabled', 'disableRipple'],
   host: {
     'role': 'listbox',

src/lib/menu/menu-item.ts

@@ -29,6 +29,7 @@ export const _MatMenuItemMixinBase = mixinDisabled(MatMenuItemBase);
 @Component({
   moduleId: module.id,
   selector: '[mat-menu-item]',
+  exportAs: 'matMenuItem',
   inputs: ['disabled'],
   host: {
     'role': 'menuitem',
@@ -45,7 +46,6 @@ export const _MatMenuItemMixinBase = mixinDisabled(MatMenuItemBase);
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
   templateUrl: 'menu-item.html',
-  exportAs: 'matMenuItem',
 })
 export class MatMenuItem extends _MatMenuItemMixinBase implements FocusableOption, CanDisable,
   OnDestroy {

src/lib/paginator/paginator.ts

@@ -46,6 +46,7 @@ export class PageEvent {
 @Component({
   moduleId: module.id,
   selector: 'mat-paginator',
+  exportAs: 'matPaginator',
   templateUrl: 'paginator.html',
   styleUrls: ['paginator.css'],
   host: {

src/lib/progress-bar/progress-bar.ts

@@ -18,6 +18,7 @@ import {Component, ChangeDetectionStrategy, Input, ViewEncapsulation} from '@ang
 @Component({
   moduleId: module.id,
   selector: 'mat-progress-bar',
+  exportAs: 'matProgressBar',
   host: {
     'role': 'progressbar',
     'aria-valuemin': '0',

src/lib/progress-spinner/progress-spinner.ts

@@ -69,6 +69,7 @@ export const _MatProgressSpinnerMixinBase = mixinColor(MatProgressSpinnerBase, '
 @Component({
   moduleId: module.id,
   selector: 'mat-progress-spinner',
+  exportAs: 'matProgressSpinner',
   host: {
     'role': 'progressbar',
     'class': 'mat-progress-spinner',

src/lib/radio/radio.ts

@@ -75,6 +75,7 @@ export const _MatRadioGroupMixinBase = mixinDisabled(MatRadioGroupBase);
  */
 @Directive({
   selector: 'mat-radio-group',
+  exportAs: 'matRadioGroup',
   providers: [MAT_RADIO_GROUP_CONTROL_VALUE_ACCESSOR],
   host: {
     'role': 'radiogroup',
@@ -331,6 +332,7 @@ export const _MatRadioButtonMixinBase =
   inputs: ['color', 'disableRipple'],
   encapsulation: ViewEncapsulation.None,
   preserveWhitespaces: false,
+  exportAs: 'matRadioButton',
   host: {
     'class': 'mat-radio-button',
     '[class.mat-radio-checked]': 'checked',

src/lib/select/select.ts

@@ -146,6 +146,7 @@ export class MatSelectTrigger {}
 @Component({
   moduleId: module.id,
   selector: 'mat-select',
+  exportAs: 'matSelect',
   templateUrl: 'select.html',
   styleUrls: ['select.css'],
   inputs: ['disabled', 'tabIndex'],
@@ -177,7 +178,6 @@ export class MatSelectTrigger {}
     fadeInContent
   ],
   providers: [{provide: MatFormFieldControl, useExisting: MatSelect}],
-  exportAs: 'matSelect',
 })
 export class MatSelect extends _MatSelectMixinBase implements AfterContentInit, OnDestroy, OnInit,
     ControlValueAccessor, CanDisable, HasTabIndex, MatFormFieldControl<any> {

src/lib/sidenav/drawer.ts

@@ -100,6 +100,7 @@ export class MatDrawerContent implements AfterContentInit {
 @Component({
   moduleId: module.id,
   selector: 'mat-drawer',
+  exportAs: 'matDrawer',
   template: '<ng-content></ng-content>',
   animations: [
     trigger('transform', [
@@ -359,6 +360,7 @@ export class MatDrawer implements AfterContentInit, OnDestroy {
 @Component({
   moduleId: module.id,
   selector: 'mat-drawer-container',
+  exportAs: 'matDrawerContainer',
   templateUrl: 'drawer-container.html',
   styleUrls: [
     'drawer.css',

src/lib/sidenav/sidenav.ts

@@ -42,6 +42,7 @@ export class MatSidenavContent extends MatDrawerContent {
 @Component({
   moduleId: module.id,
   selector: 'mat-sidenav',
+  exportAs: 'matSidenav',
   template: '<ng-content></ng-content>',
   animations: [
     trigger('transform', [
@@ -108,6 +109,7 @@ export class MatSidenav extends MatDrawer {
 @Component({
   moduleId: module.id,
   selector: 'mat-sidenav-container',
+  exportAs: 'matSidenavContainer',
   templateUrl: 'sidenav-container.html',
   styleUrls: [
     'drawer.css',

src/lib/slider/slider.ts

@@ -94,6 +94,7 @@ export const _MatSliderMixinBase = mixinColor(mixinDisabled(MatSliderBase), 'acc
 @Component({
   moduleId: module.id,
   selector: 'mat-slider',
+  exportAs: 'matSlider',
   providers: [MAT_SLIDER_VALUE_ACCESSOR],
   host: {
     '(focus)': '_onFocus()',

src/lib/stepper/stepper.ts

@@ -42,6 +42,7 @@ export const _MatStepper = CdkStepper;
   templateUrl: 'step.html',
   providers: [{provide: MAT_ERROR_GLOBAL_OPTIONS, useExisting: MatStep}],
   encapsulation: ViewEncapsulation.None,
+  exportAs: 'matStep',
   preserveWhitespaces: false,
 })
 export class MatStep extends _MatStep implements ErrorOptions {
@@ -89,6 +90,7 @@ export class MatStepper extends _MatStepper {
 @Component({
   moduleId: module.id,
   selector: 'mat-horizontal-stepper',
+  exportAs: 'matHorizontalStepper',
   templateUrl: 'stepper-horizontal.html',
   styleUrls: ['stepper.css'],
   inputs: ['selectedIndex'],
@@ -114,6 +116,7 @@ export class MatHorizontalStepper extends MatStepper { }
 @Component({
   moduleId: module.id,
   selector: 'mat-vertical-stepper',
+  exportAs: 'matVerticalStepper',
   templateUrl: 'stepper-vertical.html',
   styleUrls: ['stepper.css'],
   inputs: ['selectedIndex'],

src/lib/table/row.ts

@@ -54,6 +54,7 @@ export class MatRowDef extends _MatCdkRowDef { }
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
+  exportAs: 'matHeaderRow',
   preserveWhitespaces: false,
 })
 export class MatHeaderRow extends _MatHeaderRow { }
@@ -69,6 +70,7 @@ export class MatHeaderRow extends _MatHeaderRow { }
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
+  exportAs: 'matRow',
   preserveWhitespaces: false,
 })
 export class MatRow extends _MatRow { }

src/lib/table/table.ts

@@ -18,6 +18,7 @@ export const _MatTable = CdkTable;
 @Component({
   moduleId: module.id,
   selector: 'mat-table',
+  exportAs: 'matTable',
   template: CDK_TABLE_TEMPLATE,
   styleUrls: ['table.css'],
   host: {