То, что вы хотите, может быть достигнуто без анимации, вам нужна только старая старая двусторонняя привязка данных и интервал от rxjs. Я пошел вперед и создал простой проект angular-cli в stackblitz, идите и посмотрите рабочий пример.
https://stackblitz.com/edit/stackoverflow-51222243
import { Component, OnInit, OnDestroy } from '@angular/core';
import { Subject, interval } from 'rxjs';
import { takeUntil } from 'rxjs/operators';
@Component({
selector: 'my-app',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit, OnDestroy {
fruit: string;
fruitList: Array<string> = ['apple', 'orange', 'banana'];
ngUnsubscribe: Subject<any> = new Subject();
constructor() { }
ngOnInit() {
// init the first fruit
this.fruit = this.fruitList[0];
// create an interval that is going to fire every 5s
interval(5000)
// unsubscribe from interval when the component is destroyed, averting any memory leak
.pipe(takeUntil(this.ngUnsubscribe))
// subscribe to interval
.subscribe(() => {
// find the current fruit index in the list
const fruitIndex = this.fruitList.findIndex((fruit: string) => fruit === this.fruit);
// get the next fruit from the list
const nextFruit = this.fruitList[fruitIndex + 1];
// if next fruit is defined set displayed fruit with it
// else if next fruit is undefined that means you reached the end of the list
// so set the displayed fruit with the first list item
this.fruit = nextFruit ? nextFruit : this.fruitList[0];
});
}
ngOnDestroy() {
this.ngUnsubscribe.next();
this.ngUnsubscribe.complete();
}
}