From 738314d991e7ed3b4dea8fab05d569013c5d5772 Mon Sep 17 00:00:00 2001 From: Gabriel Schuster Date: Sun, 12 Nov 2017 23:40:14 +0100 Subject: [PATCH 01/14] Force change-detection upon ContentChildren()... ...changes like added / remove steps --- src/lib/stepper/stepper.ts | 16 +++++++++++++++- 1 file changed, 15 insertions(+), 1 deletion(-) diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index 173d2d472604..9535f7ecd84f 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -9,6 +9,7 @@ import {animate, state, style, transition, trigger} from '@angular/animations'; import {CdkStep, CdkStepper} from '@angular/cdk/stepper'; import { + AfterViewInit, Component, ContentChild, ContentChildren, @@ -16,6 +17,7 @@ import { ElementRef, forwardRef, Inject, + OnDestroy, QueryList, SkipSelf, ViewChildren, @@ -26,6 +28,7 @@ import {FormControl, FormGroupDirective, NgForm} from '@angular/forms'; import {ErrorStateMatcher} from '@angular/material/core'; import {MatStepHeader} from './step-header'; import {MatStepLabel} from './step-label'; +import {Subscription} from 'rxjs/Subscription'; /** Workaround for https://github.com/angular/angular/issues/17849 */ export const _MatStep = CdkStep; @@ -66,12 +69,23 @@ export class MatStep extends _MatStep implements ErrorStateMatcher { @Directive({ selector: '[matStepper]' }) -export class MatStepper extends _MatStepper { +export class MatStepper extends _MatStepper implements AfterViewInit, OnDestroy { /** The list of step headers of the steps in the stepper. */ @ViewChildren(MatStepHeader, {read: ElementRef}) _stepHeader: QueryList; /** Steps that the stepper holds. */ @ContentChildren(MatStep) _steps: QueryList; + + /** Workaround for https://github.com/angular/material2/issues/8397 */ + _stepChangesSubscription: Subscription; + ngAfterViewInit() { + this._stepChangesSubscription = this._steps.changes.subscribe(() => this._stateChanged()); + } + ngOnDestroy() { + if(this._stepChangesSubscription instanceof Subscription) { + this._stepChangesSubscription.unsubscribe(); + } + } } @Component({ From f185f9703a04dcf723e04b7d6dbfab05925f0ff8 Mon Sep 17 00:00:00 2001 From: Gabriel Schuster Date: Tue, 14 Nov 2017 06:16:58 +0100 Subject: [PATCH 02/14] Update stepper.ts Moved step changes subscription to AfterContentInit as it depends on `@ContentChildren` --- src/lib/stepper/stepper.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index 9535f7ecd84f..dc0dfe3b5ead 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -9,7 +9,7 @@ import {animate, state, style, transition, trigger} from '@angular/animations'; import {CdkStep, CdkStepper} from '@angular/cdk/stepper'; import { - AfterViewInit, + AfterContentInit, Component, ContentChild, ContentChildren, @@ -69,7 +69,7 @@ export class MatStep extends _MatStep implements ErrorStateMatcher { @Directive({ selector: '[matStepper]' }) -export class MatStepper extends _MatStepper implements AfterViewInit, OnDestroy { +export class MatStepper extends _MatStepper implements AfterContentInit, OnDestroy { /** The list of step headers of the steps in the stepper. */ @ViewChildren(MatStepHeader, {read: ElementRef}) _stepHeader: QueryList; @@ -78,7 +78,7 @@ export class MatStepper extends _MatStepper implements AfterViewInit, OnDestroy /** Workaround for https://github.com/angular/material2/issues/8397 */ _stepChangesSubscription: Subscription; - ngAfterViewInit() { + ngAfterContentInit() { this._stepChangesSubscription = this._steps.changes.subscribe(() => this._stateChanged()); } ngOnDestroy() { From 94384d53e562be3fbae1d521f062118b9926c3b6 Mon Sep 17 00:00:00 2001 From: Gabriel Schuster Date: Wed, 15 Nov 2017 13:26:39 +0100 Subject: [PATCH 03/14] Update stepper.ts Now uses "emit on destroy" pattern for stepper --- src/cdk/stepper/stepper.ts | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts index 8d6db9dc481b..75b5f4a1674b 100644 --- a/src/cdk/stepper/stepper.ts +++ b/src/cdk/stepper/stepper.ts @@ -28,12 +28,14 @@ import { ChangeDetectionStrategy, ChangeDetectorRef, OnChanges, + OnDestroy } from '@angular/core'; import {LEFT_ARROW, RIGHT_ARROW, ENTER, SPACE} from '@angular/cdk/keycodes'; import {CdkStepLabel} from './step-label'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {AbstractControl} from '@angular/forms'; import {Direction, Directionality} from '@angular/cdk/bidi'; +import {takeUntil} from 'rxjs/operators/takeUntil'; /** Used to generate unique ID for each stepper component. */ let nextId = 0; @@ -132,7 +134,10 @@ export class CdkStep implements OnChanges { selector: '[cdkStepper]', exportAs: 'cdkStepper', }) -export class CdkStepper { +export class CdkStepper implements OnDestroy { + /** Emits when the component is destroyed. */ + protected _destroyed = new Subject(); + /** The list of step components that the stepper is holding. */ @ContentChildren(CdkStep) _steps: QueryList; @@ -185,6 +190,11 @@ export class CdkStepper { private _changeDetectorRef: ChangeDetectorRef) { this._groupId = nextId++; } + + ngOnDestroy() { + this._destroyed.next(); + this._destroyed.complete(); + } /** Selects and focuses the next step in list. */ next(): void { From 0b65da8c0a75730dc65eb3c403075f0b4c399010 Mon Sep 17 00:00:00 2001 From: Gabriel Schuster Date: Wed, 15 Nov 2017 13:27:25 +0100 Subject: [PATCH 04/14] Update stepper.ts Now uses "emit on destroy" pattern for stepper to subscribe to step changes (fixes #8397) --- src/lib/stepper/stepper.ts | 11 ++--------- 1 file changed, 2 insertions(+), 9 deletions(-) diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index dc0dfe3b5ead..c316f643ea70 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -17,7 +17,6 @@ import { ElementRef, forwardRef, Inject, - OnDestroy, QueryList, SkipSelf, ViewChildren, @@ -69,7 +68,7 @@ export class MatStep extends _MatStep implements ErrorStateMatcher { @Directive({ selector: '[matStepper]' }) -export class MatStepper extends _MatStepper implements AfterContentInit, OnDestroy { +export class MatStepper extends _MatStepper implements AfterContentInit { /** The list of step headers of the steps in the stepper. */ @ViewChildren(MatStepHeader, {read: ElementRef}) _stepHeader: QueryList; @@ -77,14 +76,8 @@ export class MatStepper extends _MatStepper implements AfterContentInit, OnDestr @ContentChildren(MatStep) _steps: QueryList; /** Workaround for https://github.com/angular/material2/issues/8397 */ - _stepChangesSubscription: Subscription; ngAfterContentInit() { - this._stepChangesSubscription = this._steps.changes.subscribe(() => this._stateChanged()); - } - ngOnDestroy() { - if(this._stepChangesSubscription instanceof Subscription) { - this._stepChangesSubscription.unsubscribe(); - } + this._steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => this._stateChanged()); } } From e20ebe6469c398cc1fef5d5f95b9051d6b1926f1 Mon Sep 17 00:00:00 2001 From: Gabriel Schuster Date: Wed, 15 Nov 2017 13:29:15 +0100 Subject: [PATCH 05/14] Update stepper.ts Removed (now) unneccessary Subscription import --- src/lib/stepper/stepper.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index c316f643ea70..c0a3157e235d 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -27,7 +27,6 @@ import {FormControl, FormGroupDirective, NgForm} from '@angular/forms'; import {ErrorStateMatcher} from '@angular/material/core'; import {MatStepHeader} from './step-header'; import {MatStepLabel} from './step-label'; -import {Subscription} from 'rxjs/Subscription'; /** Workaround for https://github.com/angular/angular/issues/17849 */ export const _MatStep = CdkStep; From 238d5cee7062ed971afdac88eeebbbe3a3728576 Mon Sep 17 00:00:00 2001 From: Gabriel Schuster Date: Wed, 15 Nov 2017 16:28:30 +0100 Subject: [PATCH 06/14] Update stepper.ts --- src/lib/stepper/stepper.ts | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index c0a3157e235d..5c166b2d2b8a 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -27,6 +27,7 @@ import {FormControl, FormGroupDirective, NgForm} from '@angular/forms'; import {ErrorStateMatcher} from '@angular/material/core'; import {MatStepHeader} from './step-header'; import {MatStepLabel} from './step-label'; +import {takeUntil} from 'rxjs/operators/takeUntil'; /** Workaround for https://github.com/angular/angular/issues/17849 */ export const _MatStep = CdkStep; @@ -74,7 +75,7 @@ export class MatStepper extends _MatStepper implements AfterContentInit { /** Steps that the stepper holds. */ @ContentChildren(MatStep) _steps: QueryList; - /** Workaround for https://github.com/angular/material2/issues/8397 */ + /** Mark the component for change detection whenever the content children query changes */ ngAfterContentInit() { this._steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => this._stateChanged()); } From dd32b696e923251d076f941d2454f702fb6b5f06 Mon Sep 17 00:00:00 2001 From: Gabriel Schuster Date: Wed, 15 Nov 2017 16:28:54 +0100 Subject: [PATCH 07/14] Update stepper.ts --- src/cdk/stepper/stepper.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts index 75b5f4a1674b..990ff5b85aa8 100644 --- a/src/cdk/stepper/stepper.ts +++ b/src/cdk/stepper/stepper.ts @@ -35,7 +35,6 @@ import {CdkStepLabel} from './step-label'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {AbstractControl} from '@angular/forms'; import {Direction, Directionality} from '@angular/cdk/bidi'; -import {takeUntil} from 'rxjs/operators/takeUntil'; /** Used to generate unique ID for each stepper component. */ let nextId = 0; From 4cfe5453ba2d9ce1bf6d12b5cf456ed39e4b8296 Mon Sep 17 00:00:00 2001 From: Gabriel Schuster Date: Wed, 15 Nov 2017 22:35:21 +0100 Subject: [PATCH 08/14] Moved comment to appropriate position --- src/lib/stepper/stepper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index 5c166b2d2b8a..ebb36afb81d6 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -75,8 +75,8 @@ export class MatStepper extends _MatStepper implements AfterContentInit { /** Steps that the stepper holds. */ @ContentChildren(MatStep) _steps: QueryList; - /** Mark the component for change detection whenever the content children query changes */ ngAfterContentInit() { + // Mark the component for change detection whenever the content children query changes this._steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => this._stateChanged()); } } From bda41ee110ece2c68c6de539194f11fcbfb340a8 Mon Sep 17 00:00:00 2001 From: Gabriel Schuster Date: Wed, 15 Nov 2017 23:34:41 +0100 Subject: [PATCH 09/14] Update stepper.ts Fixed missing import --- src/lib/stepper/stepper.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index ebb36afb81d6..4f16ec618ec4 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -27,6 +27,7 @@ import {FormControl, FormGroupDirective, NgForm} from '@angular/forms'; import {ErrorStateMatcher} from '@angular/material/core'; import {MatStepHeader} from './step-header'; import {MatStepLabel} from './step-label'; +import {Subject} from 'rxjs/Subject'; import {takeUntil} from 'rxjs/operators/takeUntil'; /** Workaround for https://github.com/angular/angular/issues/17849 */ From dd7b540a356487aa8679a16717c8dff214aed177 Mon Sep 17 00:00:00 2001 From: Gabriel Schuster Date: Fri, 17 Nov 2017 07:15:25 +0100 Subject: [PATCH 10/14] Update stepper.ts --- src/cdk/stepper/stepper.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts index 990ff5b85aa8..b568f5acc365 100644 --- a/src/cdk/stepper/stepper.ts +++ b/src/cdk/stepper/stepper.ts @@ -35,6 +35,7 @@ import {CdkStepLabel} from './step-label'; import {coerceBooleanProperty} from '@angular/cdk/coercion'; import {AbstractControl} from '@angular/forms'; import {Direction, Directionality} from '@angular/cdk/bidi'; +import {Subject} from 'rxjs/Subject'; /** Used to generate unique ID for each stepper component. */ let nextId = 0; From 7fa850221c4a584d6bf2f4445eab696c8b36555b Mon Sep 17 00:00:00 2001 From: Gabriel Schuster Date: Fri, 17 Nov 2017 07:16:56 +0100 Subject: [PATCH 11/14] Update stepper.ts --- src/lib/stepper/stepper.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index 4f16ec618ec4..ebb36afb81d6 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -27,7 +27,6 @@ import {FormControl, FormGroupDirective, NgForm} from '@angular/forms'; import {ErrorStateMatcher} from '@angular/material/core'; import {MatStepHeader} from './step-header'; import {MatStepLabel} from './step-label'; -import {Subject} from 'rxjs/Subject'; import {takeUntil} from 'rxjs/operators/takeUntil'; /** Workaround for https://github.com/angular/angular/issues/17849 */ From c6bde9e4bcdad96046946bb2c3de06c94f03b380 Mon Sep 17 00:00:00 2001 From: Gabriel Schuster Date: Fri, 17 Nov 2017 08:35:46 +0100 Subject: [PATCH 12/14] Update stepper.ts --- src/cdk/stepper/stepper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts index b568f5acc365..8093d847ed48 100644 --- a/src/cdk/stepper/stepper.ts +++ b/src/cdk/stepper/stepper.ts @@ -190,7 +190,7 @@ export class CdkStepper implements OnDestroy { private _changeDetectorRef: ChangeDetectorRef) { this._groupId = nextId++; } - + ngOnDestroy() { this._destroyed.next(); this._destroyed.complete(); From 1bc4b59ed4d3cbfee130070b28391228f3cd176e Mon Sep 17 00:00:00 2001 From: Gabriel Schuster Date: Fri, 17 Nov 2017 08:36:11 +0100 Subject: [PATCH 13/14] Update stepper.ts --- src/lib/stepper/stepper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/lib/stepper/stepper.ts b/src/lib/stepper/stepper.ts index ebb36afb81d6..fad6059712d6 100644 --- a/src/lib/stepper/stepper.ts +++ b/src/lib/stepper/stepper.ts @@ -74,7 +74,7 @@ export class MatStepper extends _MatStepper implements AfterContentInit { /** Steps that the stepper holds. */ @ContentChildren(MatStep) _steps: QueryList; - + ngAfterContentInit() { // Mark the component for change detection whenever the content children query changes this._steps.changes.pipe(takeUntil(this._destroyed)).subscribe(() => this._stateChanged()); From 6ef5712306fd217728e417738f57c6e3fa279938 Mon Sep 17 00:00:00 2001 From: Gabriel Schuster Date: Fri, 17 Nov 2017 14:09:56 +0100 Subject: [PATCH 14/14] Update stepper.ts --- src/cdk/stepper/stepper.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/cdk/stepper/stepper.ts b/src/cdk/stepper/stepper.ts index 8093d847ed48..2846b882509d 100644 --- a/src/cdk/stepper/stepper.ts +++ b/src/cdk/stepper/stepper.ts @@ -137,7 +137,7 @@ export class CdkStep implements OnChanges { export class CdkStepper implements OnDestroy { /** Emits when the component is destroyed. */ protected _destroyed = new Subject(); - + /** The list of step components that the stepper is holding. */ @ContentChildren(CdkStep) _steps: QueryList;