angular2 template div on click check if element has class

Question

I currently have some logic that I would like to simplify if possible using only the html template on (click)

I have a collapsible div that when clicked, becomes "active"

currently my div is:

<div class="collapsible-header blue darken-2" (click)="getDataForTable($event)">

I am then checking for the list of classes on the element

function getDataForTable($event: any){
  let classList = $event.target.classList;

  if(classList.contains("active")){
  //do nothing div is closing
  } else {
  //get data for table since we are opening the div to show the body
  }
}

I want this (click) action only to fire if the class is not "active" (meaning don't fire when clicked as "active");

how can I do this with template syntax only?

So what is the problem? Did you try to add class active in else-branch? — dfsq
– dfsq, Commented May 22, 2016 at 19:03
it works, but I want to know if I can have the logic on the template only so that the (click) event will only fire if its not currently "active" rather than the function firing every click and me checking the event to see if it is active or not — user2950720
– user2950720, Commented May 22, 2016 at 19:05

dfsq · Accepted Answer · 2016-05-22 19:16:15Z

18

You should be able to do it like this:

<div class="collapsible-header blue darken-2" 
     (click)="$event.target.classList.contains('active') || getDataForTable($event)">

And then in the function you would just need to add class:

function getDataForTable($event: any) {
  $event.target.classList.add('active');
  // get data for table since we are opening the div to show the body
}

edited May 22, 2016 at 19:16

answered May 22, 2016 at 19:10

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Comments

Günter Zöchbauer · Accepted Answer · 2017-07-25 08:08:45Z

16

<div #mydiv 
    class="collapsible-header blue darken-2"    
    (click)="mydiv.classList.contains('xxx') ? getDataForTable($event) : null">

edited Jul 25, 2017 at 8:08

answered May 22, 2016 at 19:11

Günter Zöchbauer

661k235 gold badges2.1k silver badges1.6k bronze badges

Collectives™ on Stack Overflow

angular2 template div on click check if element has class

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related