Angular Support

[ScarVite]

Any Plans on bringing this to Angular?

[barvian]

Hi 👋, unfortunately I have zero experience with Angular so I'm not confident in taking on an Angular version right now. I'll leave this open as a discussion though in case someone else is interested in collaborating 👍

[mwright112]

Would be interested in an Angular wrapper too. Great lib - really impressive.

[franklin7301]

The author has already implemented this as a Web Component. Angular developers can consider using the Web Component directly. Here's an example for reference:

npm i number-flow

number-flow-angular.component.ts

import { CommonModule } from '@angular/common';
import { Component, Input, Output, EventEmitter, Inject, PLATFORM_ID, SimpleChanges, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import { NumberFlowLite, define, type Data, type Value, type Format, renderInnerHTML, formatToData, type Props as NumberFlowProps } from 'number-flow';
import { BehaviorSubject } from 'rxjs';
import { isPlatformServer } from '@angular/common';

define('number-flow-angular-ui', NumberFlowLite);

@Component({
  selector: 'number-flow-angular',
  imports: [CommonModule],
  template: `<number-flow-angular-ui
  #numberFlowElement
  [attr.aria-label]="data.valueAsString"
  role="img"
  [attr.data-will-change]="willChange ? '' : undefined"
  (animationsstart)="animationsstart.emit()"
  (animationsfinish)="animationsfinish.emit()"
  [transformTiming]="transformTiming"
  [spinTiming]="spinTiming"
  [opacityTiming]="opacityTiming"
  [animated]="animated"
  [respectMotionPreference]="respectMotionPreference"
  [trend]="trend"
  [continuous]="continuous"
  [digits]="digits"
  [data]="data"
>
  <ng-container *ngIf="isBrowser" >
    <span [innerHTML]="renderInnerHTML(data)"></span>
  </ng-container>
</number-flow-angular-ui>`,
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class NumberFlowAngularComponent {

  @Input() locales: Intl.LocalesArgument | undefined;
  @Input() format: Format | undefined;
  @Input() value!: Value;
  @Input() prefix: string | undefined;
  @Input() suffix: string | undefined;
  @Input() willChange = false;
  @Input() transformTiming = NumberFlowLite.defaultProps.transformTiming;
  @Input() spinTiming = NumberFlowLite.defaultProps.spinTiming;
  @Input() opacityTiming = NumberFlowLite.defaultProps.opacityTiming;
  @Input() animated = NumberFlowLite.defaultProps.animated;
  @Input() respectMotionPreference = NumberFlowLite.defaultProps.respectMotionPreference;
  @Input() trend = NumberFlowLite.defaultProps.trend;
  @Input() continuous = NumberFlowLite.defaultProps.continuous;
  @Input() digits = NumberFlowLite.defaultProps.digits;
  @Input() el: NumberFlowLite | undefined;

  @Output() animationsstart = new EventEmitter<void>();
  @Output() animationsfinish = new EventEmitter<void>();

  formatter!: Intl.NumberFormat;
  data!: Data;
  elStore = new BehaviorSubject<NumberFlowLite | undefined>(this!.el);
  renderInnerHTML: any;
  isBrowser = false;
  constructor(@Inject(PLATFORM_ID) private platformId: Object) {
    this.renderInnerHTML = renderInnerHTML;
    this.isBrowser = isPlatformServer(this.platformId);
  }

  ngOnInit(): void {
    this.updateFormatter();
    this.updateData();
  }

  ngOnChanges(changes: SimpleChanges): void {

    if (changes['locales'] || changes['format']) {
      this.updateFormatter();
    }

    if (this.value === undefined || !this.formatter) {
      return;
    }
    if (changes['value'] || changes['prefix'] || changes['suffix']) {
      this.updateData();
    }
  }

  private updateFormatter(): void {
    this.formatter = new Intl.NumberFormat(this.locales, this.format);
  }

  private updateData(): void {
    this.data = formatToData(this.value, this.formatter, this.prefix, this.suffix);
  }
}

[barvian]

I'm not an Angular dev but this looks good to me! Thanks a lot for posting!