How to add n-th child class using *ngFor with ionic,angular2

Ionic Framework ionic-v3
1

I have an array for product. I am displaying product with grid view.

Here is my code

<ion-row *ngFor="let i of rows" #myElem>
        <ion-col class="productlist" col-6 *ngFor="let p of product | slice:(i*2):(i+1)*2" (click)="nav(p.details.id)" > 
            <div class="product-image">
                <img src="{{p.details.P_IMAGES[0].URL}}" alt="Product 1">
            </div>

            <div class="product-blk">   
                <div class="product-title">{{p.details.P_TITLE}}</div>
                <div class="product-price">
                    <img src="./assets/images/rupee-yellow.svg" alt="Rupee">{{p.details.PRICE_SALE}}
                    <span>{{p.details.PRICE_REGULAR}}</span>
                </div>
                <div class="product-desc">
                    {{p.Desc}}
                </div>
            </div>
        </ion-col>
    </ion-row>

Here is my css.

 .productlist
                {
                     animation: FadeIn 1s linear;
                     animation-fill-mode: both;
                     animation-delay: .5s
                }

@keyframes FadeIn { 
  0% {
    opacity: 0;
    transform: scale(.1);
  }

  85% {
    opacity: 1;
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

It works perfect. I need to set animation delay on each grid. I need custom CSS class like this

.productlist:nth-child(1),.productlist:nth-child(2),..

So i tried for loop in scss:

@for $i from 1 through 4 {
.productlist:nth-child(#{$i}){
animation-delay: $i * 1000;
}
}

But it’s not work.
How can i do this?

Kindly advice me,

Thanks.