How to change click function based on button class in Angular

Question

In Angular I have a button which toggles a class - What I want to do is add events based on the button class. Should this be done via an If statement within a function? So far my code is below:

HTML button

<!-- toggle button --> 
<button type="button" class="btn btn-primary mt-3 ml-3 btn-button" (click)="status=!status; func()" [ngClass]="{'btn-danger' : status, 'btn-primary' : !status}"  [disabled]="clicked">{{status ? 'Delete' : 'Add'}}</button>
<!-- toggle button -->

Component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent {

public btn: any;

func () {
   if (this.btn.hasClass('btn-primary')) {
      alert('Primary clicked');    
   } else if (this.btn.hasClass('btn-danger')) {
     alert('Danger clicked');    
   }
 }
}

Why don't you just use the status flag like you already are? — Pedro Estrada
– Pedro Estrada, Commented Nov 27, 2019 at 14:12

Saurabh Yadav · Accepted Answer · 2019-11-27 14:22:48Z

3

You can look this demo may this helps you

You can change class on basics of action property;

<button (click)="onClick()" [ngClass]="action =='Add' ? 'btn-primary': 'btn-danger'"> {{action}}</button>

On button click

 onClick() {
    if(this.action == 'Add') {
      this.action = 'Delete';
      alert('Primary Clicked');
    } else {
      this.action = 'Add';
        alert('Danger clicked');    
    }
  }

answered Nov 27, 2019 at 14:22

Saurabh Yadav

3,3861 gold badge12 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Adrita Sharma · Accepted Answer · 2019-11-27 14:14:53Z

3

Instead of the class name, you can check the status value.

Try like this:

Working Demo

.html

(click)="func()"

.ts

  func() {
    this.status = !this.status;
    if (this.status) {
      alert("Primary clicked");
    } else if (!this.status) {
      alert("Danger clicked");
    }
  }

edited Nov 27, 2019 at 14:14

answered Nov 27, 2019 at 14:12

Adrita Sharma

22.3k11 gold badges75 silver badges85 bronze badges

3 Comments

Jacopo Sciampi Over a year ago

I didn't downvote but is not explanatory and the else if statement could have been written in a single line (or similar, the else if is totally useless).

sabithpocker Over a year ago

May be check the condition before changing the value of status or it will check for new value.

Sole Over a year ago

But that is doing it from a separate click function?

Charly · Accepted Answer · 2019-11-27 14:16:53Z

1

You can use viewchild and ElementRef with a Hostlistener for click event, it would be something like this:

export class AppComponent {

@ViewChild('yourButton') deleteAddButton:ElementRef;
func (class) {
   if (deleteAddButton.nativeElement.classList.contains(class)) {
      alert('Primary clicked');    
   } else () {
     alert('Danger clicked');    
   }
 }
@HostListener('click', ['$event'])
clickHandler(event) {
  if(deleteAddButton.nativeElement.classList.contains('btn-primary')) {
    this.func('btn-primary');
  }
} 
}

In html:

<button #deleteAddButton ...</button>

answered Nov 27, 2019 at 14:16

Charly

16614 bronze badges

1 Comment

JDunken Over a year ago

FYI, you can pass the $event object into the (click) handler: (click)="muhClickHandler($event"), you then have all sorts of info on the event in the .ts file of the component.

Layera · Accepted Answer · 2019-11-27 14:31:07Z

1

How about:

<button id="myBtn" type="button" class="btn btn-primary" (click)="func()">{{buttontext}}</button>

TS

buttontext: string = 'ADD';
func () {
    let element = document.getElementById("myBtn");
    element.classList.toggle("btn-danger");
    element.classList.toggle("btn-primary");
    this.buttontext = this.buttontext === 'ADD' ? 'DELETE' : 'ADD';
}

edited Nov 27, 2019 at 14:31

answered Nov 27, 2019 at 14:16

Layera

2341 silver badge4 bronze badges

Collectives™ on Stack Overflow

How to change click function based on button class in Angular

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related