Creating a transition when changing properties in angular 2/4

angular, animation, web-animations

Solution

You can use *ngFor for those use cases, even if it's just a single object.

@Component({
  selector: 'image-holder',
  template: `
    <div class="carousel-image">
      <img [src]="image" *ngFor="let image of [image]" [@slideInRight]/>
      <span>{{ text }}</span>
    </div>
  `,
  styleUrls: ['../greenscreen.scss'],
  animations: [
    trigger(
      'slideInRight',
      [
        transition(
          ':enter', [
            style({transform: 'translateX(100%)', opacity: 0}),
            animate('500ms', style({transform: 'translateX(0)', opacity: 1}))
          ]
        ),
        transition(
          ':leave', [
            style({transform: 'translateX(0)', 'opacity': 1}),
            animate('500ms', style({transform: 'translateX(-100%)', opacity: 0}))
          ]
        )
      ])
  ]
})
export class ImageHolderComponent {
  @Input()
  image: string;
  @Input()
  text: string;

}

Problem

I want to create a transition effect whenever I change the value of a property. I tried doing the following ``` @Component({ selector: 'image-holder', template: ` <div class="carousel-image"> <img src="{{ image }}" [@slideInRight]="slide" /> <span>{{ text }}</span> </div> `, styleUrls: ['../greenscreen.scss'], animations: [ trigger( 'slideInRight', [ transition( ':enter', [ style({transform: 'translateX(100%)', opacity: 0}), animate('500ms', style({transform: 'translateX(0)', opacity: 1})) ] ), transition( ':leave', [ style({transform: 'translateX(0)', 'opacity': 1}), animate('500ms', style({transform: 'translateX(100%)',opacity: 0})) ] ) ]) ] }) export class ImageHolderComponent implements OnChanges { @Input() image: string; @Input() text: string; public slide: boolean = true; public ngOnChanges(changes: { [propKey: string]: SimpleChange }){ this.slide = !this.slide; } } ``` What I assumed was changing the property would trigger the component to start the animation effect again but that doesn't work as expected

Original source