Easy way to animate change of bound values

🚀 feature request

In my application I have some text. When the text changes, I want to fly out the old text and fade in the new text.

Relevant Package

This should probably be implemented in @angular/animations?

Description

In order to implement the solution at the moment, I see two alternatives:

1. Work with two internal properties (oldValue, newValue) and overlay two divs in order to animate them.
2. Trigger first animation in code, implement a animation done callback. When the callback is executed, change value and trigger the second animation.

Both solutions seem to be quite complex for such a simple task. I wish I could define an animation for before changing the value and after change.

Describe the solution you’d like

This could look like:

@Component({
  selector: 'my-comp',
  template: '<div [@myTrigger]=myText>{{myText}}</div>',
  animations: [
    trigger('oldContent', [
      transition(':before', [
        animate('0.5s ease-in', style({
          opacity: 0.0,
        }))
      ]),
      transition(':after', [
        animate('0.5s ease-in', style({
          opacity: 1.0,
        }))
      ])
    ])
  ]
})
export class MyComponent{
}

[andrui]

@eosgortor You may use ‘void <=> *’ transition along with custom strucural directive which recreates view when data is changed. Here is example https://stackblitz.com/edit/angular-5vng7d

[ghost]

This is a great third possibility, but still quite complex for the task. I will keep the feature request open.

Thank you