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 $event.target as a parameter:

A sample template:

app.component.html:




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


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

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


</div>

Advertisements

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:

app.component.ts:

  showconfetti(source:any){

    party.confetti(source);

  }

Here is the complete model class:

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

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


  showconfetti(source:any){

    party.confetti(source);

  }
}

That’s it!

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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