How to add confetti to your Angular Project?

To add confetti to your angular project , follow the below steps:

STEP 1: Install party.js

npm install party-js

STEP 2: Invoke method from your angular template on (click) method and pass $ as a parameter:

A sample template:


<div style="margin: auto;width: 50%;line-height: 500px;height: 500px;">

<input style="width: 50px;height:50px;" type="checkbox" (click)="showconfetti($">

<label style="font-size:30px">  &nbsp; Add Cofetti to Angular Project</label>



STEP 3: Import party object from party-js library inside the model class:

import party from "party-js";

STEP 4: Call party.confetti() method inside the method called from template:





Here is the complete model class:

import { Component } from '@angular/core';
import party from "party-js";

  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
export class AppComponent {
  title = 'confetti-test';




That’s it!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s