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!

[DwieDima]

Here's a standalone / signal alternative for version "0.5.5"

.ts

import { isPlatformServer } from '@angular/common';
import {
  ChangeDetectionStrategy,
  Component,
  computed,
  CUSTOM_ELEMENTS_SCHEMA,
  inject,
  input,
  output,
  PLATFORM_ID,
} from '@angular/core';
import NumberFlowLite, {
  Format,
  formatToData,
  renderInnerHTML,
  type Data,
  type Value,
} from 'number-flow';


@Component({
  selector: 'app-number-flow',
  standalone: true,
  templateUrl: './number-flow.component.html',
  styleUrl: './number-flow.component.scss',
  changeDetection: ChangeDetectionStrategy.OnPush,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class NumberFlowComponent {
  public locales = input<string | string[]>();
  public format = input<Format>();
  public value = input.required<Value>();
  public prefix = input<string>();
  public suffix = input<string>();
  public willChange = input<boolean>(false);
  public transformTiming = input(NumberFlowLite.defaultProps.transformTiming);
  public spinTiming = input(NumberFlowLite.defaultProps.spinTiming);
  public opacityTiming = input(NumberFlowLite.defaultProps.opacityTiming);
  public animated = input(NumberFlowLite.defaultProps.animated);
  public respectMotionPreference = input(NumberFlowLite.defaultProps.respectMotionPreference);
  public trend = input(NumberFlowLite.defaultProps.trend);
  public digits = input(NumberFlowLite.defaultProps.digits);
  public plugins = input(NumberFlowLite.defaultProps.plugins);

  public animationsstart = output();
  public animationsfinish = output();

  public formatter = computed(
    () => new Intl.NumberFormat(this.locales(), this.format()),
  );
  public data = computed<Data>(() =>
    formatToData(this.value(), this.formatter(), this.prefix(), this.suffix()),
  );
  public innerHtml = computed(() =>
    renderInnerHTML(this.value(), {
      locales: this.locales(),
      format: this.format(),
      numberPrefix: this.prefix(),
      numberSuffix: this.suffix(),
    }),
  );
  public isBrowser = isPlatformServer(inject(PLATFORM_ID));
}

.html

<number-flow
  [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()"
  [plugins]="plugins()"
  [digits]="digits()"
  [data]="data()"
>
  @if (isBrowser) {
    <span [innerHTML]="innerHtml()"></span>
  }
</number-flow>

.scss

:host {
  --number-flow-char-height: var(--number-flow-char-height, 1em);
  --number-flow-mask-height: var(--number-flow-mask-height, 0.25em);
  --number-flow-mask-width: var(--number-flow-mask-width, 0.5em);
  font-variant-numeric: tabular-nums;
}

number-flow {
  all: inherit;
}