feat(material/slide-togge): Add option to hide label

Author: adolgachev

src/dev-app/slide-toggle/slide-toggle-demo.html

@@ -12,6 +12,10 @@
   <mat-slide-toggle labelPosition="before" [disabled]="firstToggle">Disable Bound</mat-slide-toggle>
   <mat-slide-toggle labelPosition="before" hideIcon [(ngModel)]="firstToggle">No icon</mat-slide-toggle>
 
+  <p>With no label.</p>
+
+  <mat-slide-toggle aria-label="Toggle only" hideLabel color="primary" [(ngModel)]="firstToggle" />
+
   <p>Example where the slide toggle is required inside of a form.</p>
 
   <form #form="ngForm" (ngSubmit)="onFormSubmit()">

src/material/slide-toggle/slide-toggle.html

@@ -57,7 +57,9 @@
     Clicking on the label will trigger another click event from the button.
     Stop propagation here so other listeners further up in the DOM don't execute twice.
   -->
-  <label class="mdc-label" [for]="buttonId" [attr.id]="_labelId" (click)="$event.stopPropagation()">
-    <ng-content></ng-content>
-  </label>
+  @if (!hideLabel) {
+    <label class="mdc-label" [for]="buttonId" [attr.id]="_labelId" (click)="$event.stopPropagation()">
+      <ng-content></ng-content>
+    </label>
+  }
 </div>

src/material/slide-toggle/slide-toggle.ts

@@ -183,6 +183,9 @@ export class MatSlideToggle
     this._changeDetectorRef.markForCheck();
   }
 
+  /** Whether to hide the icon inside of the slide toggle. */
+  @Input({transform: booleanAttribute}) hideLabel: boolean;
+
   /** Whether to hide the icon inside of the slide toggle. */
   @Input({transform: booleanAttribute}) hideIcon: boolean;