Check element has class in angular5

Question

is there any way to check an element has a class for eg in angular1

angular.element(myElement).hasClass('my-class');

How can I achieve the same in angular5

What is wrong with using Element.classList?

Victor
– Victor

2018-04-22 15:08:08 +00:00
Commented Apr 22, 2018 at 15:08 — Victor
– Victor, Commented Apr 22, 2018 at 15:08
someElement.classList.contains('foo') does it for me

testing
– testing

2019-05-13 08:21:09 +00:00
Commented May 13, 2019 at 8:21 — testing
– testing, Commented May 13, 2019 at 8:21

nonstopcoding · Accepted Answer · 2018-04-22 15:05:52Z

14

Here is an example on how to so this:

import {Component, NgModule, ViewChild, ElementRef} from '@angular/core'
import {BrowserModule} from '@angular/platform-browser'

@Component({
  selector: 'my-app',
  template: `
    <div>
      <div class="bar" #myDiv>Div with a class</div>
    </div>
  `,
})
export class App {
  @ViewChild('myDiv') myDiv: ElementRef;

  ngOnInit() {
    console.log('has class foo', this.myDiv.nativeElement.classList.contains('foo')) //false
    console.log('has class bar', this.myDiv.nativeElement.classList.contains('bar')) //true
  }
}

As you can see from the code, you annotate the element you need to reference with a #{name} and then use ViewChild() in your template to reference it. In ngOnInit, you can access the nativeElement on the ViewChild and with basic DOM querying you can find out if the class is there.

answered Apr 22, 2018 at 15:05

nonstopcoding

73911 silver badges21 bronze badges

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

1 Comment

Reuben Sivan Over a year ago

It's an old thread but for the record this.myDiv should not be used on ngOnInit(). It will be initialized on ngAfterViewInit()

Collectives™ on Stack Overflow

Check element has class in angular5

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related