show only the first two buttons using scss

Issue

If there are more than 2 buttons, I would like to show the first two buttons on the list.

If there are 2 buttons, I will show both of the buttons.

If there is 1 button, I will show it.

Since the if else condition is dynamic, is there a way to dynamically show only the first 2 buttons?

<div *ngFor="let item of items">
 <div class="btn-grp"> 
  <button *ngIf="condition11(item)" (click)="a()"> text11</button>
  <button *ngIf="condition2(item)" (click)="b()"> text2</button>
  <button *ngIf="condition33(item)" (click)="c()"> text33</button>
  <button *ngIf="condition4(item)" (click)="d()"> text4</button>
  <button *ngIf="condition5(item)" (click)="e()"> text5</button>
  <button *ngIf="condition6(item)" (click)="f()"> text6</button>
 </div>
</div>

My attempt which work only for 8 buttons, but what if there are 10 more buttons added in future:

scss

.btn-grp {
  button:nth-of-type(3) {
      display:hidden
  }
  button:nth-of-type(4) {
                display:hidden
  }
  button:nth-of-type(5) {
                display:hidden
  }
  button:nth-of-type(6) {
                display:hidden
  }
  button:nth-of-type(7) {
                display:hidden
  }
  button:nth-of-type(8) {
                display:hidden
  }
}

Solution

You can select the 3rd buttons and after by the n+3 syntax. (This will select all buttons in position n+3, for n starting from 0, 1, 2,..)

<An+B> Represents elements whose numeric position in a series of siblings matches the pattern An+B, for every positive integer or zero value of n, where: A is an integer step size, B is an integer offset, n is all nonnegative integers, starting from 0.

button:nth-of-type(n+3) {
  display: none;
}

<div>
  <div class="btn-grp">
    <button> text11</button>
    <button> text2</button>
    <button> text33</button>
    <button> text4</button>
    <button> text5</button>
    <button> text6</button>
  </div>
</div>

Answered By - SyndRain