refactor(stepper): rework buttons to handle Ivy (#15429) (#15463)

In Ivy inheriting `host` bindings works correctly by merging the two declarations, whereas in ViewEngine the bindings aren't inherited at all. This means that with our current setup the `click` listener on the buttons will be invoked twice with Ivy.

These changes rework the buttons so that they work both with Ivy and ViewEngine.

Author: crisbeto

src/cdk/stepper/stepper-button.ts

@@ -6,14 +6,14 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
-import {Directive, Input} from '@angular/core';
+import {Directive, HostListener, Input} from '@angular/core';
+
 import {CdkStepper} from './stepper';
 
 /** Button that moves to the next step in a stepper workflow. */
 @Directive({
   selector: 'button[cdkStepperNext]',
   host: {
-    '(click)': '_stepper.next()',
     '[type]': 'type',
   }
 })
@@ -22,13 +22,22 @@ export class CdkStepperNext {
   @Input() type: string = 'submit';
 
   constructor(public _stepper: CdkStepper) {}
+
+  // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
+  // In Ivy the `host` bindings will be merged when this class is extended, whereas in
+  // ViewEngine they're overwritte.
+  // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
+  // tslint:disable-next-line:no-host-decorator-in-concrete
+  @HostListener('click')
+  _handleClick() {
+    this._stepper.next();
+  }
 }
 
 /** Button that moves to the previous step in a stepper workflow. */
 @Directive({
   selector: 'button[cdkStepperPrevious]',
   host: {
-    '(click)': '_stepper.previous()',
     '[type]': 'type',
   }
 })
@@ -37,4 +46,14 @@ export class CdkStepperPrevious {
   @Input() type: string = 'button';
 
   constructor(public _stepper: CdkStepper) {}
+
+  // We have to use a `HostListener` here in order to support both Ivy and ViewEngine.
+  // In Ivy the `host` bindings will be merged when this class is extended, whereas in
+  // ViewEngine they're overwritte.
+  // TODO(crisbeto): we move this back into `host` once Ivy is turned on by default.
+  // tslint:disable-next-line:no-host-decorator-in-concrete
+  @HostListener('click')
+  _handleClick() {
+    this._stepper.previous();
+  }
 }

src/lib/stepper/stepper-button.ts

@@ -6,30 +6,27 @@
  * found in the LICENSE file at https://angular.io/license
  */
 
+import {CdkStepperNext, CdkStepperPrevious} from '@angular/cdk/stepper';
 import {Directive} from '@angular/core';
-import {CdkStepper, CdkStepperNext, CdkStepperPrevious} from '@angular/cdk/stepper';
-import {MatStepper} from './stepper';
 
 /** Button that moves to the next step in a stepper workflow. */
 @Directive({
   selector: 'button[matStepperNext]',
   host: {
-    '(click)': '_stepper.next()',
     '[type]': 'type',
   },
-  inputs: ['type'],
-  providers: [{provide: CdkStepper, useExisting: MatStepper}]
+  inputs: ['type']
 })
-export class MatStepperNext extends CdkStepperNext {}
+export class MatStepperNext extends CdkStepperNext {
+}
 
 /** Button that moves to the previous step in a stepper workflow. */
 @Directive({
   selector: 'button[matStepperPrevious]',
   host: {
-    '(click)': '_stepper.previous()',
     '[type]': 'type',
   },
-  inputs: ['type'],
-  providers: [{provide: CdkStepper, useExisting: MatStepper}]
+  inputs: ['type']
 })
-export class MatStepperPrevious extends CdkStepperPrevious {}
+export class MatStepperPrevious extends CdkStepperPrevious {
+}

src/lib/stepper/stepper.ts

@@ -81,9 +81,7 @@ export class MatStep extends CdkStep implements ErrorStateMatcher {
 }
 
 
-@Directive({
-  selector: '[matStepper]'
-})
+@Directive({selector: '[matStepper]', providers: [{provide: CdkStepper, useExisting: MatStepper}]})
 export class MatStepper extends CdkStepper implements AfterContentInit {
   /** The list of step headers of the steps in the stepper. */
   @ViewChildren(MatStepHeader) _stepHeader: QueryList<MatStepHeader>;
@@ -138,7 +136,10 @@ export class MatStepper extends CdkStepper implements AfterContentInit {
     'role': 'tablist',
   },
   animations: [matStepperAnimations.horizontalStepTransition],
-  providers: [{provide: MatStepper, useExisting: MatHorizontalStepper}],
+  providers: [
+    {provide: MatStepper, useExisting: MatHorizontalStepper},
+    {provide: CdkStepper, useExisting: MatHorizontalStepper}
+  ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
@@ -161,7 +162,10 @@ export class MatHorizontalStepper extends MatStepper {
     'role': 'tablist',
   },
   animations: [matStepperAnimations.verticalStepTransition],
-  providers: [{provide: MatStepper, useExisting: MatVerticalStepper}],
+  providers: [
+    {provide: MatStepper, useExisting: MatVerticalStepper},
+    {provide: CdkStepper, useExisting: MatVerticalStepper}
+  ],
   encapsulation: ViewEncapsulation.None,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })

tools/public_api_guard/cdk/stepper.d.ts

@@ -63,12 +63,14 @@ export declare class CdkStepperNext {
     _stepper: CdkStepper;
     type: string;
     constructor(_stepper: CdkStepper);
+    _handleClick(): void;
 }
 
 export declare class CdkStepperPrevious {
     _stepper: CdkStepper;
     type: string;
     constructor(_stepper: CdkStepper);
+    _handleClick(): void;
 }
 
 export declare const MAT_STEPPER_GLOBAL_OPTIONS: InjectionToken<StepperOptions>;