Угловой ngClass и событие click для переключения класса

В Angular я хотел бы использовать ngClass и click event toggle class. Я просмотрел онлайн, но некоторые из них угловые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;        
 }

Ответы

Ответ 1

Это должно работать на вас:

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

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

Ответ 2

Вместо того, чтобы создавать функцию в файле ts, вы можете переключать переменную из самого шаблона. Затем вы можете использовать переменную для применения к этому классу определенного класса. Как so-

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

Поэтому, когда статус истинен, применяется успех класса. Когда применяется ложный класс опасности.

Это будет работать без дополнительного кода в файле ts.

Ответ 3

Angular6 с помощью renderer2 без каких-либо переменных и чистого шаблона:

шаблон:

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

в тс:

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

Можно было бы это сделать и в директиве;)

Ответ 4

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

Надеюсь, это поможет.

Ответ 5

Если вы хотите переключить текст с помощью кнопки переключения.

HTML файл, который использует загрузку:

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

TS файл:

muteStream() {
   this.status = !this.status;
}

Ответ 6

Мы также можем использовать ngClass для назначения нескольких классов CSS на основе нескольких условий, как показано ниже:

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