Tags down


How to disable the drag option on Angular material Slide toggle component

By : Ameera Hamdy
Date : October 18 2020, 06:10 AM
seems to work fine I am including the component Slide toggle of Angular Material into my view and I want to disable the drag option and just allow the click function. , For me, this works..
code :
import { MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS } from '@angular/material';

  selector: 'app-selector',
  templateUrl: './template.html',
  providers: [
    {provide: MAT_SLIDE_TOGGLE_DEFAULT_OPTIONS , useValue: {disableToggleValue: false, disableDragValue: true}},

Share : facebook icon twitter icon

Angular Material slide toggle component is null by default

By : user6567299
Date : March 29 2020, 07:55 AM
To fix this issue In your app.component.ts, import OnInit from @angular/core, then add the ngOnInit lifecycle hook with methods, declarations and whatever else you have to initialize on load.
code :
import {Component, OnInit} from '@angular/core';
// Your other imports here

    selector: 'app-root',
    templateUrl: '/path/to/app.component.html'

export class AppComponent implements OnInit {
    checked: boolean;
// NgOnInit is required or else Angular will throw an error
    ngOnInit() {
        this.checked = false;
import {Component} from '@angular/core';
// Your other imports here

    selector: 'app-root',
    templateUrl: '/path/to/app.component.html'
export class AppComponent {
    checked: boolean = false;

Two way binding on angular material slide toggle not working as expected (Angular 4)

By : madLoMax
Date : March 29 2020, 07:55 AM
hope this fix your issue I have implemented the angular material slide-toggle that all seems to work except for some reason it isn't binding the value to the relevant variable for some reason? , Just update your html to
code :

Angular material mat-slide-toggle change toggle icon

By : user1531249
Date : March 29 2020, 07:55 AM
I hope this helps . You could overwrite the default styling that is being applied to the Material slide toggle component. I must warn you, this is a bit hacky to do so. However, here's my take on your screenshot.
code :
.mat-slide-toggle-thumb {
    width: 10px !important;
    height: 10px !important;
    transform: translate(50%, 50%);

.mat-slide-toggle-bar {
  background-color: #000;
  border-radius: 15px !important;
  height: 16px !important;

.mat-slide-toggle-thumb-container {
  top: -2px !important;

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
  background-color: #000;

.mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-thumb {
  background-color: #fff;

Angular Material 2 mat-slide-toggle change slide distance of thumb

By : user2050591
Date : March 29 2020, 07:55 AM
This might help you I'm using the mat-slide-toggle element from Angular Material 2, and I made it a bit bigger, but the thumb doesn't move to the end of the container when clicked, and I can't seem to figure out which transform-translate property controls the distance. , In case someone Googles this - the correct selector is the following:
code :
.mat-slide-toggle.mat-checked .mat-slide-toggle-thumb-container {
    transform: translate3d(64px,0,0) !important;

mat-slide-toggle Angular Material toggle programmatically

By : mattsterp
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further https://stackblitz.com/edit/angular-material-edh46h
code :
<mat-slide-toggle #toggleElement class="example-margin" [checked]="checked" (change)="updateFunc($event)">
    Slide me!
  @ViewChild("toggleElement") ref: ElementRef;

  checked: boolean;

  ngOnInit() {
    this.checked = true;

  updateFunc(e) {
    const someCondition = true;
    if (someCondition) {
      this.ref.checked = false;
Related Posts Related Posts :
  • ngSelect always return undefined
  • Nested Forms in Angular Material Stepper trigger a ExpressionChangedAfterItHasBeenCheckedError
  • Angular library dependency exposure
  • Handling errors with RxJS and Angular async pipe
  • Kubernetes internal CORS issues between services
  • Ionic set marker on location or based on longitude and latitude
  • CAN NOT expand Angular Material table
  • Share a angular library across multiple projects
  • How to import pipe to 2 modules(AppModule and ChildModule)?
  • Does Spartacus support Hybris on-premise?
  • Bind regular expression from json to typescript
  • How can i get the selected value in ion-alert radio alert
  • How to get all attributes of an object
  • Using angular elements inside the same angular project
  • RxJS assign observable and get data in one stream
  • Why I can not use anguar/material elements?
  • Getting Error when running 'ng test' Command
  • How can I make another request within catchError?
  • angular 7 input number validation
  • Dont show digits after decimal using angular pipe
  • How to use same component in normal way and with angular material dialog both?
  • How to integrate ReSharper with WebStorm
  • Google cloud application yaml for angular 7
  • How to perform concurrent HTTP requests on rows of a table
  • Angular 7 - deploy workspace applications (projects) in isolation
  • how to turn off differential loading in Angular v8?
  • How to add and update npm packages for a new Angular app in Visual Studio 2019
  • Angular 7, Ngrx, Rxjs 6 - Accessing state between lazy loaded modules
  • cannot find symbol import com.google.firebase.iid.FirebaseInstanceIdService error in ionic3
  • AWS CodePipeline, build failed and getting error
  • CORS problem with Angular and laravel even after setting the CORS header and server response
  • Angular, when the variable is mentioned in the url, the variable is not replaced with its value. Ex: ${username}
  • How to apply two ngIf on single html element with two different conditions
  • Ionic not importing ngx-mathjax module
  • How to display base64 image on iPhone in Ionic 4
  • ngFor in columns with diferents properties
  • How catch the http errors with map
  • How to format a Date field in Angular project
  • focusing ng-select filter input on drop down open
  • Angular 7 PDFJS Component
  • NestJs Errors stemming from @types dependencies in node_modules when running start:prod on fresh project
  • How to override ion-back-button action in ionic 4 with angular 7
  • How can I have an array in input form?
  • Angular 6 component test with a variable into HTML
  • Why is ES7/array polyfill needed despite the tsconfig target is set to ES5
  • How to deal with Google recaptcha backend validation response delay
  • Logging in using @angular/fire/auth results in 403 error on localhost
  • In Angular, with ViewChild/ ViewChildren, how do I get the child of a child?
  • Material Dialog Close on mouseleave (angular material)
  • Ngx-Datatable - How to handle a boolean data of a row
  • Send data post in angular
  • Expected Arguments 1-3, but got 0
  • Immediate response after subscribtion
  • Convert JSON array received from API to JSON Object in Angular
  • Ionic 4 with angular 7, Cannot find type definition file for '@types'
  • ngrx effects property payload does not exist on type never
  • Child component life cycle in parent component
  • How to make custom wrapper for 2 field groups with ngx-formly?
  • Subject.subscribe not firing in ngOnInit
  • Angular Nginx Docker 404
  • shadow
    Privacy Policy - Terms - Contact Us © 35dp-dentalpractice.co.uk