What is the best way to ensure that my mat-slide-toggle only changes when a specific condition is met?

I'm having an issue with a function that toggles a mat-slide-toggle. I need to modify this function to only toggle when the result is false. Currently, it toggles every time, regardless of the result being true or false. I want it to not toggle when the result is false.

Component ts

onActiveHomeboxP(homeboxpackageid, activeid, elem) {
    this.areWeWaiting = true;
    if (confirm('Are you sure to change Status?')) {
      let editHomeboxp = new HomeboxP(
        this.activeHomeboxPForm.value
      );
      editHomeboxp.homeboxpackage_id = homeboxpackageid;
      editHomeboxp.active = !activeid ? 1 : 0;
      this.ws.activatehomeboxp(editHomeboxp).subscribe(
        result => {
          if (result === true) {
            this.router.navigate(['/hbp']);
          } else {
            this.areWeWaiting = false;
          }
        },
        error => {
        }
      );
    } else {
      elem.checked = !elem.checked;
    }
  }

component html

<form [formGroup]="activeHomeboxPForm" class="col s12" >
        <span *ngIf="item.active === 1" >
          <section class="example-section">
            <mat-slide-toggle formControlName="active-{{item.homeboxpackage_id}}" class="example-margin" [checked]="item.active === 1" #elem (click)="onActiveHomeboxP(item.homeboxpackage_id, item.active, elem)" >
              </mat-slide-toggle>
          </section>
        </span>
         <span *ngIf="item.active === 0" >
          <section class="example-section">
            <mat-slide-toggle formControlName="active-{{item.homeboxpackage_id}}" class="example-margin" [checked]="item.active === 0" #elem (click)="onActiveHomeboxP(item.homeboxpackage_id, item.active, elem)">
               </mat-slide-toggle>
          </section>
        </span> 
   </form>

I would appreciate any suggestions on how to prevent the switch from toggling when the result is false. Thank you

Answer №1

Example code snippet:

<mat-slide-toggle [checked]="toggleStatus">Switch me!</mat-slide-toggle>

JavaScript file:

updateToggleStatus(){
    this.toggleStatus = !this.toggleStatus;
}

If toggleStatus is set to true, the slide toggle will be in the 'on' position, and vice versa.

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

Applying the power of Angular function binding within .html() function in d3 visualizations

I am attempting to create a clickable d3 foreignObject span that triggers a function in the component TypeScript file. Below is a snippet of the code I have been working on: .append("foreignObject") .attr("x", x) .attr("y" ...

Attribute specified does not belong to type 'DetailedHTMLProps<ButtonHTMLAttributes

I am working on creating a reusable 'button' component and I would like to include a href attribute so that when the button is clicked, it navigates to another page. An Issue Occurred: The following error was encountered: 'The type '{ ...

Unable to retrieve values using any = {} in TypeScript Angular 8

import { Component, OnInit } from '@angular/core'; import { HttpClient } from '@angular/common/http'; import { enableProdMode } from '@angular/core'; enableProdMode(); @Component({ selector: 'app-home', templat ...

Utilizing Agora's Screenshare Feature with Angular 8

I am currently working on integrating Agora into my Angular 8 application. So far, I have been able to successfully join and leave video calls. However, I am facing challenges with integrating screen sharing functionality. According to the Agora official d ...

Troubleshooting issues encountered while sending HttpClient Get Requests from Angular Front-End to Node.js Back-End

I am encountering an issue where I keep getting the error message "Cannot GET /" on my local host URL when attempting to send a HttpClient get request from my Angular front-end to my Node.js back-end endpoint. Despite the fact that my back-end endpoint suc ...

Encountered numerous issues while attempting to execute the npm install -g angular-cli command

I encountered several errors while attempting to run the command npm install -g angular-cli on my Windows 10 64-bit system. Here's a look at the log: npm ERR! git clone --template=C:\Users\ben\AppData\Roaming\npm-cache\_ ...

Rendering React component within a production build of Angular 7

I've been in the process of gradually moving an Angular app to React. After exploring options like single-spa and nx, I found that they weren't suitable due to the messy script-injected nature of the existing app. So, I decided to go for a semi-m ...

How can I extract data from the 'ngx-quill' editor when integrating it with a FormBuilder in Angular?

After implementing the 'ngx-quill' editor package in my Angular 15 project, I encountered an issue where the value of the content form control was returning 'null' upon form submission using FormBuilder. Despite entering text such as he ...

Tips for checking dropzone functionality during development

I'm currently working on an Angular 5 application and incorporating dropzonejs (the angular wrapper) into it. However, as I am not the backend developer, I do not have full visibility into how the backend has been developed. Currently, CORS is being ...

What is the best way to extract the ng-reflect-value and compare it with the expected value in testing?

After reviewing the attachment, I am utilizing the following code snippet "private readonly By _idTxt = By.XPath(".//*[@class='metric-set-details-dropdown']/../button[ng-reflect-value]");" in an attempt to extract the value of the attribute ng-re ...

"Encountered an error while trying to access the 'get' property of an undefined object in Angular 7 Forms

I encountered an issue while working on Angular 7 forms. The built-in validation for the form functioned flawlessly, but when attempting to implement custom validation by creating a custom function, I faced an error related to the userpass field. My intent ...

"In TypeScript, when something is undefined, it means its value

I am currently working on a class with code to help manage a database. export class DatabaseHelper { public browserID : number; private ConfigID = 17; } Within this class, I am attempting to access the value of ConfigID SetBrowserID() { ...

Jest does not support the processing of import statements in typescript

I am attempting to execute a simple test. The source code is located in src/index.ts and contains the following: const sum = (a, b) => {return a+b} export default sum The test file is located in tests/index.test.ts with this code: impor ...

Modifying pagination page box color in Angular material

Can anyone provide instructions on how to customize the color of the pagination drop down menu? View example image here ...

Encountering an error during installation of typings

While attempting to run the Angular2 Quickstart Demo (https://angular.io/guide/quickstart), I encountered an issue at this specific point: typings install The error message I received is as follows: $ typings install typings ERR! message an HTTP(S) pro ...

What is the procedure for extracting both the previous and updated values from the dynamic autocomplete feature when utilizing md-selected-item-change in Angular Material?

Currently, I'm working with Angular Material's autocomplete feature and am interested in retrieving the previous value when an item is changed. Due to the dynamic addition of the autocomplete directive on the web page, utilizing $watch threads m ...

Is there a way to show uppercase values in Angular's tooltip as capital letters?

Here is my HTML code: <i [class]="item.icon" [pTooltip]="item.item" tooltipPosition="bottom" ></i> The value inside item.item is 'ATTACHMENT' and I am unable to modify it from the ts file. Is there a way ...

Encountering an issue while trying to import the validator module in NextJS 13

I encountered a peculiar issue while trying to import a module. Nextjs presented the following error message: ./application/sign_in/sign_in_store.ts:2:0 Module not found: Can't resolve 'validator' 1 | import { createEvent, createStore } fr ...

Utilizing Angular routing with Module Federation

I am currently involved in a module federation project. mfe1: ParentApp mfe2: childApp1 mfe3: childApp2 mfe4: childApp3(parent of ChildApp1) Each of the child applications, including childApp1, childApp2, and childApp3, have their own routing modules tha ...

What is the best practice for updating the state of a web component in a manner that can be tracked by history with vaadin-router?

I have a straightforward LitElement custom component that I would like to incorporate an "editing" state into. Although I already possess all the necessary information from the server, I am hesitant to introduce a new component solely for displaying an edi ...