Binding click event with multiple css style in Angular-CodePudding

How do I bind multiple css class to the click event of Submit button in Angular? On the button submit , the style is suppose to change.

HTML

<div  [ngClass]="getStyle">
    <button (click)="getStyle= !getStyle">Submit</button>
</div>

TypeScript

export class AppComponent {
  style1: boolean = true;
  style2: boolean = true;
}

getStyle()

CodePudding user response：

You can define two different state objects :

export class AppComponent {
  baseState = {
    style1: true,
    style2: true
  }
  activeState = {
    style1: false,
    style2: false
  }
  active = false;
}

HTML

<div  [ngClass]="active ? activeState : baseState">
  <button (click)="active = !active">Submit</button>
</div>

CodePudding user response：

I suppose you want to apply a different style if getStyle is true or false.

You can do it like this:

<div  [ngClass]="{'class_1': getStyle, 'class_2': !getStyle}">
  <button (click)="getStyle = !getStyle">Submit</button>
</div>