Ndtyjky

so I'm trying to apply different animations for elements in an *ngFor loop. The simplest example would be the following:

@Component({

  selector: 'app-anims',

  templateUrl: './anims.component.html',

  styleUrls: ['./anims.component.css'],

  animations: [

    trigger('scrolledToAnimation0', [

      state('first', style({

        backgroundColor: "white"

      })),

      state('second', style({

        backgroundColor: "yellow"

      })),

      transition('first => second', [

        animate('1s')

      ]),

    ]),

    trigger('scrolledToAnimation1', [

      state('first', style({

        backgroundColor: "white"

      })),

      state('second', style({

        backgroundColor: "green"

      })),

      transition('first => second', [

        animate('0.40s')

      ]),

    ])

  ]

})



scrolledTo: boolean = false;

divElements: string = ["foo", "bar"];



  @HostListener('window:scroll', ['$event'])

    checkScroll() {

      let componentPosition = this.el.nativeElement.offsetTop0;

      let scrollPosition = window.pageYOffset;



      if (scrollPosition >= componentPosition && this.scrolledTo === false) {

        this.scrolledTo = true;

      }



    }

HTML:

<div *ngFor="div of divElements; let i = index" [@scrolledToAnimation0]="???" [@scrolledtoAnimation1]="???"></div>

I tried several approaches and none of them seem to work. Any help is appreciated - thanks in advance.

I figured it out by the way. The variable "index" (or "i" as aliased here) is accessible in the same div it's declared, and can be used to reference each of the *ngFor elements.

It's done in the following way:

<div

*ngFor="let item of Array; let i = index;"

[@animationName]="i === 0 ? 'firstAnimation' : 'secondAnimation'">

</div>

The above references the first element of the array.