diff --git a/src/dev-app/slide-toggle/slide-toggle-demo.html b/src/dev-app/slide-toggle/slide-toggle-demo.html index 0065ad4c5067..7be860ac2a12 100644 --- a/src/dev-app/slide-toggle/slide-toggle-demo.html +++ b/src/dev-app/slide-toggle/slide-toggle-demo.html @@ -1,29 +1,15 @@
- - - Default Slide Toggle - - - - Disabled Slide Toggle - - - - Disable Bound - + Default Slide Toggle + Disabled Slide Toggle + Disable Bound + No icon

Example where the slide toggle is required inside of a form.

- - - Slide Toggle - - + Slide Toggle

-
- -
\ No newline at end of file + diff --git a/src/material/slide-toggle/slide-toggle-config.ts b/src/material/slide-toggle/slide-toggle-config.ts index 30ae3cf64623..8dfe1eaaf7b9 100644 --- a/src/material/slide-toggle/slide-toggle-config.ts +++ b/src/material/slide-toggle/slide-toggle-config.ts @@ -15,6 +15,9 @@ export interface MatSlideToggleDefaultOptions { /** Default color for slide toggles. */ color?: ThemePalette; + + /** Whether to hide the icon inside the slide toggle. */ + hideIcon?: boolean; } /** Injection token to be used to override the default options for `mat-slide-toggle`. */ @@ -22,6 +25,6 @@ export const MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS = new InjectionToken ({disableToggleValue: false}), + factory: () => ({disableToggleValue: false, hideIcon: false}), }, ); diff --git a/src/material/slide-toggle/slide-toggle.html b/src/material/slide-toggle/slide-toggle.html index 0401eecbb829..fb83dc215e92 100644 --- a/src/material/slide-toggle/slide-toggle.html +++ b/src/material/slide-toggle/slide-toggle.html @@ -31,7 +31,7 @@ [matRippleDisabled]="disableRipple || disabled" [matRippleCentered]="true"> -
+
{ const rippleElement = slideToggleElement.querySelector('.mat-mdc-slide-toggle-ripple')!; expect(rippleElement.classList).toContain('mat-mdc-focus-indicator'); })); + + it('should be able to hide the icon', fakeAsync(() => { + expect(slideToggleElement.querySelector('.mdc-switch__icons')).toBeTruthy(); + + testComponent.hideIcon = true; + fixture.detectChanges(); + + expect(slideToggleElement.querySelector('.mdc-switch__icons')).toBeFalsy(); + })); }); describe('custom template', () => { @@ -798,6 +807,7 @@ describe('MDC-based MatSlideToggle with forms', () => { [tabIndex]="slideTabindex" [labelPosition]="labelPosition" [disableRipple]="disableRipple" + [hideIcon]="hideIcon" (toggleChange)="onSlideToggleChange()" (dragChange)="onSlideDragChange()" (change)="onSlideChange($event)" @@ -822,6 +832,7 @@ class SlideToggleBasic { toggleTriggered: number = 0; dragTriggered: number = 0; direction: Direction = 'ltr'; + hideIcon = false; onSlideClick: (event?: Event) => void = () => {}; onSlideChange = (event: MatSlideToggleChange) => (this.lastEvent = event); diff --git a/src/material/slide-toggle/slide-toggle.ts b/src/material/slide-toggle/slide-toggle.ts index 5cfb159541d8..7fbf7fc31d6b 100644 --- a/src/material/slide-toggle/slide-toggle.ts +++ b/src/material/slide-toggle/slide-toggle.ts @@ -145,6 +145,16 @@ export abstract class _MatSlideToggleBase this._changeDetectorRef.markForCheck(); } + /** Whether to hide the icon inside of the slide toggle. */ + @Input() + get hideIcon(): boolean { + return this._hideIcon; + } + set hideIcon(value: BooleanInput) { + this._hideIcon = coerceBooleanProperty(value); + } + private _hideIcon = false; + /** An event will be dispatched each time the slide-toggle changes its value. */ @Output() readonly change: EventEmitter = new EventEmitter(); @@ -174,6 +184,7 @@ export abstract class _MatSlideToggleBase this.color = this.defaultColor = defaults.color || 'accent'; this._noopAnimations = animationMode === 'NoopAnimations'; this.id = this._uniqueId = `${idPrefix}${++nextUniqueId}`; + this._hideIcon = defaults.hideIcon ?? false; } ngAfterContentInit() { diff --git a/tools/public_api_guard/material/slide-toggle.md b/tools/public_api_guard/material/slide-toggle.md index fc82a863730f..1a118680ac7b 100644 --- a/tools/public_api_guard/material/slide-toggle.md +++ b/tools/public_api_guard/material/slide-toggle.md @@ -80,6 +80,8 @@ export abstract class _MatSlideToggleBase extends _MatSlideToggleMixinBase im _focused: boolean; // (undocumented) protected _focusMonitor: FocusMonitor; + get hideIcon(): boolean; + set hideIcon(value: BooleanInput); id: string; get inputId(): string; labelPosition: 'before' | 'after'; @@ -102,7 +104,7 @@ export abstract class _MatSlideToggleBase extends _MatSlideToggleMixinBase im protected _uniqueId: string; writeValue(value: any): void; // (undocumented) - static ɵdir: i0.ɵɵDirectiveDeclaration<_MatSlideToggleBase, never, never, { "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, never, false, never>; + static ɵdir: i0.ɵɵDirectiveDeclaration<_MatSlideToggleBase, never, never, { "name": { "alias": "name"; "required": false; }; "id": { "alias": "id"; "required": false; }; "labelPosition": { "alias": "labelPosition"; "required": false; }; "ariaLabel": { "alias": "aria-label"; "required": false; }; "ariaLabelledby": { "alias": "aria-labelledby"; "required": false; }; "ariaDescribedby": { "alias": "aria-describedby"; "required": false; }; "required": { "alias": "required"; "required": false; }; "checked": { "alias": "checked"; "required": false; }; "hideIcon": { "alias": "hideIcon"; "required": false; }; }, { "change": "change"; "toggleChange": "toggleChange"; }, never, never, false, never>; // (undocumented) static ɵfac: i0.ɵɵFactoryDeclaration<_MatSlideToggleBase, never>; } @@ -120,6 +122,7 @@ export class MatSlideToggleChange { export interface MatSlideToggleDefaultOptions { color?: ThemePalette; disableToggleValue?: boolean; + hideIcon?: boolean; } // @public (undocumented)