Modify the value of mat-slide-toggle from TypeScript code

This is the HTML code I have for a mat-slide-toggle element, with a toggleStatus() function:

<span class="form-control form-control-plaintext">
              <mat-slide-toggle name="status" checked=""
                              formControlName="status" #status>
              <label *ngIf="!formGroup.get('status').value" (click)="toggleStatus(status)" style="margin: 0">Status: Disabled</label>
              <label *ngIf="formGroup.get('status').value" (click)="toggleStatus(status)" style="margin: 0">Status: Active</label>
            </mat-slide-toggle>
</span>

The toggleStatus() function simply toggles the status of the visual checkbox. However, it does not change the form control value when clicking on the label.

So, how can I make the form control value update when I click on the label?

angulartypescriptangular-materialangular-material2

Answer №1

To modify the value of a form control, simply access it through the form control itself,

  public updateControlValue(): void {
    const control = this.formGroup.get("status");
    control.setValue(!control.value);
  }

If you are using a reactive style form, there is no need for a separate toggle method. The value will automatically change when the user interacts with the control. Check out this stackblitz example (Open the console and interact with the button or slide toggle).

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

Understanding File Reading in Angular/Typescript

I'm currently developing an app similar to Wordle and I'm facing an issue with reading words from a file. Here's what I tried: import * as fs from 'fs'; const words = fs.readFileSync('./words.txt', 'utf-8'); con ...

node.jsangulartypescript

Is it possible for NgElse to target an imported component?

I'm in the process of creating a universal loading icon for my website. Here's what I have so far. <div> <p *ngIf="questionsLoaded; else loadingSign" > {{lstQuestions?.length}} question/s found </p> <ng-template #l ...

angular

Passing server parameters to ngModule after the version upgrade to RC5

I'm facing a new challenge in passing parameters to my application. With the transition to RC5, it seems like I now have to use ngModule for this purpose. The previous method mentioned in this solution (Passing asp.net server parameters to Angular 2 a ...

angular

Tips for incorporating state properties into a component

Currently engrossed in a project revolving around state management for individual components utilizing Angular 7 and NGRX. The challenge at hand is to ensure scalability of the implementation, allowing multiple uses while maintaining independence. Thus fa ...

angularngrxngrx-store

The directive within the module was not carried out

After setting up a fresh module in my Angular 8 project and adding a new directive to it, nothing seemed to happen at runtime (although the compilation was successful). I even added console logs to the directive to check if it was being executed different ...

angularangular-directiveangular8angular-module

Accessing Facebook in Ionic 2 Release Candidate 0

I'm interested in adding a Facebook login feature to my Ionic 2 app, but I'm unsure of how to proceed. Most tutorials I've come across demonstrate how to do this with Firebase database, while my project is already using MySql. Can someone gu ...

angularionic2

Exploring Mikro-ORM with Ben Awad's Lireddit: Navigating the Process of Running Initial Migrations

Having some trouble following the lireddit tutorial, particularly with the initial mikro-orm migration step. Encountering a similar issue as mentioned in this post. Tried modifying the constructor of the example entity (tried both provided format and the ...

node.jstypescriptmikro-orm

Angular breadcrumb component for creating a sidebar menu navigation

I am looking to enhance my sidebar menu with breadcrumb navigation. The menus currently include Menu1 and Menu2, each containing submenus such as subMenu1 and subMenu2. When a user clicks on Menu2, I want the breadcrumb trail to display as Home > Menu2 ...

angularangular2-routing

Zero's JSON Journey

When I make an HTTP request to a JSON server and store the value in a variable, using console.log() displays all the information from the JSON. However, when I try to use interpolation to display this information in the template, it throws the following er ...

javascriptjsonangulartypescriptionic-framework

Injecting properties into higher order functions in Typescript allows for the dynamic customization

I'm curious about the process of composing functions that take an object as the sole argument, where each higher order function adds a property. For instance, I have a function that takes a context as input. I would like to wrap this function with a w ...

typescripttypescript-generics

`Incorporate concurrent network requests in React for improved performance`

I am looking to fetch time-series data from a rest service, and currently my implementation looks like this async function getTimeSeriesQuery(i) { // Demonstrating the usage of gql appollo.query(getChunkQueryOptions(i)) } var promises = [] for(var i ...

javascriptreactjstypescriptgraphql

What is the process for creating a new type from a nested part of an existing type?

Currently, my website is being developed with a focus on utilizing code generation to ensure type safety when handling GraphQl queries. Certain components within the application receive a portion of an object as a prop. The specific type structure is outli ...

typescript

When trying to reference a vanilla JavaScript file in TypeScript, encountering the issue of the file not being recognized

I have been attempting to import a file into TypeScript that resembles a typical js file intended for use in a script tag. Despite my efforts, I have not found success with various methods. // global.d.ts declare module 'myfile.js' Within the re ...

javascriptreactjstypescriptreact-typescript

Encountering the "UnauthorizedError: jwt malformed" issue when using Auth0Lock for authentication in an express and angular2 application

TL;DR: Upon logging in, the JWT saved on the client-side is sent to the server using angular2-jwt and verified with express-jwt, resulting in an "UnauthorizedError: jwt malformed" message. Greetings! I'm currently developing a Single Page Application ...

angularexpressauthenticationjwtauth0

Can a class be passed to the binding attribute in Angular framework?

We currently have a system in place that is dependent on a numeric value being set to either 1 or 2 in order to display specific icons. This method is functional. <span *ngIf="config.icon" [class.fas]="true" [class.fa-plus]="icon===1" ...

cssangular

No GraphQL type definitions were discovered for the specified pointers: src/**/*.graphql

I am utilizing the @graphql-codegen/cli tool to automatically generate TypeScript types from my GraphQL server. Below is the content of my codegen.yml: overwrite: true schema: "http://localhost:3001/graphql" documents: "src/**/*.graphql" generates: src/ ...

typescriptgraphqlcode-generationgraphql-codegen

Unexpected alteration of property value when using methods like Array.from() or insertAdjacentElement

I'm encountering an issue where a property of my class undergoes an unintended transformation. import { Draggable, DragTarget } from '../Models/eventlisteners'; import { HeroValues } from '../Models/responseModels'; import { Uti ...

javascripttypescriptclassproperties

Utilize Charts.js to transform negative values into graphical representations

I am struggling with transforming the expense data into a positive number in my bar chart. The data consists of both income and expenses, and I want to display them as positive numbers for easier comparison. I attempted using Math.abs(this.barData[1]) in n ...

typescriptchart.js

TypeScript encounters a problem when attempting to concatenate arrays with different signature overloads

I encountered the following error message: There is an issue with overloading. Overload 1 of 2, '(...items: ConcatArray<{ title: string; width: number; dataIndex: string; render: (level: string) => Element; }>[]): { title: string; width: nu ...

reactjstypescriptantd

Creating a TypeScript class that includes all the attributes of a pre-existing object type

One technique I frequently use in TypeScript involves transforming a plain JSON object definition into a class during runtime. Here's an example: export type LessonDef = { id: string title: string slug: string shortdesc: string explanation: ...

typescript