Angular smartcounter example

[Johan]

I'm tring to implement the smartcounter in Angular 2.

But I'm facing a problem with the timer:
https://stackoverflow.com/questions/46257077/why-rsjx-switchmap-could-not-return-timer0-20
Can you help me?

[Brian Troncone]

Hello,

You need to import the static timer function, import { timer } from 'rxjs/observable/timer'. Good luck!

[Johan]

Thanks a lot!

One question: how do I emit new numbers to _counterSub$, can you make a little example?

[Brian Troncone]

No problem!

This is based on the input to the component. For example:

<number-tracker [end]="someNumber"></number-tracker>

As the someNumber input variable changes the counter will be updated appropriately.

Hope this helps!

[Johan]

Thanks, you rock!
I want to implement this counter in a complexer sitiation. Can I email you in private do hope you can advise me :)

[Brian Troncone]

Sure, it may be best to keep the conversation here though. That will let us reference this discussion in the future if anyone else runs into a similar situation. 👍

[Johan]

Sure, I'll try to describe the situation as good as possible :)

Current situation:
I have a (Ionic 3 Angular 4 App) which show the user his Facebook pages with the amount of likes. The likes are updateing real-time with Firebase and looks like:

The likes are updating real time, which is great. But it is not good enough. I want the numbers changes to be animated. So I found the smartcounter in this repro doing what I needed.
Thanks to btroncone, I could make a simple counter into my app:

I have also implemented a search function right now:

To summarize:

• I list the user Facebook pages (including the likes) realtime
• It's possible to search

But now the next step I want to make, is to animate the numberchange of the Facebook pages (increasing or decreasing.

The technic:
the facebook-likes.html

  <ion-card *ngFor="let facebookPage of facebookPages; let i = index;" 
            (click)="goToFacebookpage(i, facebookPage.id)">
    <ion-item>
      <ion-avatar item-start class="avatar">
        <img [src]="facebookPage.picture.data.url" style="margin-right: 5px;">
      </ion-avatar>
      <span class="text">
        <h3>{{ facebookPage.name }}</h3>
        <p class="countNumber">{{ facebookPage.fan_count | number : fractionSize }}</p>
        <img *ngIf="facebookPage.is_verified" src="assets/img/facebookVerifiedAccountLogo.png" class="facebookVerifiedIcon" />      
      </span>
    </ion-item>
  </ion-card>

The facebook-likes.ts:
Declaration:

  private facebookPages;
  private facebookPagesSubscription: Subscription;
  private searchStartAt = new Subject();
  private searchEndAt = new Subject();

The functions:

    this.facebookPagesSubscription = 
      this.fbServiceProvider.getItemsListWithFilter(this.searchStartAt, this.searchEndAt)
                            // .scan((acc, curr) => {
                            //   console.log('Scan: ', acc, curr)
                            // })
                            .distinctUntilChanged() // ensures we only pay attention when the server’s response is different than it was last time
                            .subscribe(fbPages => {
                              //console.log('fbPages: ', fbPages)
                              if (!fbPages.length) {
                                this.facebookPagesSearchResult = true
                              } else {
                                this.facebookPagesSearchResult = false
                                //this.loader.hide()
                              }
                              this.facebookPages = fbPages
                            })
    this.subscribeFirebaseSearch()

and:

  subscribeFirebaseSearch(){
    this.searchStartAt.next('')
    this.searchEndAt.next('\uf8ff')
  }

The firebase-services.ts:

  getItemsListWithFilter(start, end): FirebaseListObservable<any> {
    return this.afDB.list(this.fbPathPages, {
      query: {
        orderByChild: 'nameLowercase',
        startAt: start,
        endAt: end
      }
    });
  }

Thing I don't get around is:

• The example is a number animation with one imput, I have 0 to N
• I have a complete object with the Facebook-pages, so not only the numbers

Can you give me advice of setup a simple example so I can try it?
I thought I understood RxJS, but know I don't know :)
N.B.: I can share my sources, but only to who can help me because it is private...

Many thanks for helping me!

[Brian Troncone]

Just for clarification, you want the count under each list item to be animated?

[Johan]

Yes, thats true :)

[Johan]

Do you think it is possible?

[Brian Troncone]

Yes, if I'm understanding correctly you could just swap out:

{{ facebookPage.fan_count | number : fractionSize }}

with:

<number-tracker [end]="facebookPage.fan_count | number : fractionSize"></number-tracker>

on each line.

Hope this helps!

[Johan]

Wouw, thats simple:

Thanks!
The only thing is that only the first facebookPage.fan_count is counting. Does the component need an extra input/variable so it can run multiple times?

[Johan]

Found it: "number : fractionSize" couldn't pass...

One step further :)

Now facing two problems:

1. On every update he restarts with 0, but this is meanly because:
2. Het counts to slow :( I set the timer to:
   return timer(0, 0)

[Brian Troncone]

You could do some work in the @Input to start at half of the max value, or similar.