How to animate on on and on holiday updates Observable values in Angular + template binding?
Plnkr:
https://plnkr.co/edit/ka6ewGPo1tgnOjRzYr3R?p=preview
I have a subscription that will change overtime:
ngOnInit(){
this.route.snapshot.data.remote.subscribe(x => {
this.obs$ = x[0];
});
}
I have a template work-post.component.html
that demonstrates these changes:
<h1>{{obs$.title}}</h1>
<p>
{{obs$.paragraph}}
</p>
Question:
When obs$
every next / new value gets, is it possible to animate the input and leave the animation of these values. Can the obs$.title obs$.paragraph
bindings have a "crossfade" for example. fade out old text, fade out in new text about change? if so how could i implement this animation inside my component and template:
component:
import { Component, ChangeDetectionStrategy, Input, OnInit } from '@angular/core';
import { Observable } from 'rxjs';
import { ActivatedRoute } from '@angular/router';
@Component({
selector: 'work-post',
templateUrl: 'work-post.component.html',
styleUrls: ['work-post.component.scss'],
})
export class WorkPostComponent implements OnInit{
public obs$;
constructor(private route: ActivatedRoute){}
ngOnInit(){
this.route.snapshot.data.remote.subscribe(x => {
this.obs$ = x[0];
});
}
}
Here's a video on what the user interface looks like.
source to share
If I understand correctly, you want to apply the X (animation) method when the value obs$
changes. So, in my opinion, you need a listener.
For this I would go for DoCheck
.
In component:
import { Component, DoCheck, ElementRef, OnInit } from '@angular/core';
export class MyClass implements OnInit, DoCheck {
ngDoCheck() {
if(this.obs$ !== 'whateverValue') {
// Apply an animation because this.obs$ changed
}
}
Documentation: https://angular.io/docs/ts/latest/api/core/index/DoCheck-class.html
Update 1:
I suggest you keep the original version this.obs$
in for example this.obs_initial
.
And inside the logic in the listener you are comparing both, if this.obs$
different from the previous value ( this.obs_initial
) means that it is this.obs$
changed and so we start the X animation.
source to share