Skip to content

Commit

Permalink
fix(tabs): avoid template type checking errors with Ivy
Browse files Browse the repository at this point in the history
Along the same lines as angular#17022. Adds annotations to the various base classes that declare inputs, because the Ivy template type checker doesn't handle base defs at the moment.

Fixes angular#17121.
  • Loading branch information
crisbeto committed Sep 29, 2019
1 parent 8e141ef commit bff79f1
Show file tree
Hide file tree
Showing 7 changed files with 57 additions and 11 deletions.
10 changes: 9 additions & 1 deletion src/material/tabs/paginated-tab-header.ts
Expand Up @@ -17,6 +17,8 @@ import {
AfterContentInit,
AfterViewInit,
OnDestroy,
Directive,
Inject,
} from '@angular/core';
import {Direction, Directionality} from '@angular/cdk/bidi';
import {coerceNumberProperty} from '@angular/cdk/coercion';
Expand All @@ -26,6 +28,7 @@ import {END, ENTER, HOME, SPACE, hasModifierKey} from '@angular/cdk/keycodes';
import {merge, of as observableOf, Subject, timer, fromEvent} from 'rxjs';
import {takeUntil} from 'rxjs/operators';
import {Platform, normalizePassiveListenerOptions} from '@angular/cdk/platform';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';


/** Config used to bind passive event listeners */
Expand Down Expand Up @@ -62,7 +65,12 @@ export type MatPaginatedTabHeaderItem = FocusableOption & {elementRef: ElementRe

/**
* Base class for a tab header that supported pagination.
* @docs-private
*/
@Directive({
// TODO(crisbeto): this selector can be removed when we update to Angular 9.0.
selector: 'do-not-use-abstract-mat-paginated-tab-header'
})
export abstract class MatPaginatedTabHeader implements AfterContentChecked, AfterContentInit,
AfterViewInit, OnDestroy {
abstract _items: QueryList<MatPaginatedTabHeaderItem>;
Expand Down Expand Up @@ -140,7 +148,7 @@ export abstract class MatPaginatedTabHeader implements AfterContentChecked, Afte
* parameters to become required.
*/
private _platform?: Platform,
public _animationMode?: string) {
@Optional() @Inject(ANIMATION_MODULE_TYPE) public _animationMode?: string) {

// Bind the `mouseleave` event on the outside since it doesn't change anything in the view.
_ngZone.runOutsideAngular(() => {
Expand Down
2 changes: 1 addition & 1 deletion src/material/tabs/public-api.ts
Expand Up @@ -6,7 +6,7 @@
* found in the LICENSE file at https://angular.io/license
*/

export * from './tabs-module';
export {MatTabsModule} from './tabs-module';
export * from './tab-group';
export {MatInkBar, _MatInkBarPositioner, _MAT_INK_BAR_POSITIONER} from './ink-bar';
export {
Expand Down
9 changes: 8 additions & 1 deletion src/material/tabs/tab-body.ts
Expand Up @@ -98,7 +98,14 @@ export class MatTabBodyPortal extends CdkPortalOutlet implements OnInit, OnDestr
}
}

/** Base class with all of the `MatTabBody` functionality. */
/**
* Base class with all of the `MatTabBody` functionality.
* @docs-private
*/
@Directive({
// TODO(crisbeto): this selector can be removed when we update to Angular 9.0.
selector: 'do-not-use-abstract-mat-tab-body-base'
})
// tslint:disable-next-line:class-name
export abstract class _MatTabBodyBase implements OnInit, OnDestroy {
/** Current position of the tab-body in the tab-group. Zero means that the tab is visible. */
Expand Down
10 changes: 9 additions & 1 deletion src/material/tabs/tab-group.ts
Expand Up @@ -25,6 +25,7 @@ import {
Optional,
Inject,
InjectionToken,
Directive,
} from '@angular/core';
import {
CanColor,
Expand Down Expand Up @@ -76,7 +77,14 @@ interface MatTabGroupBaseHeader {
focusIndex: number;
}

/** Base class with all of the `MatTabGroupBase` functionality. */
/**
* Base class with all of the `MatTabGroupBase` functionality.
* @docs-private
*/
@Directive({
// TODO(crisbeto): this selector can be removed when we update to Angular 9.0.
selector: 'do-not-use-abstract-mat-tab-group-base'
})
// tslint:disable-next-line:class-name
export abstract class _MatTabGroupBase extends _MatTabGroupMixinBase implements AfterContentInit,
AfterContentChecked, OnDestroy, CanColor, CanDisableRipple {
Expand Down
10 changes: 9 additions & 1 deletion src/material/tabs/tab-header.ts
Expand Up @@ -25,6 +25,7 @@ import {
AfterViewInit,
Input,
Inject,
Directive,
} from '@angular/core';
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
import {coerceBooleanProperty} from '@angular/cdk/coercion';
Expand All @@ -33,7 +34,14 @@ import {MatTabLabelWrapper} from './tab-label-wrapper';
import {Platform} from '@angular/cdk/platform';
import {MatPaginatedTabHeader} from './paginated-tab-header';

/** Base class with all of the `MatTabHeader` functionality. */
/**
* Base class with all of the `MatTabHeader` functionality.
* @docs-private
*/
@Directive({
// TODO(crisbeto): this selector can be removed when we update to Angular 9.0.
selector: 'do-not-use-abstract-mat-tab-header-base'
})
// tslint:disable-next-line:class-name
export abstract class _MatTabHeaderBase extends MatPaginatedTabHeader implements
AfterContentChecked, AfterContentInit, AfterViewInit, OnDestroy {
Expand Down
9 changes: 8 additions & 1 deletion src/material/tabs/tab-nav-bar/tab-nav-bar.ts
Expand Up @@ -48,7 +48,14 @@ import {MatInkBar} from '../ink-bar';
import {MatPaginatedTabHeader, MatPaginatedTabHeaderItem} from '../paginated-tab-header';
import {startWith, takeUntil} from 'rxjs/operators';

/** Base class with all of the `MatTabNav` functionality. */
/**
* Base class with all of the `MatTabNav` functionality.
* @docs-private
*/
@Directive({
// TODO(crisbeto): this selector can be removed when we update to Angular 9.0.
selector: 'do-not-use-abstract-mat-tab-nav-base'
})
// tslint:disable-next-line:class-name
export abstract class _MatTabNavBase extends MatPaginatedTabHeader implements AfterContentChecked,
AfterContentInit, OnDestroy {
Expand Down
18 changes: 13 additions & 5 deletions src/material/tabs/tabs-module.ts
Expand Up @@ -10,17 +10,18 @@ import {ObserversModule} from '@angular/cdk/observers';
import {PortalModule} from '@angular/cdk/portal';
import {CommonModule} from '@angular/common';
import {NgModule} from '@angular/core';
import {A11yModule} from '@angular/cdk/a11y';
import {MatCommonModule, MatRippleModule} from '@angular/material/core';
import {MatInkBar} from './ink-bar';
import {MatTab} from './tab';
import {MatTabBody, MatTabBodyPortal} from './tab-body';
import {MatTabBody, MatTabBodyPortal, _MatTabBodyBase} from './tab-body';
import {MatTabContent} from './tab-content';
import {MatTabGroup} from './tab-group';
import {MatTabHeader} from './tab-header';
import {MatTabGroup, _MatTabGroupBase} from './tab-group';
import {MatTabHeader, _MatTabHeaderBase} from './tab-header';
import {MatTabLabel} from './tab-label';
import {MatTabLabelWrapper} from './tab-label-wrapper';
import {MatTabLink, MatTabNav} from './tab-nav-bar/tab-nav-bar';
import {A11yModule} from '@angular/cdk/a11y';
import {MatTabLink, MatTabNav, _MatTabNavBase} from './tab-nav-bar/tab-nav-bar';
import {MatPaginatedTabHeader} from './paginated-tab-header';


@NgModule({
Expand Down Expand Up @@ -54,6 +55,13 @@ import {A11yModule} from '@angular/cdk/a11y';
MatTabBodyPortal,
MatTabHeader,
MatTabContent,

// TODO(crisbeto): these can be removed once they're turned into selector-less directives.
MatPaginatedTabHeader as any,
_MatTabGroupBase as any,
_MatTabNavBase as any,
_MatTabBodyBase as any,
_MatTabHeaderBase as any,
],
})
export class MatTabsModule {}

0 comments on commit bff79f1

Please sign in to comment.