I'm trying to get working a carousel of items (not images). It is an array of objects of a given type: IMyObject. Because I wanted to have one item displayed at a time I did not use ngFor for it. Instead, once I did fetch all the objects I would use the Observable.timer to loop through the elements:
Observable.timer(0, 4000)
.map((e) => this.myObjects[e % this.myObjects.length])
.subscribe((item) => {
this.currentMyObject= item;
});
So far so good. The HTML I have for it is:
<div *ngIf="currentMyObject">ยก
{{currentMyObject.oneOfTheProperties}}
</div>
And I can see the element changing every 4 seconds. Now I'd like to introduce an animation and this is where I get stuck. Ideally I'd like to get a fade in / out in place however I think that with the current implementation the animation simply doesn't work because there is no element change if that make sense: the div is already on the page but I don't get any change that would make the animation to trigger, am I right? I have tried different examples from the angular animation documentation (https://angular.io/guide/animations) like flyInOut or I have added a state property to see if that worked with the inactive/active animation but I couldn't get it to work.
Also I'm not sure whether I'm reinventing the wheel here or I'm making things complex. I'm using ng-carousel for an image gallery and I don't know if that could be reused here.
Any advice is much appreciated.
