🎉कैनवास-कंफेटी ट्यूटोरियल🎉

npm install -g @angular/cli

ng new confetti-ui

cd confetti-ui

ng serve

import { Component, ElementRef, Renderer2 } from '@angular/core';
import * as confetti from 'canvas-confetti';
 
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
 
  public clicked = false;
 
  constructor(
    private renderer2: Renderer2,
    private elementRef: ElementRef
  ) {}
 
  public surprise(): void {
 
    const canvas = this.renderer2.createElement('canvas');
 
    this.renderer2.appendChild(this.elementRef.nativeElement, canvas);
 
    const myConfetti = confetti.create(canvas, {
      resize: true // will fit all screen sizes
    });
 
    myConfetti();
 
    this.clicked = true;
  }
}

<div class="container">
  <button *ngIf="!clicked" (click)="surprise()"><img draggable="false" role="img" class="emoji" alt="🎊" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/1f38a.svg">  Surprise  <img draggable="false" role="img" class="emoji" alt="🎉" src="https://s0.wp.com/wp-content/mu-plugins/wpcom-smileys/twemoji/2/svg/1f389.svg"></button>
</div>

button {
  border: none;
  padding: 0.5rem;
  background: #fddde3;
  color: #8e5d5d;
  width: 200px;
  height: 50px;
  font-size: 21px;
  box-shadow: 0px 1px 4px 0px #d59d9d;
  margin-top: 2rem;
  cursor: pointer;
}
 
canvas {
  height: 100%; /* हमें पूर्ण-स्क्रीन प्रभाव के लिए इनकी आवश्यकता है */
  width: 100%;
}
 
.container {
  display: flex;
  justify-content: center;
}