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;">
<input style="width: 50px;height:50px;" type="checkbox" (click)="showconfetti($event.target)">
<label style="font-size:30px"> Add Cofetti to Angular Project</label>
</div>
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