Angular Animation Carousel

I have converted the following carousel from React to Angular but not able to achieve an animation effect for the same. Can you give me a solution? Can not achieve look and feel with angular animation.

Link for the carousel - https://codepen.io/andyNroses/pen/KaENLb

@component({
selector:'image-slider',
templateUrl:'image-slider.html',
animation:[{
trigger('slideInOut',[
transition(':enter',[
style({transform:'translateX(-100%)', opacity:1}),
animate'600ms ease-in', style({transform:'translateX(0%)', opacity:0}))
]),
transition(':leave',[
style({transform:'translateX(0%)', opacity:1}),
animate'600ms ease-out', style({transform:'translateX(100%)', opacity:1}))
])
])
}]


})

<div class="sliderContainer">
<button (click)="prev()">prev<button>
<button (click)="next()">next<button>
<ul>
<li class="slide" @slideInOut><li>
<li class="slide" @slideInOut><li>
<li class="slide" @slideInOut><li>
</ul>

Continue reading...