Creating a transition when changing properties in angular 2/4

Question

I want to create a transition effect whenever I change the value of a property.

I tried doing the following

    @Component({   
    selector: \'ima         


        

Answer 1

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

@Component({
  selector: 'image-holder',
  template: `
    

      
      {{ text }}
    
  `,
  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;

}