diff --git a/src/components-examples/material/button-toggle/BUILD.bazel b/src/components-examples/material/button-toggle/BUILD.bazel index 801193d03f94..f90609b1be27 100644 --- a/src/components-examples/material/button-toggle/BUILD.bazel +++ b/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", diff --git a/src/components-examples/material/button-toggle/button-toggle-appearance/button-toggle-appearance-example.ts b/src/components-examples/material/button-toggle/button-toggle-appearance/button-toggle-appearance-example.ts index 02eee9db2ac6..ea695d7d122a 100644 --- a/src/components-examples/material/button-toggle/button-toggle-appearance/button-toggle-appearance-example.ts +++ b/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 {} diff --git a/src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.css b/src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.css deleted file mode 100644 index d21ca3ce57fb..000000000000 --- a/src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.css +++ /dev/null @@ -1,3 +0,0 @@ -.example-selected-value { - margin: 15px 0; -} diff --git a/src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.html b/src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.html deleted file mode 100644 index 26ca16ada374..000000000000 --- a/src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.html +++ /dev/null @@ -1,15 +0,0 @@ - - - format_align_left - - - format_align_center - - - format_align_right - - - format_align_justify - - -
Selected value: {{group.value}}
diff --git a/src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.ts b/src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.ts deleted file mode 100644 index 5333087fb58e..000000000000 --- a/src/components-examples/material/button-toggle/button-toggle-exclusive/button-toggle-exclusive-example.ts +++ /dev/null @@ -1,15 +0,0 @@ -import {Component} from '@angular/core'; -import {MatIconModule} from '@angular/material/icon'; -import {MatButtonToggleModule} from '@angular/material/button-toggle'; - -/** - * @title Exclusive selection - */ -@Component({ - selector: 'button-toggle-exclusive-example', - templateUrl: 'button-toggle-exclusive-example.html', - styleUrl: 'button-toggle-exclusive-example.css', - standalone: true, - imports: [MatButtonToggleModule, MatIconModule], -}) -export class ButtonToggleExclusiveExample {} diff --git a/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.ts b/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.ts index 5b327e5451b2..2ea7301793ba 100644 --- a/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.ts +++ b/src/components-examples/material/button-toggle/button-toggle-forms/button-toggle-forms-example.ts @@ -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(''); diff --git a/src/components-examples/material/button-toggle/button-toggle-harness/button-toggle-harness-example.ts b/src/components-examples/material/button-toggle/button-toggle-harness/button-toggle-harness-example.ts index 485561846535..d0def6535c17 100644 --- a/src/components-examples/material/button-toggle/button-toggle-harness/button-toggle-harness-example.ts +++ b/src/components-examples/material/button-toggle/button-toggle-harness/button-toggle-harness-example.ts @@ -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); diff --git a/src/components-examples/material/button-toggle/button-toggle-mode/button-toggle-mode-example.html b/src/components-examples/material/button-toggle/button-toggle-mode/button-toggle-mode-example.html index aade97177e89..1835522735b6 100644 --- a/src/components-examples/material/button-toggle/button-toggle-mode/button-toggle-mode-example.html +++ b/src/components-examples/material/button-toggle/button-toggle-mode/button-toggle-mode-example.html @@ -1,13 +1,39 @@ -

Single selection

- - Red - Green - Blue - - -

Multiple selection

- - Flour - Eggs - Sugar - +
+ + Hide Single Selection Indicator + + + Hide Multiple Selection Indicator + +
+
+

Single selection

+ + Red + Green + Blue + +
+
+

Multiple selection

+ + Flour + Eggs + Sugar + +
diff --git a/src/components-examples/material/button-toggle/button-toggle-mode/button-toggle-mode-example.ts b/src/components-examples/material/button-toggle/button-toggle-mode/button-toggle-mode-example.ts index 6abdcd3a90ed..c6543e025326 100644 --- a/src/components-examples/material/button-toggle/button-toggle-mode/button-toggle-mode-example.ts +++ b/src/components-examples/material/button-toggle/button-toggle-mode/button-toggle-mode-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); + } +} diff --git a/src/components-examples/material/button-toggle/index.ts b/src/components-examples/material/button-toggle/index.ts index 269cb42bb5de..32998f7ef1fc 100644 --- a/src/components-examples/material/button-toggle/index.ts +++ b/src/components-examples/material/button-toggle/index.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'; diff --git a/src/material/button-toggle/button-toggle.md b/src/material/button-toggle/button-toggle.md index 9f7c5259cdea..7634db910ab4 100644 --- a/src/material/button-toggle/button-toggle.md +++ b/src/material/button-toggle/button-toggle.md @@ -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.