Check the status when clicking on an event using Angular Material

I am working with an Angular element that involves a checkbox.

<mat-checkbox class="btn-block" 
              labelPosition="before" 
              (change)="showOptions($event)" 
              (click)="makeJSON($event.checked,i,j,k)">
</mat-checkbox>

The onchange event is currently performing a different task related to checkout status, but I need to obtain the checkbox status (checked or unchecked) on the click event instead.

I have attempted to inspect the object generated by click, but it does not contain information about the clicked object. How can I determine whether the checkbox is checked or unchecked in this scenario?

angulartypescriptangular-material

Answer №1

If needed,

(change)="invokeFunction($event)" 
(change)="generateJSON($event.selected,i,j,k)">

alternatively, you can use

(change)="invokeFunction($event);generateJSON($event.selected,i,j,k)">

Answer №2

To retrieve the status using your (change)="showOptions($event)", you can do it with this code snippet:

showOptions(event:MatCheckboxChange): void {
    console.log(event.checked);
}

Answer №3

Another approach could involve utilizing a template reference variable in conjunction with a checkbox, which is then passed as a parameter to a method.

 <mat-checkbox #checkbox (change)='showOptions(checkbox.checked)' value=''>all</mat-checkbox>

The #checkbox reference stores all properties related to the checkbox (such as value and checked status). Using checkbox.checked provides the current state of the checkbox as either true or false.

Answer №4

A way to access the checked event is by using the change function (change)="showOptions($event);

In TypeScript:

showOptions(event){
 console.log(event.checked); //will be either true or false
}

If the checkbox is not checked, it will display an image https://i.sstatic.net/nF5R2.png

If the checkbox is checked, it will display a different image https://i.sstatic.net/ow2Qo.png

Answer №5

isTaxesIncluded = false;                  
<mat-checkbox color="primary"
                      name="isTaxesIncluded" [checked]="false"
                      [(ngModel)]="isTaxesIncluded" id="IncludeTaxes"
                      (change)="onTaxesChange(isTaxesIncluded)">
                        INCLUDE TAXES
                  </mat-checkbox>
    onTaxesChange(checkStatus){
      console.log('checkStatus:>>', checkStatus);
    }

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

What is the best way to assign ngModel to dynamically inserted input rows in Angular 4+ (specifically in a mat-table)?

Just a quick question - how can I add ngModel to dynamically added new input rows? I have a Mat table with multiple rows and an "add element" method that adds a new row every time a button is clicked. This way, I want to bind the user-entered values and se ...

angulartypescriptangular-materialangular-material-table

Ways to trigger the keyup function on a textbox for each dynamically generated form in Angular8

When dynamically generating a form, I bind the calculateBCT function to a textbox like this: <input matInput type="text" (keyup)="calculateBCT($event)" formControlName="avgBCT">, and display the result in another textbox ...

javascriptangularangularjstypescriptangular8

Angular - Navigate to Login Page post registration and display a confirmation message

As a newcomer to Angular, I am currently working on an Angular and Spring Boot application. So far, I have created components for user login and registration along with validation features. Now, my goal is to redirect the user to the login page upon succes ...

javascriptangulartypescript

The method JSON.stringify is not properly converting the entire object to a string

JSON.stringify(this.workout) is not properly stringifying the entire object. The workout variable is an instance of the Workout class, defined as follows: export class Workout { id: string; name: string; exercises: Exercise[]; routine: Ro ...

javascriptjsontypescriptstringify

The TS2583 error in TypeScript occurs when it cannot locate the name 'Set' within the code

Just started my Typescript journey today and encountered 11 errors when running tsc app.ts. Decided to tackle them one by one, starting with the first. I tried updating tsconfig.json but it seems like the issue lies within node_modules directory. Any help ...

javascriptnode.jstypescript

Writing Data to Google Cloud Firestore Map using NextJS and Typescript with nested objects

I could use some assistance. I'm developing an application using NextJS (React), TypeScript, and Google Cloud Firestore. Everything seems to be working fine so far. However, I'm facing an issue with storing the address and phone number in a neste ...

reactjstypescriptgoogle-cloud-firestorenext.jsnested

In the world of web development, utilizing HTTP GET

Creating a website using angular 4, express, and mongo for the first time has been quite challenging. I am struggling with implementing get requests properly to fetch data from the server. I realized that these requests are used for retrieving information ...

angularexpress

Allowing Angular2 Components and their Sub Components to access a shared instance of ngModel within a service

Currently, I have been working on constructing a complex view that requires multiple functionalities. To ensure proper organization, I have divided it into various custom components. I don't want to go into great detail, but I have managed to make it ...

javascriptangularangular-ngmodel

Resolving the Angular5 (Angular Universal) problem with page source visibility

Currently tackling a server-side rendering project, inspired by the Angular Universal guide. Everything seems to be on track, but I'm facing an issue where even when navigating to different routes, the source code for the initial page is displayed whe ...

javascriptangularangular-universal

While working on a project that involves TypeScript, Material-UI, and Formik, I encountered an error that originated from

I recently downloaded a project from the following site: https://codesandbox.io/s/gn692 Upon encountering some errors that I couldn't resolve on my own, I decided to download this project to see how it's implemented. Surprisingly, it runs smoothl ...

reactjstypescriptmaterial-uiformik

Executing a PHP function within a Laravel controller using Ajax

In my Laravel project, I have a Controller named Clientecontroller that is working perfectly. It contains a method called listar() which retrieves client information. public function listar(Cliente $cliente) { $clientes = DB::table('clientes' ...

phpangularajaxlaravel

Tips for designing a personalized payment page in PayPal for flexible one-time and subscription-based payments

How can I display a PayPal checkout page with custom fields such as tax and total amount when a user makes a payment for a custom amount? Can multiple fields like sales tax and total amount be added? In addition to that, our web application already has Pa ...

javascriptangularpaypalcheckoutpaypal-subscriptions

Scroll horizontally in Ionic 3 without displaying the scrollbar by implementing a button

Is there a way to implement ion scroll in such a manner that upon clicking the right arrow button, it smoothly transitions to the next element within the div section of ion content in Ionic 3 without displaying any scrollbar? I want the scrollbar to remain ...

angularionic3ion-scroll

Differentiate input elements with custom styling

I'm experiencing an issue while trying to style a specific form field in Angular 7. The style doesn't seem to be applying properly. Below is my form structure: <ul> <li> <mat-form-field *ngIf="number"> <input ma ...

javascripthtmlcssangular

Angular 2 - ERROR: The value of 'ngClassUntouched' expression has been modified after the initial check

The error message is as follows: angular2.dev.js:23597 EXCEPTION: Expression 'ngClassUntouched in myComponent@7:12' has been modified after it was checked. Previous value: 'true'. Current value: 'false' in [ngClassUntouched ...

angularangular2-forms

Utilizing the panelChange event in Angular 2 with NgbAccordion through programmatic invocation

I have a ngbAccordion with a panelChange event that is functioning well. I am curious if there is a way to programmatically call that method in the ngOnInit lifecycle hook? <ngb-accordion #regularAccordion="ngbAccordion" *ngFor="let item of cartItems; ...

angularbootstrap-accordion

The absence of a 'defaultValue' argument in Typescript React is causing an issue

I'm encountering an issue with my code. The error message states "An argument for 'defaultValue' was not provided." I am trying to set default values but unsure of what those values should be. Additionally, I am facing a couple of other err ...

reactjstypescriptreact-typescript

What is the best way to delay Angular for 5 seconds before initiating a page transition?

Just a quick inquiry - is there a way to have Angular wait for 5 seconds before redirecting to a different page? I attempted to implement this functionality within my function, but it doesn't appear to be functioning as expected: setTimeout(() => ...

javascriptangular

Combining Angular 2 expressions with jQuery功能

My code snippet is currently functional: <div class="circle" data-value="0.8"%></div> However, I encounter an issue when attempting to bind the attribute: [data-value]="result/100" An error message is displayed: Can't bind to 'da ...

angular

Believed I had a clear understanding of the situation

Within the following code snippet, I am utilizing a service (Angular) to extract text using a fileReader and implementing a promise for the asynchronous part. However, I am encountering an issue that appears to be related to scope, which is causing confusi ...

angularscopeinstance-variables