Is there any way to bind angular animation to structural directive - angular7

Question

I've created simple 'slider' structural directive in angular.
Is there any way to make it alive with animations, how can I bind some animation to my private next() and prev() functions so when the user clicks next or prev content will smoothly go aside and a new content will appear, or something in that kind.
import { Directive, TemplateRef, ViewContainerRef, Input, OnInit } from '#angular/core';
#Directive({
selector: '[_slide]'
})
export class CustomSlideDirective implements OnInit {
constructor(
private templateRef: TemplateRef<any>,
private viewContainer: ViewContainerRef
){}
private index: number = 0;
private context: any;
#Input('_slideFrom') items: any[];
ngOnInit(){
this.context = {
$implicit: this.items[this.index],
next: () => this.next(),
prev: () => this.prev(),
}
this.viewContainer.createEmbeddedView(this.templateRef,this.context)
}
private next(){
this.index++
if(this.index === this.items.length)this.index = 0
this.context.$implicit = this.items[this.index]
}
private prev(){
this.index--
if(this.index === -1)this.index = this.items.length - 1
this.context.$implicit = this.items[this.index]
}
}
Here is the link to stackblitz live demo
https://stackblitz.com/edit/angular-k4aeg4