### Install ngx-countup via npm

Source: https://context7.com/inorganik/ngx-countup/llms.txt

Install the ngx-countup package using npm for Angular 21+ projects. The installation process also automatically handles dependencies like `countup.js` and core Angular modules.

```bash
# Install the package
npm install ngx-countup

# Dependencies (automatically installed)
# - countup.js ^2.9.0
# - @angular/common ^21.0.0
# - @angular/core ^21.0.0

```

--------------------------------

### Deferred Animation Start with CountUpDirective

Source: https://context7.com/inorganik/ngx-countup/llms.txt

Delay the animation start by initially setting the endVal to undefined, then assigning it when ready. This is useful for scenarios where the final value depends on asynchronous data loading. The animation automatically begins once the salesData is assigned.

```typescript
import { Component, OnInit } from '@angular/core';
import { CountUpDirective } from 'ngx-countup';
import { CountUpOptions } from 'countup.js';

@Component({
  selector: 'app-data-loader',
  imports: [CountUpDirective],
  template: `
    <div class="dashboard">
      @if (salesData !== undefined) {
        <h2 [countUp]="salesData" [countUpOptions]="options">0</h2>
      } @else {
        <p>Loading sales data...</p>
      }
    </div>
  `
})
export class DataLoaderComponent implements OnInit {
  salesData: number | undefined;
  options: CountUpOptions = {
    duration: 3,
    separator: ',',
    prefix: '$'
  };

  ngOnInit() {
    // Simulate API call
    this.fetchSalesData().then(data => {
      this.salesData = data;
      // Animation starts automatically when salesData is assigned
    });
  }

  async fetchSalesData(): Promise<number> {
    await new Promise(resolve => setTimeout(resolve, 2000));
    return 45678.90;
  }
}

```

--------------------------------

### Enable Scroll Spy Animation with CountUpDirective Options

Source: https://github.com/inorganik/ngx-countup/blob/master/README.md

Illustrates how to enable the scroll spy feature for the CountUpDirective. When enabled, the animation automatically starts when the element scrolls into the viewport, controlled via the `countUpOptions` input.

```html
<h1 [countUp]="myEndVal" [countUpOptions]="{ enableScrollSpy: true }">0</h1>
```

--------------------------------

### Defer CountUp Animation in Angular

Source: https://github.com/inorganik/ngx-countup/blob/master/README.md

Explains how to defer the start of the CountUp animation. This is achieved by leaving the end value property undefined initially, allowing the animation to begin only when the value is provided.

```html
<h1 [countUp]="myEndVal" [countUpOptions]="options">0</h1>
```

--------------------------------

### Complete Event Handling with CountUpDirective

Source: https://context7.com/inorganik/ngx-countup/llms.txt

Listen to the 'complete' output event to execute logic when the animation finishes. This allows for triggering subsequent actions or UI updates after the count-up animation concludes. The example shows how to log a message and update a UI state.

```typescript
import { Component } from '@angular/core';
import { CountUpDirective } from 'ngx-countup';
import { CountUpOptions } from 'countup.js';

@Component({
  selector: 'app-countdown-timer',
  imports: [CountUpDirective],
  template: `
    <div class="timer-container">
      <h1 [countUp]="countdown"
          [countUpOptions]="timerOptions"
          (complete)="onCountdownComplete()">10</h1>
      @if (showMessage) {
        <p class="message">Countdown Complete!</p>
      }
    </div>
  `
})
export class CountdownTimerComponent {
  countdown = 0;
  showMessage = false;
  timerOptions: CountUpOptions = {
    startVal: 10,
    duration: 10,
    useEasing: false
  };

  onCountdownComplete() {
    console.log('Timer finished!');
    this.showMessage = true;
    this.triggerNextAction();
  }

  triggerNextAction() {
    // Execute post-countdown logic
    console.log('Executing next action...');
  }
}

```

--------------------------------

### CountUpDirective - Basic Usage

Source: https://context7.com/inorganik/ngx-countup/llms.txt

The CountUpDirective is applied to any HTML element to animate a number from 0 (or a specified start value) to a target end value.

```APIDOC
## CountUpDirective - Basic Usage

### Description
Animates a number from a start value to an end value on an HTML element.

### Method
Directive application

### Endpoint
N/A (Directive)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { Component } from '@angular/core';
import { CountUpDirective } from 'ngx-countup';

@Component({
  selector: 'app-counter',
  imports: [CountUpDirective],
  template: `
    <h1 [countUp]="endValue">0</h1>
  `
})
export class CounterComponent {
  endValue = 1000;
}
```

### Response
#### Success Response (200)
N/A (Directive)

#### Response Example
N/A (Directive)
```

--------------------------------

### Build and Publish ngx-countup Library

Source: https://context7.com/inorganik/ngx-countup/llms.txt

Build the ngx-countup library for distribution or local testing using the provided npm scripts. This includes building the library, publishing to npm, and running the demo app locally.

```bash
# Build the library
npm run build:countup

# Output location: dist/ngx-countup/

# Publish to npm registry
cd dist/ngx-countup
npm publish

# Test locally with the demo app
npm start
# Navigate to http://localhost:4200

# Run tests
npm test -- ngx-countup

```

--------------------------------

### Customizing CountUp Animation with Options

Source: https://context7.com/inorganik/ngx-countup/llms.txt

Illustrates how to customize the animation behavior of the CountUpDirective using the `countUpOptions` input. This allows for fine-grained control over decimal places, duration, separators, and prefix/suffix text. It requires importing `CountUpOptions` from 'countup.js'.

```typescript
import { Component } from '@angular/core';
import { CountUpDirective } from 'ngx-countup';
import { CountUpOptions } from 'countup.js';

@Component({
  selector: 'app-formatted-counter',
  imports: [CountUpDirective],
  template: \
    <h2 [countUp]="price" [countUpOptions]="options">0</h2>
  ``
})
export class FormattedCounterComponent {
  price = 1234.56;
  options: CountUpOptions = {
    decimalPlaces: 2,
    duration: 3,
    separator: ',',
    decimal: '.',
    prefix: '$',
    suffix: ' USD'
  };
}
```

--------------------------------

### Import and Use CountUpDirective in Angular Component

Source: https://github.com/inorganik/ngx-countup/blob/master/README.md

Demonstrates how to import the CountUpDirective into an Angular component and make it available for use in the component's template. This is the first step to integrating the counting animation.

```typescript
import { CountUpDirective } from 'ngx-countup';

@Component({
  selector: 'app-some-component',
  imports: [
    CountUpDirective
  ],
  ...
})
```

--------------------------------

### Programmatic Re-animation Markup for CountUpDirective

Source: https://github.com/inorganik/ngx-countup/blob/master/README.md

Shows the necessary HTML markup to enable programmatic re-animation of the CountUpDirective. A template reference variable (e.g., `#countUp`) is added to the element.

```html
<h1 #countUp [countUp]="myEndVal" [countUpOptions]="myOpts">0</h1>
```

--------------------------------

### CountUpDirective - With Options

Source: https://context7.com/inorganik/ngx-countup/llms.txt

Customize the animation behavior using the countUpOptions input with CountUpOptions from countup.js.

```APIDOC
## CountUpDirective - With Options

### Description
Customizes the number animation using `CountUpOptions` for duration, decimals, separators, prefix, and suffix.

### Method
Directive application with options binding

### Endpoint
N/A (Directive)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { Component } from '@angular/core';
import { CountUpDirective } from 'ngx-countup';
import { CountUpOptions } from 'countup.js';

@Component({
  selector: 'app-formatted-counter',
  imports: [CountUpDirective],
  template: `
    <h2 [countUp]="price" [countUpOptions]="options">0</h2>
  `
})
export class FormattedCounterComponent {
  price = 1234.56;
  options: CountUpOptions = {
    decimalPlaces: 2,
    duration: 3,
    separator: ',',
    decimal: '.',
    prefix: '$',
    suffix: ' USD'
  };
}
```

### Response
#### Success Response (200)
N/A (Directive)

#### Response Example
N/A (Directive)
```

--------------------------------

### Programmatic Control of Angular CountUp Directive

Source: https://context7.com/inorganik/ngx-countup/llms.txt

Demonstrates how to gain programmatic control over the CountUpDirective using template reference variables and `@ViewChild`. This enables replaying animations, updating values, and triggering animations manually. Requires `ViewChild` and `AfterViewInit` from '@angular/core'.

```typescript
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { CountUpDirective } from 'ngx-countup';
import { CountUpOptions } from 'countup.js';

@Component({
  selector: 'app-controllable-counter',
  imports: [CountUpDirective],
  template: \
    <div>
      <h1 #counterRef [countUp]="currentValue" [countUpOptions]="options">0</h1>
      <button (click)="replayAnimation()">Replay</button>
      <button (click)="updateValue()">Update to Random</button>
    </div>
  ``
})
export class ControllableCounterComponent implements AfterViewInit {
  @ViewChild('counterRef') counter!: CountUpDirective;

  currentValue = 500;
  options: CountUpOptions = {
    duration: 2,
    useEasing: true,
    useGrouping: true
  };

  ngAfterViewInit() {
    // Optionally trigger animation on component load
    setTimeout(() => this.counter.animate(), 1000);
  }

  replayAnimation() {
    this.counter.animate();
  }

  updateValue() {
    this.currentValue = Math.floor(Math.random() * 10000);
  }
}
```

--------------------------------

### Programmatic Re-animation of CountUp Directive in Angular

Source: https://github.com/inorganik/ngx-countup/blob/master/README.md

Demonstrates how to re-animate the CountUp directive programmatically. It involves using a template reference variable and the `@ViewChild` decorator to access the directive instance and call its `animate()` method.

```typescript
  @ViewChild('countUp') countUp: CountUpDirective;

  // ...

  this.countUp.animate();

  // Remember to do this inside ngAfterViewInit() to do something on component load.
```

--------------------------------

### Basic Usage of CountUpDirective in Angular Template

Source: https://github.com/inorganik/ngx-countup/blob/master/README.md

Shows the fundamental way to apply the CountUpDirective to an HTML element, specifying the number to count up to. The directive automatically animates the number from 0 to the target value.

```html
<h1 [countUp]="345">0</h1>
```

--------------------------------

### Angular CountUp Directive with Scroll Spy

Source: https://context7.com/inorganik/ngx-countup/llms.txt

Shows how to enable the scroll spy feature for the CountUpDirective, which automatically triggers the animation when the element enters the viewport. Configuration options include `scrollSpyDelay` and `scrollSpyOnce`. Requires `CountUpOptions` from 'countup.js'.

```typescript
import { Component } from '@angular/core';
import { CountUpDirective } from 'ngx-countup';
import { CountUpOptions } from 'countup.js';

@Component({
  selector: 'app-stats-section',
  imports: [CountUpDirective],
  template: \
    <div class="stats">
      <div class="stat">
        <h3 [countUp]="users" [countUpOptions]="scrollSpyOpts">0</h3>
        <p>Total Users</p>
      </div>
      <div class="stat">
        <h3 [countUp]="downloads" [countUpOptions]="scrollSpyOpts">0</h3>
        <p>Downloads</p>
      </div>
    </div>
  ``
})
export class StatsComponent {
  users = 50000;
  downloads = 1000000;
  scrollSpyOpts: CountUpOptions = {
    enableScrollSpy: true,
    scrollSpyDelay: 200,
    scrollSpyOnce: true
  };
}
```

--------------------------------

### Basic CountUp Directive Usage in Angular

Source: https://context7.com/inorganik/ngx-countup/llms.txt

Demonstrates the fundamental implementation of the CountUpDirective in an Angular component. It applies the directive to an HTML element to animate a number from 0 to a specified end value. No external dependencies beyond Angular and ngx-countup are required.

```typescript
import { Component } from '@angular/core';
import { CountUpDirective } from 'ngx-countup';

@Component({
  selector: 'app-counter',
  imports: [CountUpDirective],
  template: \
    <h1 [countUp]="endValue">0</h1>
  ``
})
export class CounterComponent {
  endValue = 1000;
}
```

--------------------------------

### CountUpDirective - Programmatic Re-animation

Source: https://context7.com/inorganik/ngx-countup/llms.txt

Access the directive instance using template reference variables and ViewChild to trigger animations programmatically.

```APIDOC
## CountUpDirective - Programmatic Re-animation

### Description
Allows programmatic control over the animation, including replaying it or updating the target value via the directive's instance.

### Method
Directive application with template reference and ViewChild

### Endpoint
N/A (Directive)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { CountUpDirective } from 'ngx-countup';
import { CountUpOptions } from 'countup.js';

@Component({
  selector: 'app-controllable-counter',
  imports: [CountUpDirective],
  template: `
    <div>
      <h1 #counterRef [countUp]="currentValue" [countUpOptions]="options">0</h1>
      <button (click)="replayAnimation()">Replay</button>
      <button (click)="updateValue()">Update to Random</button>
    </div>
  `
})
export class ControllableCounterComponent implements AfterViewInit {
  @ViewChild('counterRef') counter!: CountUpDirective;

  currentValue = 500;
  options: CountUpOptions = {
    duration: 2,
    useEasing: true,
    useGrouping: true
  };

  ngAfterViewInit() {
    // Optionally trigger animation on component load
    setTimeout(() => this.counter.animate(), 1000);
  }

  replayAnimation() {
    this.counter.animate();
  }

  updateValue() {
    this.currentValue = Math.floor(Math.random() * 10000);
  }
}
```

### Response
#### Success Response (200)
N/A (Directive)

#### Response Example
N/A (Directive)
```

--------------------------------

### Dynamic Options Update with CountUpDirective

Source: https://context7.com/inorganik/ngx-countup/llms.txt

Update both options and the end value simultaneously to create dynamic counting experiences. This allows for changing animation speed, easing functions, or decimal places on the fly based on user interaction or application state.

```typescript
import { Component } from '@angular/core';
import { CountUpDirective } from 'ngx-countup';
import { CountUpOptions } from 'countup.js';

@Component({
  selector: 'app-dynamic-counter',
  imports: [CountUpDirective],
  template: `
    <div>
      <h1 [countUp]="currentValue" [countUpOptions]="currentOptions">0</h1>
      <button (click)="switchToFast()">Fast Animation</button>
      <button (click)="switchToSlow()">Slow Animation</button>
      <button (click)="switchToDecimal()">Decimal Mode</button>
    </div>
  `
})
export class DynamicCounterComponent {
  currentValue = 1000;
  currentOptions: CountUpOptions = {
    duration: 2,
    separator: ','
  };

  switchToFast() {
    this.currentOptions = {
      duration: 0.5,
      separator: ',',
      startVal: this.currentValue
    };
    this.currentValue = 5000;
  }

  switchToSlow() {
    this.currentOptions = {
      duration: 5,
      useEasing: true,
      easingFn: (t, b, c, d) => {
        return c * ((t = t / d - 1) * t * t + 1) + b;
      },
      startVal: this.currentValue
    };
    this.currentValue = 10000;
  }

  switchToDecimal() {
    this.currentOptions = {
      decimalPlaces: 3,
      decimal: '.',
      separator: ',',
      duration: 3,
      startVal: this.currentValue
    };
    this.currentValue = 3.14159;
  }
}

```

--------------------------------

### CountUpDirective - Scroll Spy Animation

Source: https://context7.com/inorganik/ngx-countup/llms.txt

Enable scroll spy to automatically trigger the animation when the element becomes visible in the viewport.

```APIDOC
## CountUpDirective - Scroll Spy Animation

### Description
Enables the animation to trigger automatically when the element enters the viewport, with options for delay and one-time execution.

### Method
Directive application with scroll spy options

### Endpoint
N/A (Directive)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Request Example
```typescript
import { Component } from '@angular/core';
import { CountUpDirective } from 'ngx-countup';
import { CountUpOptions } from 'countup.js';

@Component({
  selector: 'app-stats-section',
  imports: [CountUpDirective],
  template: `
    <div class="stats">
      <div class="stat">
        <h3 [countUp]="users" [countUpOptions]="scrollSpyOpts">0</h3>
        <p>Total Users</p>
      </div>
      <div class="stat">
        <h3 [countUp]="downloads" [countUpOptions]="scrollSpyOpts">0</h3>
        <p>Downloads</p>
      </div>
    </div>
  `
})
export class StatsComponent {
  users = 50000;
  downloads = 1000000;
  scrollSpyOpts: CountUpOptions = {
    enableScrollSpy: true,
    scrollSpyDelay: 200,
    scrollSpyOnce: true
  };
}
```

### Response
#### Success Response (200)
N/A (Directive)

#### Response Example
N/A (Directive)
```

--------------------------------

### Disable Click Re-animation with CountUpDirective

Source: https://context7.com/inorganik/ngx-countup/llms.txt

Prevent the default click-to-replay behavior of the CountUpDirective by setting the `reanimateOnClick` input property to `false`. This ensures that the animation, once completed, will not restart if the element is clicked.

```typescript
import { Component } from '@angular/core';
import { CountUpDirective } from 'ngx-countup';
import { CountUpOptions } from 'countup.js';

@Component({
  selector: 'app-static-counter',
  imports: [CountUpDirective],
  template: `
    <h1 [countUp]="score"
        [countUpOptions]="options"
        [reanimateOnClick]="false">0</h1>
  `
})
export class StaticCounterComponent {
  score = 9999;
  options: CountUpOptions = {
    duration: 2,
    separator: ',',
    suffix: ' points'
  };
}

```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.