3

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 showcases these changes:

  <h1>{{obs$.title}}</h1>
  <p>
    {{obs$.paragraph}}
  </p>

Question:

When obs$ gets each next/new value, Is it possible to animate the enter and leave animations of these values. Can obs$.title obs$.paragraph bindings have a "crossfade" e.g. fade out old text, fade in the new text on change? if so, how could I implement this animation inside of 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 of how the UI currently looks.

Armeen Moon
  • 18,061
  • 35
  • 120
  • 233

1 Answers1

0

If I understood well, you want to apply X method (animations) when your obs$ changes value. 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 that you store an initial version of this.obs$ in, for example, this.obs_initial.

And inside the logic in the listener you compare both, if this.obs$ is different from its previous value (this.obs_initial) then means that this.obs$ changed and therefore we trigger X animation.

SrAxi
  • 19,787
  • 11
  • 46
  • 65
  • Is there any way to do this declaratively and Using the @angular/animation library? – Armeen Moon May 04 '17 at 15:53
  • You could create a method for each *animation* that you know you will trigger when eventually `this.obs$` changes its value. And that you can do it with `@angular/animation`. And then using `DoCheck` you constantly listen and as soon as you detect that `this.obs$` changes you trigger the method that you created that contains the library's animation or animations. – SrAxi May 04 '17 at 15:56
  • If I was to wrap the content into their own component and @Input the data in to component. Use that Input to trigger to animate, would that be a better approach? – Armeen Moon May 04 '17 at 15:59
  • Then you could use shared service to communicate constantly between main component and the rest of small components and still use the listener to detect changes in the small components, no? – SrAxi May 04 '17 at 19:16
  • Let me know what you decide, tomorrow at the office I will have another look! ;) – SrAxi May 04 '17 at 19:16