Active class on click

 <div class="right-plan-for-your-business-nav"> <ul> <li *ngFor="let data of allPricing; let i = index"> <button type="button" [class.active]="slideNumber == i" (click)="onSLiderSwitch(i)" >{{data?.businessSize}}</button>
 </li>
 </ul>
 </div>

 slideNumber: number = 0; onSLiderSwitch(num: number) { this.slideNumber = num; }

 li { flex: 1; button { border: 0; height: 60px; width: 100%; background-color: transparent; padding: 8px 34px; border-radius: 29px; font-family: $font-en-primary; font-size: 17px; line-height: 56px; font-weight: 500; color: $text-color; display: flex; align-items: center; justify-content: center; white-space: nowrap; &.active { background-color: $primary-color; color: $color-white; } } }