CountTo Module animation doesn't work after currency pipe is added

Question

I need to have a final view like this:

The values will have a counter animation from 0 to the final value specified. And I introduced the currency pipeline in the value section for thousand's separator. But the counter animation stopped after that. It shows NaN as in the screenshot below and then the value specified comes up. I want to have the counter animation work along with the currency pipeline.

dashboard.component.html

 <div class="media-body col-8"> <span class="m-0">Ad Offers / Value</span> <h3 class="mb-0"> <span class="counter" [CountTo]="adOffersCount" [from]="0" [duration]="2">{{ adOffersCount }} </span> / <span class="counter" [CountTo]="adOffersValue | currency:'INR':'symbol':'3.0'" [from]="0" [duration]="2">{{ adOffersValue }} </span> <small> This Month</small> </h3> </div>

dashboard.component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-dashboard',
  templateUrl: './dashboard.component.html',
  styleUrls: ['./dashboard.component.scss']
})
export class DashboardComponent implements OnInit {

  adOffersCount= 10;  
  adOffersValue =6650;
  ngOnInit(){

  }
}

Answer 1

Well, if you have a look at the first line of what the currency pipe does => https://angular.io/api/common/CurrencyPipe it will tell you that it transforms a number to a currency string, formatted according to locale rules that determine group sizing and separator. And now you are assigning a specific string to your Count instead of a number. And why would you want to put a currency pipe there. It needs to be inside the extrapolation brackets.

    <span class="counter" [CountTo]="adOffersValue" [from]="0" [duration]="2">{{ adOffersValue | currency:'INR':'symbol':'3.0'}}

demo