web-dev-qa-db-ja.com

Angular ngClassおよびクラスを切り替えるためのクリックイベント

Angularでは、ngClassを使用し、イベントをクリックしてクラスを切り替えたいと思います。私はオンラインで調べましたが、いくつかは角度1であり、明確な指示や例はありません。どんな助けも大歓迎です！

HTMLには、次のものがあります。

<div class="my_class" (click)="clickEvent($event)"  ngClass="{'active': toggle}">                
     Some content
</div>

.tsで：

 clickEvent(event){
    //Haven't really got far
    var targetEle = event.srcElement.attributes.class;        
 }
angularangular-ng-class
34
steve Kim

これはあなたのために働くはずです：

<div class="my_class" (click)="clickEvent()"  
    [ngClass]="status ? 'success' : 'danger'">                
     Some content
</div>

status: boolean = false;
clickEvent(){
    this.status = !this.status;       
}
68
Mani S

Tsファイルに関数を作成する代わりに、テンプレート自体から変数を切り替えることができます。その後、変数を使用して、特定のクラスを要素に適用できます。そのようです-

<div (click)="status=!status"  
    [ngClass]="status ? 'success' : 'danger'">                
     Some content
</div>

したがって、ステータスがtrueの場合、クラスの成功が適用されます。偽の場合、危険クラスが適用されます。

これは、tsファイルにコードを追加しなくても機能します。

32
charsi

変数とクリーンなテンプレートなしでrenderer2を使用するAngular6：

テンプレート：

<div (click)="toggleClass($event,'testClass')"></div>

ts：

toggleClass(event: any, class: string) {
  const hasClass = event.target.classList.contains(class);

  if(hasClass) {
    this.renderer.removeClass(event.target, class);
  } else {
    this.renderer.addClass(event.target, class);
  }
}

これをディレクティブに入れることもできます;）

9
FaustmannChr

ngClassはプロパティバインディングであるため、角括弧で囲む必要があります。これを試して：

<div class="my_class" (click)="clickEvent($event)"  [ngClass]="{'active': toggle}">                
     Some content
</div>

コンポーネントで：

     //define the toogle property
     private toggle : boolean = false;

    //define your method
    clickEvent(event){
       //if you just want to toggle the class; change toggle variable.
       this.toggle != this.toggle;       
    }

それが役に立てば幸いです。

7
Saurabh Tiwari

NgClassを使用して、以下のように複数の条件に基づいて複数のCSSクラスを割り当てることもできます。

<div
  [ngClass]="{
  'class-name': trueCondition,
  'other-class': !trueCondition
}"
></div>
0
MiPhyo

トグルボタンでテキストを切り替える場合。

ブートストラップを使用しているHTMLファイル：

<input class="btn" (click)="muteStream()"  type="button"
          [ngClass]="status ? 'btn-success' : 'btn-danger'" 
          [value]="status ? 'unmute' : 'mute'"/>

TSファイル：

muteStream() {
   this.status = !this.status;
}
0
Bilal Ahmad