docs(material/button-toggle): Update docs and examples (#29256)

Author: amysorto

src/components-examples/material/button-toggle/BUILD.bazel

@@ -17,6 +17,7 @@ ng_module(
         "//src/cdk/testing/testbed",
         "//src/material/button-toggle",
         "//src/material/button-toggle/testing",
+        "//src/material/checkbox",
         "//src/material/icon",
         "@npm//@angular/platform-browser",
         "@npm//@types/jasmine",

src/components-examples/material/button-toggle/button-toggle-appearance/button-toggle-appearance-example.ts

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 
 /**
@@ -10,5 +10,6 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
   styleUrl: 'button-toggle-appearance-example.css',
   standalone: true,
   imports: [MatButtonToggleModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonToggleAppearanceExample {}

src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.css

@@ -1,4 +1,4 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component} from '@angular/core';
 import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
 
@@ -10,6 +10,7 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
   templateUrl: 'button-toggle-forms-example.html',
   standalone: true,
   imports: [MatButtonToggleModule, FormsModule, ReactiveFormsModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonToggleFormsExample {
   fontStyleControl = new FormControl('');

src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.html

@@ -1,4 +1,4 @@
-import {Component, signal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, signal} from '@angular/core';
 import {MatButtonToggleAppearance, MatButtonToggleModule} from '@angular/material/button-toggle';
 
 /**
@@ -9,6 +9,7 @@ import {MatButtonToggleAppearance, MatButtonToggleModule} from '@angular/materia
   templateUrl: 'button-toggle-harness-example.html',
   standalone: true,
   imports: [MatButtonToggleModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ButtonToggleHarnessExample {
   disabled = signal(false);

src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.ts

@@ -1,13 +1,39 @@
-<h3>Single selection</h3>
-<mat-button-toggle-group name="favoriteColor" aria-label="Favorite Color">
-  <mat-button-toggle value="red">Red</mat-button-toggle>
-  <mat-button-toggle value="green">Green</mat-button-toggle>
-  <mat-button-toggle value="blue">Blue</mat-button-toggle>
-</mat-button-toggle-group>
-
-<h3>Multiple selection</h3>
-<mat-button-toggle-group name="ingredients" aria-label="Ingredients" multiple>
-  <mat-button-toggle value="flour">Flour</mat-button-toggle>
-  <mat-button-toggle value="eggs">Eggs</mat-button-toggle>
-  <mat-button-toggle value="sugar">Sugar</mat-button-toggle>
-</mat-button-toggle-group>
+<section>
+  <mat-checkbox
+    [checked]="hideSingleSelectionIndicator()"
+    (change)="toggleSingleSelectionIndicator()"
+  >
+    Hide Single Selection Indicator
+  </mat-checkbox>
+  <mat-checkbox
+    [checked]="hideMultipleSelectionIndicator()"
+    (change)="toggleMultipleSelectionIndicator()"
+  >
+    Hide Multiple Selection Indicator
+  </mat-checkbox>
+</section>
+<section>
+  <h3>Single selection</h3>
+  <mat-button-toggle-group
+    name="favoriteColor"
+    aria-label="Favorite Color"
+    [hideSingleSelectionIndicator]="hideSingleSelectionIndicator()"
+  >
+    <mat-button-toggle value="red">Red</mat-button-toggle>
+    <mat-button-toggle value="green">Green</mat-button-toggle>
+    <mat-button-toggle value="blue">Blue</mat-button-toggle>
+  </mat-button-toggle-group>
+</section>
+<section>
+  <h3>Multiple selection</h3>
+  <mat-button-toggle-group
+    name="ingredients"
+    aria-label="Ingredients"
+    [hideMultipleSelectionIndicator]="hideMultipleSelectionIndicator()"
+    multiple
+  >
+    <mat-button-toggle value="flour">Flour</mat-button-toggle>
+    <mat-button-toggle value="eggs">Eggs</mat-button-toggle>
+    <mat-button-toggle value="sugar">Sugar</mat-button-toggle>
+  </mat-button-toggle-group>
+</section>

src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.ts

@@ -1,5 +1,6 @@
-import {Component} from '@angular/core';
+import {ChangeDetectionStrategy, Component, signal} from '@angular/core';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
+import {MatCheckboxModule} from '@angular/material/checkbox';
 
 /**
  * @title Button toggle selection mode
@@ -8,6 +9,18 @@ import {MatButtonToggleModule} from '@angular/material/button-toggle';
   selector: 'button-toggle-mode-example',
   templateUrl: 'button-toggle-mode-example.html',
   standalone: true,
-  imports: [MatButtonToggleModule],
+  imports: [MatButtonToggleModule, MatCheckboxModule],
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class ButtonToggleModeExample {}
+export class ButtonToggleModeExample {
+  hideSingleSelectionIndicator = signal(false);
+  hideMultipleSelectionIndicator = signal(false);
+
+  toggleSingleSelectionIndicator() {
+    this.hideSingleSelectionIndicator.update(value => !value);
+  }
+
+  toggleMultipleSelectionIndicator() {
+    this.hideMultipleSelectionIndicator.update(value => !value);
+  }
+}

src/components-examples/material/button-toggle/button-toggle-harness/button-toggle-harness-example.ts

@@ -1,5 +1,4 @@
 export {ButtonToggleAppearanceExample} from './button-toggle-appearance/button-toggle-appearance-example';
-export {ButtonToggleExclusiveExample} from './button-toggle-exclusive/button-toggle-exclusive-example';
 export {ButtonToggleOverviewExample} from './button-toggle-overview/button-toggle-overview-example';
 export {ButtonToggleHarnessExample} from './button-toggle-harness/button-toggle-harness-example';
 export {ButtonToggleFormsExample} from './button-toggle-forms/button-toggle-forms-example';

src/components-examples/material/button-toggle/button-toggle-mode/button-toggle-mode-example.html

@@ -19,7 +19,7 @@ and `ngModel` is not supported.
 ### Appearance
 By default, the appearance of `mat-button-toggle-group` and `mat-button-toggle` will follow the
 latest Material Design guidelines. If you want to, you can switch back to the appearance that was
-following the previous Material Design spec by using the `appearance` input. The `appearance` can
+following a previous Material Design spec by using the `appearance` input. The `appearance` can
 be configured globally using the `MAT_BUTTON_TOGGLE_DEFAULT_OPTIONS` injection token.
 
 <!-- example(button-toggle-appearance) -->