Home

Awesome

ngx-confetti-explosion

Let's celebrate with confetti! ngx-confetti-explosion is an Angular package that lets you create an amazing confetti explosion on your web page.

This library is based on the amazing svelte-confetti-explosion and react-confetti-explosion package. We have taken the core logic from that package and implemented it in Angular separately, making various optimizations along the way.

Features

Installation

# npm
npm install ngx-confetti-explosion

# yarn
yarn add ngx-confetti-explosion

Usage

Basic usage:

<ngx-confetti-explosion></ngx-confetti-explosion>

Customizing behavior with options:

<ngx-confetti-explosion [particleCount]="200" [force]="0.3"></ngx-confetti-explosion>

Inputs (Props)

Prop NameDescriptionTypeDefault ValueExample
particleCountNumber of confetti particles to create.number150<ngx-confetti-explosion [particleCount]="200"></ngx-confetti-explosion>
particleSizeSize of the confetti particles in pixels.number12<ngx-confetti-explosion [particleSize]="20"></ngx-confetti-explosion>
durationDuration of the confetti animation in milliseconds.number3500<ngx-confetti-explosion [duration]="5000"></ngx-confetti-explosion>
colorsColors to use for the confetti particles. Provide an array of strings representing colors.string[]['#FFC700', '#FF0000', '#2E3191', '#41BBC7']<ngx-confetti-explosion [colors]="['var(--yellow)', 'var(--red)', '#2E3191', '#41BBC7']"></ngx-confetti-explosion>
particlesShapeShape of particles to use. Can be 'mix', 'circles', or 'rectangles'.`'mix''circles''rectangles'`
forceForce of the confetti particles. Should be a value between 0 and 1.number0.5<ngx-confetti-explosion [force]="0.3"></ngx-confetti-explosion>
stageHeightHeight of the confetti animation stage in pixels. Confetti will only fall within this height.number800<ngx-confetti-explosion [stageHeight]="500"></ngx-confetti-explosion>
stageWidthWidth of the confetti animation stage in pixels. Confetti will only fall within this width.number1600<ngx-confetti-explosion [stageWidth]="500"></ngx-confetti-explosion>
style (--x, --y)Style props to shift the confetti particles on the x and y axes by the specified amount.CSS units (e.g., px, em, rem)--x: 10px; --y: 10px;<ngx-confetti-explosion style="--x: 10px; --y: 10px;"></ngx-confetti-explosion>

Events

Event NameDescriptionPayloadExample
explosionDoneEmitted when the confetti animation is completed and all confetti nodes are destroyed.void(explosionDone)="onExplosionDone($event)"

Examples

Basic Example

Performance

This library generates 2 DOM nodes for each confetti particle. With the default setting of 150 particles, it results in 300 nodes. For higher particle counts, such as 400 or 500, it is advisable to check your target devices' performance

License

ngx-confetti-explosion is distributed under the MIT License.

© Chellappan