[解決済み] angular5で要素がクラスを持っていることを確認する

質問

ある要素がクラスを持っていることを確認する方法はありますか？

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

angular5で同じことを実現するには？

どのように解決するのですか？

ここでは、その方法を例として紹介します。

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

コードからわかるように、参照したい要素に#{name}のアノテーションをつけ、テンプレート内でViewChild()を使って参照するようになっています。ngOnInit では、ViewChild 上の nativeElement にアクセスでき、基本的な DOM クエリでクラスがそこにあるかどうかを見つけることができます。