fix(): add exportAs to missing components (#7392)

Fixes #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',
   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

@@ -75,6 +75,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

@@ -270,6 +270,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

@@ -98,6 +98,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

@@ -57,6 +57,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',
   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

@@ -45,6 +45,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

@@ -60,6 +60,7 @@ export interface MatSelectionListOptionEvent {
 @Component({
   moduleId: module.id,
   selector: 'mat-list-option',
+  exportAs: 'matListOption',
   inputs: ['disableRipple'],
   host: {
     'role': 'option',
@@ -186,6 +187,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

@@ -147,6 +147,7 @@ export class MatSelectTrigger {}
 @Component({
   moduleId: module.id,
   selector: 'mat-select',
+  exportAs: 'matSelect',
   templateUrl: 'select.html',
   styleUrls: ['select.css'],
   inputs: ['disabled', 'tabIndex'],
@@ -179,7 +180,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

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

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'],
   host: {

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

@@ -36,6 +36,7 @@ export const _MatStepper = CdkStepper;
   templateUrl: 'step.html',
   providers: [{provide: ErrorStateMatcher, useExisting: MatStep}],
   encapsulation: ViewEncapsulation.None,
+  exportAs: 'matStep',
   preserveWhitespaces: false,
 })
 export class MatStep extends _MatStep implements ErrorStateMatcher {
@@ -74,6 +75,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'],
@@ -98,6 +100,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

@@ -56,6 +56,7 @@ export class MatRowDef<T> extends _MatCdkRowDef<T> {
   },
   changeDetection: ChangeDetectionStrategy.OnPush,
   encapsulation: ViewEncapsulation.None,
+  exportAs: 'matHeaderRow',
   preserveWhitespaces: false,
 })
 export class MatHeaderRow extends _MatHeaderRow { }
@@ -71,6 +72,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: {

src/lib/tabs/tab-group.ts

@@ -64,6 +64,7 @@ export const _MatTabGroupMixinBase = mixinColor(mixinDisableRipple(MatTabGroupBa
 @Component({
   moduleId: module.id,
   selector: 'mat-tab-group',
+  exportAs: 'matTabGroup',
   templateUrl: 'tab-group.html',
   styleUrls: ['tab-group.css'],
   encapsulation: ViewEncapsulation.None,

src/lib/tabs/tab-nav-bar/tab-nav-bar.ts

@@ -62,6 +62,7 @@ export const _MatTabNavMixinBase = mixinDisableRipple(mixinColor(MatTabNavBase,
 @Component({
   moduleId: module.id,
   selector: '[mat-tab-nav-bar]',
+  exportAs: 'matTabNavBar, matTabNav',
   inputs: ['color', 'disableRipple'],
   templateUrl: 'tab-nav-bar.html',
   styleUrls: ['tab-nav-bar.css'],
@@ -180,6 +181,7 @@ export const _MatTabLinkMixinBase = mixinDisabled(MatTabLinkBase);
  */
 @Directive({
   selector: '[mat-tab-link], [matTabLink]',
+  exportAs: 'matTabLink',
   inputs: ['disabled'],
   host: {
     'class': 'mat-tab-link',

src/lib/toolbar/toolbar.ts

@@ -19,6 +19,7 @@ import {CanColor, mixinColor} from '@angular/material/core';
 
 @Directive({
   selector: 'mat-toolbar-row',
+  exportAs: 'matToolbarRow',
   host: {'class': 'mat-toolbar-row'},
 })
 export class MatToolbarRow {}
@@ -34,6 +35,7 @@ export const _MatToolbarMixinBase = mixinColor(MatToolbarBase);
 @Component({
   moduleId: module.id,
   selector: 'mat-toolbar',
+  exportAs: 'matToolbar',
   templateUrl: 'toolbar.html',
   styleUrls: ['toolbar.css'],
   inputs: ['color'],

src/lib/tooltip/tooltip.ts

@@ -87,6 +87,7 @@ export const MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER = {
  */
 @Directive({
   selector: '[mat-tooltip], [matTooltip]',
+  exportAs: 'matTooltip',
   host: {
     '(longpress)': 'show()',
     '(focus)': 'show()',
@@ -94,7 +95,6 @@ export const MAT_TOOLTIP_SCROLL_STRATEGY_PROVIDER = {
     '(keydown)': '_handleKeydown($event)',
     '(touchend)': 'hide(' + TOUCHEND_HIDE_DELAY + ')',
   },
-  exportAs: 'matTooltip',
 })
 export class MatTooltip implements OnDestroy {
   _overlayRef: OverlayRef | null;