docs(material/stepper): add example with MatStepperIntl service (#22685)

Author: amysorto

src/components-examples/material/stepper/BUILD.bazel

@@ -21,6 +21,7 @@ ng_module(
         "//src/material/button",
         "//src/material/icon",
         "//src/material/input",
+        "//src/material/radio",
         "//src/material/stepper",
         "//src/material/stepper/testing",
         "@npm//@angular/common",

src/components-examples/material/stepper/index.ts

@@ -1,9 +1,10 @@
 import {NgModule} from '@angular/core';
-import {ReactiveFormsModule} from '@angular/forms';
+import {FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {CommonModule} from '@angular/common';
 import {MatButtonModule} from '@angular/material/button';
 import {MatIconModule} from '@angular/material/icon';
 import {MatInputModule} from '@angular/material/input';
+import {MatRadioModule} from '@angular/material/radio';
 import {MatStepperModule} from '@angular/material/stepper';
 import {StepperEditableExample} from './stepper-editable/stepper-editable-example';
 import {StepperErrorsExample} from './stepper-errors/stepper-errors-example';
@@ -15,13 +16,15 @@ import {StepperOverviewExample} from './stepper-overview/stepper-overview-exampl
 import {StepperStatesExample} from './stepper-states/stepper-states-example';
 import {StepperVerticalExample} from './stepper-vertical/stepper-vertical-example';
 import {StepperHarnessExample} from './stepper-harness/stepper-harness-example';
+import {StepperIntlExample} from './stepper-intl/stepper-intl-example';
 import {StepperLazyContentExample} from './stepper-lazy-content/stepper-lazy-content-example';
 import {StepperResponsiveExample} from './stepper-responsive/stepper-responsive-example';
 
 export {
   StepperEditableExample,
   StepperErrorsExample,
   StepperHarnessExample,
+  StepperIntlExample,
   StepperLabelPositionBottomExample,
   StepperOptionalExample,
   StepperOverviewExample,
@@ -35,6 +38,7 @@ const EXAMPLES = [
   StepperEditableExample,
   StepperErrorsExample,
   StepperHarnessExample,
+  StepperIntlExample,
   StepperLabelPositionBottomExample,
   StepperOptionalExample,
   StepperOverviewExample,
@@ -46,9 +50,11 @@ const EXAMPLES = [
 
 @NgModule({
   imports: [
+    FormsModule,
     MatButtonModule,
     MatIconModule,
     MatInputModule,
+    MatRadioModule,
     MatStepperModule,
     ReactiveFormsModule,
     CommonModule,

src/components-examples/material/stepper/stepper-intl/stepper-intl-example.css

@@ -0,0 +1,17 @@
+.demo-stepper {
+  margin-top: 8px;
+}
+
+.demo-form-field {
+  margin-top: 16px;
+}
+
+.demo-radio-group {
+  display: flex;
+  flex-direction: column;
+  margin: 15px 0;
+}
+
+.demo-radio-button {
+  margin: 5px;
+}

src/components-examples/material/stepper/stepper-intl/stepper-intl-example.html

@@ -0,0 +1,59 @@
+<label for="demo-optional-label-group">Pick the text for the optional label</label>
+<mat-radio-group
+  id="demo-optional-label-group"
+  class="demo-radio-group"
+  [(ngModel)]="optionalLabelText"
+  (ngModelChange)="updateOptionalLabel()">
+  <mat-radio-button
+    class="demo-radio-button"
+    *ngFor="let optionalLabelTextChoice of optionalLabelTextChoices"
+    [value]="optionalLabelTextChoice">
+    {{optionalLabelTextChoice}}
+  </mat-radio-button>
+</mat-radio-group>
+<mat-horizontal-stepper class="demo-stepper" #stepper>
+  <mat-step [stepControl]="firstFormGroup">
+    <form [formGroup]="firstFormGroup">
+      <ng-template matStepLabel>Fill out your name</ng-template>
+      <mat-form-field class="demo-form-field">
+        <mat-label>Name</mat-label>
+        <input
+          matInput
+          placeholder="Last name, First name"
+          formControlName="firstCtrl"
+          required
+        />
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step
+    [stepControl]="secondFormGroup"
+    label="Fill out your address"
+    optional>
+    <form [formGroup]="secondFormGroup">
+      <mat-form-field>
+        <mat-label>Address</mat-label>
+        <input
+          matInput
+          formControlName="secondCtrl"
+          placeholder="Ex. 1 Main St, New York, NY"
+        />
+      </mat-form-field>
+      <div>
+        <button mat-button matStepperPrevious>Back</button>
+        <button mat-button matStepperNext>Next</button>
+      </div>
+    </form>
+  </mat-step>
+  <mat-step>
+    <ng-template matStepLabel>Done</ng-template>
+    <p>You are now done.</p>
+    <div>
+      <button mat-button matStepperPrevious>Back</button>
+      <button mat-button (click)="stepper.reset()">Reset</button>
+    </div>
+  </mat-step>
+</mat-horizontal-stepper>

src/components-examples/material/stepper/stepper-intl/stepper-intl-example.ts

@@ -0,0 +1,46 @@
+import {Component, Injectable, OnInit} from '@angular/core';
+import {FormBuilder, FormGroup, Validators} from '@angular/forms';
+import {MatStepperIntl} from '@angular/material/stepper';
+
+@Injectable()
+export class StepperIntl extends MatStepperIntl {
+  // the default optional label text, if unspecified is "Optional"
+  optionalLabel = 'Optional Label';
+}
+
+/**
+ * @title Stepper that uses the MatStepperIntl service
+ */
+@Component({
+  selector: 'stepper-intl-example',
+  templateUrl: 'stepper-intl-example.html',
+  styleUrls: ['stepper-intl-example.css'],
+  providers: [{ provide: MatStepperIntl, useClass: StepperIntl }]
+})
+export class StepperIntlExample implements OnInit {
+  firstFormGroup: FormGroup;
+  secondFormGroup: FormGroup;
+  optionalLabelText: string;
+  optionalLabelTextChoices: string[] = ['Option 1', 'Option 2', 'Option 3'];
+
+  constructor(
+    private _formBuilder: FormBuilder,
+    private _matStepperIntl: MatStepperIntl
+  ) {}
+
+  updateOptionalLabel() {
+    this._matStepperIntl.optionalLabel = this.optionalLabelText;
+    // Required for the optional label text to be updated
+    // Notifies the MatStepperIntl service that a change has been made
+    this._matStepperIntl.changes.next();
+  }
+
+  ngOnInit() {
+    this.firstFormGroup = this._formBuilder.group({
+      firstCtrl: ['', Validators.required]
+    });
+    this.secondFormGroup = this._formBuilder.group({
+      secondCtrl: ['', Validators.required]
+    });
+  }
+}

src/material/stepper/stepper.md

@@ -217,6 +217,8 @@ can be done by providing a subclass with translated values in your application r
 export class MyApp {}
 ```
 
+<!-- example(stepper-intl) -->
+
 ### 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