The mat-slide-toggle component does not recognize the checked binding

My angular app contains the mat-slide-toggle functionality.

switchValue: {{ switch }} <br />
  <mat-slide-toggle [checked]="switch" (toggleChange)="toggle()">Toggle me!</mat-slide-toggle>
</div>

This is how the component looks:

  switch = false;

  toggle() {
    // backend request and heavy calculation performed here
    this.switch = false;
  }

Issue arises because the toggle does not update the switch property. Even though the user toggles the switch from off to on, the switch value remains false. Is this expected behavior?

https://i.sstatic.net/gVNuR.gif

angulartypescript

Answer №1

If you want to change the state of a checkbox, simply pass its reference into the change method and update it accordingly!

import { Component } from '@angular/core';
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { FormsModule } from '@angular/forms';

/**
 * @title Basic slide-toggles
 */
@Component({
  selector: 'slide-toggle-overview-example',
  template: `
  switchValue: {{ switch }} <br />
  <mat-slide-toggle #toggle [ngModel]="switch" (change)="toggleAction(toggle)"
    >Toggle me!</mat-slide-toggle
  >
  `,
  standalone: true,
  imports: [MatSlideToggleModule, FormsModule],
})
export class SlideToggleOverviewExample {
  switch = false;

  toggleAction(toggle: any) {
    toggle.checked = false;
  }
}

Check out the demo on Stackblitz

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am continuously receiving the message "Alert: It is important for every child in a list to possess a distinct "key" prop." while working with the <option> list

Having trouble generating unique keys for my elements. I've tried different values and even Math.random() but still can't seem to get it right. I know the key should also be added to the outer element, but in this case, I'm not sure which on ...

reactjstypescript

Differences between Pipe and Tap when working with ngxsWhen working with

While experimenting with pipe and subscribe methods, I encountered an issue. When using pipe with tap, nothing gets logged in the console. However, when I switch to using subscribe, it works perfectly. Can you help me figure out what I'm doing wrong? ...

angularrxjspipetapngxs

Wrapping text around an image using two distinct Angular components

Can text wrap around an image in Angular even if they are in separate components? Or do the text and image have to be within the same component for this to work, regardless of whether the image is on the left or right side? https://i.stack.imgur.com/hdlxD ...

cssangular

If the boolean value is false, the material icon set will be colored red

My task management application requires a thumbs up/down icon to be displayed in green or red based on whether the task is completed or not. Previously, I was able to achieve this by using ngClass and applying different CSS classes to the icon. HTML: < ...

angularangular-material2

What is the process for downloading the array of images' responses?

Currently, my setup involves Angular 5 on the front end and Spring Boot on the backend. I am facing the challenge of downloading the JSON response of images. Can anyone provide guidance on how to achieve this? ...

angularspring-boot

Error encountered while attempting to obtain OAuth2 API authorization token in ExpressJS Node.js Angular: "getaddrinfo ENOTFOUND"

Recently, I developed an angular application that sends an HTTP post request to a Node/Express.js endpoint upon clicking a button in order to obtain an authorisation token. I successfully configured the necessary credentials for basic OAuth2 authorisation ...

javascriptnode.jsangularexpressoauth-2.0

Learn the steps to assign a Base64 URL to an image source

I am currently facing an issue with an image that is being used with angular-cli: <img src="" style="width: 120px; padding-top: 10px" alt="" id="dishPhoto"> The image has a Base64 url named imgUrl. My intention is to set the image source using the ...

javascripttypescriptbase64

Encountering a 404 error with an Angular 2 application deployed on Amazon S3

After successfully deploying my Angular2 application on Amazon S3, I noticed that all routing functions properly when navigating using routeLinks/code. However, the problem arises when I refresh the page or try to access a particular route directly - a 40 ...

amazon-web-servicesangularamazon-s3

What is the procedure for accessing a namespace when declaring it globally?

Website Project Background Currently, I am working on a simple website where users can update their pictures. To achieve this functionality, I am utilizing the Multer library along with Express in Typescript. Encountered Issue I am facing a challenge re ...

node.jstypescriptexpressmulter

Stop receiving updates from an Observable generated by the of method

After I finish creating an observable, I make sure to unsubscribe from it immediately. const data$ = this.httpClient.get('https://jsonplaceholder.typicode.com/todos/1').subscribe(res => { console.log('live', res); data$.unsubscr ...

node.jsangulartypescriptecmascript-6rxjs

The access to the HTTP response object is not possible: the property is not found on the Object type

I recently created a response object and assigned it to the "this" object. However, when I try to access the datacentersinfo property, I encounter an error stating that the property does not exist on type Object. Due to this issue, I am unable to generat ...

javascriptangulartypescriptecmascript-6

Using a method call instead of a property for the ngFor directive can lead to an infinite loop of loading

Within my template, I have included the following code: <a *ngFor="let item of navItems" [routerLink]="item.link" routerLinkActive="active" class="navigation-item" [ngClass]="{'enabled': item.enabled}" > <span class="color ...

angulartypescriptangular2-directivesngfor

Error in pagination when using MAX() function in PostgreSQL query

Here is the query I am using to retrieve the latest message from each room: SELECT MAX ( "Messages"."id" ) AS messageId, "Rooms"."id" FROM "RoomUsers" INNER JOIN "Rooms" ON " ...

typescriptpostgresqlsequelize.js

What is the result of using `X ? A : B` in typescript?

type TestAny = any extends 'a' ? 1 : 2 // => 1 | 2 why??? how to interpret? type TestUnknown = unknown extends 'a' ? 1 : 2 // => 2 type TestStringA = 'a' extends 'a' ? 1 : 2 // => 1 type SomeUnion = ' ...

typescript

Trouble triggering hidden radio button in Angular 9 when clicked

I have implemented radio buttons within a div with the following CSS styles (to enable selection by clicking on the div): .plans-list { display: flex; justify-content: center; margin: 2rem 0; .plan { display: flex; margin: 0 0.5rem; p ...

javascriptcssangular

Avoiding the insertion of duplicates in Angular 2 with Observables

My current issue involves a growing array each time I submit a post. It seems like the problem lies within the second observable where the user object gets updated with a new timestamp after each post submission. I have attempted to prevent duplicate entr ...

javascriptarraysangulartypescriptangular2-observables

What could be causing my vis.js network's node hover popups to not function properly?

I've encountered an issue where, despite adding the 'title' property to my node objects, the pop up window with the title content doesn't appear when I hover over a node. Here are the options I've chosen and how I've set up m ...

javascriptnode.jstypescriptvis.jsvis.js-network

esBuild failing to generate typescript declaration files while running in watch mode

Recently dove into using edBuild and I have to say, it's been a breeze to get up and running - simple, fast, and easy. When I execute my esBuild build command WITHOUT WATCH, I can see that the type files (.d.ts) are successfully generated. However, ...

node.jstypescriptnpmtscesbuild

Error in Angular 2: Uncaught Promise TypeError - Unable to access property 'title' of undefined

Whenever I attempt to include a text input field with dual binding in my App, the following error pops up: ERROR Error: Uncaught (in promise): TypeError: Cannot read property 'title' of undefined TypeError: Cannot read property 'title&ap ...

angular

The directive [ngTemplateOutet] is functioning properly, however, the directive *ngTemplateOutlet is not functioning as expected

I have been struggling to create a component using ngTemplateOutlet to select an ng-template, but for some reason *ngTemplateOutlet is not working in this case (although [ngTemplateOutlet] is functioning correctly). Below is the code I am currently using: ...

angulartypescript