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?

Answer 1

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
}

Answer 2

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