javascript - How to change click function based on button class in Angular - Stack Overflow

admin管理员组

文章数量:1357276

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: './appponent.html',
  styleUrls: ['./appponent.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');    
   }
 }
}

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.ponent.html',
  styleUrls: ['./app.ponent.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');    
   }
 }
}

• javascript
• angular

Share Improve this question Follow edited Nov 27, 2019 at 17:56 Adrita Sharma 22.2k1010 gold badges7575 silver badges8585 bronze badges asked Nov 27, 2019 at 14:03 SoleSole 3,3581818 gold badges7171 silver badges134134 bronze badges 2

• So whats the problem? – Tobias Kaufmann Commented Nov 27, 2019 at 14:11
• Why don't you just use the status flag like you already are? – Pedro Estrada Commented Nov 27, 2019 at 14:12

Add a ment  | 

4 Answers 4

Sorted by: Reset to default 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');    
    }
  }

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");
    }
  }

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>

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';
}

本文标签： javascriptHow to change click function based on button class in AngularStack Overflow