Is there any way to bind angular animation to structural directive

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