Active class on click, inline style tag, variable set

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

  <div class="business-child-card-top">
                  <span [style.background-color]="data?.colorCode"></span>
                </div>