angular material - How to change Slide toggle label position

app.component.html

<h2 style="padding-top:25px; padding-bottom:25px;">
  Angular Material - How to change Slide toggle label position
</h2>


<h3>Storage access : {{slideToggleStorage.checked}}</h3>

<mat-slide-toggle 
  #slideToggleStorage 
  labelPosition="before">
    Allow us storage access
</mat-slide-toggle>


<h3 style="margin-top:40px;">
  Location access : {{slideToggleLocation.checked}}
</h3>

<mat-slide-toggle 
  #slideToggleLocation 
  labelPosition="after">
    Allow us location access
</mat-slide-toggle>

app.module.ts [import]

import { MatSlideToggleModule } from '@angular/material/slide-toggle'

More Angular tutorials

• angular material - How to use indeterminate Progress spinner
• angular - How to use setTimeout()
• angular material - How to align Tabs
• angular material - How to disable Tabs content animation
• angular material - How to generate Tabs programmatically
• angular material - How to create & add Tab programmatically
• angular material - Tick interval with step in Slider
• angular material - How to invert Slider
• angular material - How to use Slider input event
• angular material - How to use Slide toggle
• angular material - How to get Slide toggle checked status
• angular material - How to use Slide toggle change event
• angular material - Icon inside Expansion Panel header
• angular material - Show Accordion toggle icon on left
• angular material - Open & close Accordion all panels at once