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

Question

В Angular я хотел бы использовать ngClass и событие click для переключения класса. Я просмотрел онлайн, но некоторые из них angular1, и нет четких инструкций или примеров. Любая помощь будет высоко ценится!

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

Answer 1

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

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

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

Answer 2

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

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

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

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

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

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

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

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

Answer 5

Если вы ищете только HTML-способ сделать это в angular...

      <div #myDiv class="my_class" (click)="myDiv.classList.toggle('active')">
  Some content
</div>

Важный момент - это #myDiv часть.

Это ссылка на узел HTML, поэтому вы можете использовать эту переменную, как если бы она была назначена document.querySelector('.my_class')

ПРИМЕЧАНИЕ: эта переменная зависит от области видимости, поэтому вы можете использовать ее в *ngFor заявления

Answer 6

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

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

Answer 7

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

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

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

TS файл:

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

Answer 8

       You can try this.  


Html.
<button *ngFor="let color of colors; let index=index" class="example1" 
    (click)="selectColor(index)" [class.choose__color]="viewMode == index">
    <mat-icon>fiber_manual_record</mat-icon>
</button>


css.
.example1:hover {
    border-bottom: 2px solid black;
}

.choose__color {
    border-bottom: 2px solid black;
 }



 ts.
 selectColor(index: any) {
   this.viewMode = index;
 }

Answer 9

Поэтому обычно вы должны создать резервную переменную в классе, переключить ее щелчком и привязать привязку класса к переменной. Что-то типа:

@Component(
    selector:'foo',
    template:`<a (click)="onClick()"
                         [class.selected]="wasClicked">Link</a>
    `)
export class MyComponent {
    wasClicked = false;

    onClick() {
        this.wasClicked= !this.wasClicked;
    }
}