fix(stepper): unable to internationalize labels

Adds a provider that allows for labels inside the stepper to be internationalized.

Author: crisbeto

src/lib/stepper/public_api.ts

@@ -17,6 +17,7 @@ import {MdStepHeader} from './step-header';
 import {MdStepLabel} from './step-label';
 import {MdHorizontalStepper, MdStep, MdStepper, MdVerticalStepper} from './stepper';
 import {MdStepperNext, MdStepperPrevious} from './stepper-button';
+import {MdStepperIntl} from './stepper-intl';
 
 
 @NgModule({
@@ -39,12 +40,22 @@ import {MdStepperNext, MdStepperPrevious} from './stepper-button';
     MdStepperPrevious,
     MdStepHeader
   ],
-  declarations: [MdHorizontalStepper, MdVerticalStepper, MdStep, MdStepLabel, MdStepper,
-    MdStepperNext, MdStepperPrevious, MdStepHeader],
+  declarations: [
+    MdHorizontalStepper,
+    MdVerticalStepper,
+    MdStep,
+    MdStepLabel,
+    MdStepper,
+    MdStepperNext,
+    MdStepperPrevious,
+    MdStepHeader,
+  ],
+  providers: [MdStepperIntl],
 })
 export class MdStepperModule {}
 
 export * from './step-label';
 export * from './stepper';
 export * from './stepper-button';
 export * from './step-header';
+export * from './stepper-intl';

src/lib/stepper/step-header.html

@@ -13,6 +13,6 @@
   <!-- It there is no label template, fall back to the text label. -->
   <div class="mat-step-text-label" *ngIf="_stringLabel()">{{label}}</div>
 
-  <div class="mat-step-optional" *ngIf="optional">Optional</div>
+  <div class="mat-step-optional" *ngIf="optional">{{_intl.optionalLabel}}</div>
 </div>
 

src/lib/stepper/step-header.ts

@@ -7,9 +7,17 @@
  */
 
 import {coerceBooleanProperty, coerceNumberProperty} from '@angular/cdk/coercion';
-import {Component, Input, ViewEncapsulation} from '@angular/core';
+import {
+  Component,
+  Input,
+  ViewEncapsulation,
+  ChangeDetectorRef,
+  OnDestroy,
+} from '@angular/core';
 import {MATERIAL_COMPATIBILITY_MODE} from '@angular/material/core';
 import {MdStepLabel} from './step-label';
+import {MdStepperIntl} from './stepper-intl';
+import {Subscription} from 'rxjs/Subscription';
 
 
 @Component({
@@ -24,7 +32,9 @@ import {MdStepLabel} from './step-label';
   encapsulation: ViewEncapsulation.None,
   providers: [{provide: MATERIAL_COMPATIBILITY_MODE, useValue: false}],
 })
-export class MdStepHeader {
+export class MdStepHeader implements OnDestroy {
+  private _intlSubscription: Subscription;
+
   /** Icon for the given step. */
   @Input() icon: string;
 
@@ -63,6 +73,14 @@ export class MdStepHeader {
   }
   private _optional: boolean;
 
+  constructor(public _intl: MdStepperIntl, changeDetectorRef: ChangeDetectorRef) {
+    this._intlSubscription = _intl.changes.subscribe(() => changeDetectorRef.markForCheck());
+  }
+
+  ngOnDestroy() {
+    this._intlSubscription.unsubscribe();
+  }
+
   /** Returns string label of given step if it is a text label. */
   _stringLabel(): string | null {
     return this.label instanceof MdStepLabel ? null : this.label;

src/lib/stepper/stepper-intl.ts

@@ -0,0 +1,24 @@
+/**
+ * @license
+ * Copyright Google Inc. All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.io/license
+ */
+
+import {Injectable} from '@angular/core';
+import {Subject} from 'rxjs/Subject';
+
+
+/** Stepper data that is required for internationalization. */
+@Injectable()
+export class MdStepperIntl {
+  /**
+   * Stream that emits whenever the labels here are changed. Use this to notify
+   * components if the labels have changed after initialization.
+   */
+  changes: Subject<void> = new Subject<void>();
+
+  /** Label that is rendered below optional steps. */
+  optionalLabel = 'Optional';
+}

src/lib/stepper/stepper.md

@@ -7,8 +7,8 @@ that drives a stepped workflow. Material stepper extends the CDK stepper and has
 styling.
 
 ### Stepper variants
-There are two stepper components: `md-horizontal-stepper` and `md-vertical-stepper`. They 
-can be used the same way. The only difference is the orientation of stepper. 
+There are two stepper components: `md-horizontal-stepper` and `md-vertical-stepper`. They
+can be used the same way. The only difference is the orientation of stepper.
 `md-horizontal-stepper` selector can be used to create a horizontal stepper, and
 `md-vertical-stepper` can be used to create a vertical stepper. `md-step` components need to be
 placed inside either one of the two stepper components.
@@ -26,7 +26,7 @@ If a step's label is only text, then the `label` attribute can be used.
 </md-vertical-stepper>
 ```
 
-For more complex labels, add a template with the `mdStepLabel` directive inside the 
+For more complex labels, add a template with the `mdStepLabel` directive inside the
 `md-step`.
 ```html
 <md-vertical-stepper>
@@ -49,22 +49,22 @@ There are two button directives to support navigation between different steps:
       <button md-button mdStepperNext>Next</button>
     </div>
   </md-step>
-</md-horizontal-stepper>  
+</md-horizontal-stepper>
 ```
 
 ### Linear stepper
 The `linear` attribute can be set on `md-horizontal-stepper` and `md-vertical-stepper` to create
 a linear stepper that requires the user to complete previous steps before proceeding
 to following steps. For each `md-step`, the `stepControl` attribute can be set to the top level
-`AbstractControl` that is used to check the validity of the step. 
+`AbstractControl` that is used to check the validity of the step.
 
 There are two possible approaches. One is using a single form for stepper, and the other is
 using a different form for each step.
 
 #### Using a single form
 When using a single form for the stepper, `mdStepperPrevious` and `mdStepperNext` have to be
 set to `type="button"` in order to prevent submission of the form before all steps
-are completed. 
+are completed.
 
 ```html
 <form [formGroup]="formGroup">
@@ -83,7 +83,7 @@ are completed.
       </div>
     </md-step>
     ...
-  </md-horizontal-stepper> 
+  </md-horizontal-stepper>
 </form>
 ```
 
@@ -106,11 +106,11 @@ are completed.
 
 #### Optional step
 If completion of a step in linear stepper is not required, then the `optional` attribute can be set
-on `md-step`. 
+on `md-step`.
 
 #### Editable step
 By default, steps are editable, which means users can return to previously completed steps and
-edit their responses. `editable="true"` can be set on `md-step` to change the default. 
+edit their responses. `editable="true"` can be set on `md-step` to change the default.
 
 #### Completed step
 By default, the `completed` attribute of a step returns `true` if the step is valid (in case of
@@ -124,11 +124,26 @@ this default `completed` behavior by setting the `completed` attribute as needed
 - <kbd>TAB</kbd>: Focuses the next tabbable element
 - <kbd>TAB</kbd>+<kbd>SHIFT</kbd>: Focuses the previous tabbable element
 
+### Localizing labels
+The various text strings used by the stepper are provided through `MdStepperIntl`.
+Localization of these messages can be done by providing a subclass with translated values in your
+application root module.
+
+```ts
+@NgModule({
+  imports: [MdStepperModule],
+  providers: [
+    {provide: MdStepperIntl, useClass: MyIntl},
+  ],
+})
+export class MyApp {}
+```
+
 ### Accessibility
 The stepper is treated as a tabbed view for accessibility purposes, so it is given
 `role="tablist"` by default. The header of step that can be clicked to select the step
 is given `role="tab"`, and the content that can be expanded upon selection is given
 `role="tabpanel"`. `aria-selected` attribute of step header and `aria-expanded` attribute of
 step content is automatically set based on step selection change.
 
-The stepper and each step should be given a meaningful label via `aria-label` or `aria-labelledby`.
+The stepper and each step should be given a meaningful label via `aria-label` or `aria-labelledby`.

src/lib/stepper/stepper.spec.ts

@@ -1,4 +1,4 @@
-import {async, ComponentFixture, TestBed} from '@angular/core/testing';
+import {async, ComponentFixture, TestBed, inject} from '@angular/core/testing';
 import {Component, DebugElement} from '@angular/core';
 import {MdStepperModule} from './index';
 import {By} from '@angular/platform-browser';
@@ -9,6 +9,7 @@ import {dispatchKeyboardEvent} from '@angular/cdk/testing';
 import {ENTER, LEFT_ARROW, RIGHT_ARROW, SPACE} from '@angular/cdk/keycodes';
 import {MdStepper, MdHorizontalStepper, MdVerticalStepper} from './stepper';
 import {Directionality} from '@angular/material/core';
+import {MdStepperIntl} from './stepper-intl';
 
 const VALID_REGEX = /valid/;
 
@@ -95,6 +96,21 @@ describe('MdHorizontalStepper', () => {
     it('should set done icon if step is not editable and is completed', () => {
       assertCorrectStepIcon(fixture, false, 'done');
     });
+
+    it('should re-render when the i18n labels change',
+      inject([MdStepperIntl], (intl: MdStepperIntl) => {
+        const header = fixture.debugElement.queryAll(By.css('md-step-header'))[2].nativeElement;
+        const optionalLabel = header.querySelector('.mat-step-optional');
+
+        expect(optionalLabel).toBeTruthy();
+        expect(optionalLabel.textContent).toBe('Optional');
+
+        intl.optionalLabel = 'Valgfri';
+        intl.changes.next();
+        fixture.detectChanges();
+
+        expect(optionalLabel.textContent).toBe('Valgfri');
+      }));
   });
 
   describe('RTL', () => {
@@ -682,7 +698,7 @@ function assertCorrectStepIcon(fixture: ComponentFixture<any>,
           <button md-button mdStepperNext>Next</button>
         </div>
       </md-step>
-      <md-step [label]="inputLabel">
+      <md-step [label]="inputLabel" optional>
         Content 3
         <div>
           <button md-button mdStepperPrevious>Back</button>