Element have className property.  This property contains all classes separated  by space.
Source Code      DEMO

Markup

Observe below button. This button is having 3 classes btn, btn1, btn2. On click of this button we will show all classes of this button
<button class="btn btn1 btn2" (click)="getClassList($event)">
   Get Class List
</button>

Script - app.component.ts

Observe getClassList function which list down all classes of the element
import { Component } from '@angular/core';
@Component({
  selector: 'my-app',
  template: `
  <h2>Set Class List Of Element</h2>
  <div>
    <button class="btn btn1 btn2" (click)="getClassList($event)">
       Get Class List
    </button>
  </div>
  <br/><br/>
  <div>
    <h3>{{classList}}</h3>
  </div>
  `
})
export class AppComponent {
  classList: string[] = [];

  getClassList($event) {
      this.classList = $event.target.className.split(/\s+/);
      for (let i = 0; i < this.classList.length; i++) {
        if (this.classList[i] === 'someClass') {
          //do something
        }
      }
  }
}

0 comments:

Blogroll

Follow this blog by Email

Popular Posts