javascript – Angular computer animation does not function if I alter the variable state via setInterval

I wish to make a computer animation transforming the opacity of 3 arrowheads (I desire the individual to glide down on my internet), so If i desire this to take place instantly as well as consistently considering that the internet lots I utilize a setInterval inside ngOnInit. This approach transforms the variable state effectively, yet also if the variable state adjustments, the computer animation just functions if i utilize an occasion like (click)=” showArrows” rather than setInterval.

 @Component( {
selector: 'app-photo-and-name',.
templateUrl: './ photo-and-name. component.html',.
styleUrls: ['./photo-and-name.component.css'],.
computer animations: [
    trigger('animateArrows', [
      state('inactive', style({
        opacity: '1'
      })),
      state('active', style({
        opacity: '0.5',
      })),
      transition('inactive => active', animate('400ms ease-in')),
      transition('active => inactive', animate('400ms ease-in'))
    ]).
]} ).
export course PhotoAndNameComponent carries out OnInit {
arrowsState: string='non-active';.
period: any type of;.

producer() {}

ngOnInit(): gap {
this.interval = setInterval( this.showArrows, 2000);.
}

showArrows() {
this.arrowsState = this.arrowsState === 'energetic'? 'non-active': 'energetic';.
console.log( this.arrowsState);.
}
}

<< div course=" arrowheads" [@animateArrows]=" arrowsState">
<> < mat-icon course=" arrowhead">> arrow_drop_down< < mat-icon course=" arrowhead">> arrow_drop_down< < mat-icon course=" arrowhead">> arrow_drop_down< .

Why it does not function utilizing setInterval or what should i do? Many Thanks