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