You Should Add 🎉 canvas-confetti 🎉 to Your Angular Project

इस ट्यूटोरियल के हिंदी संस्करण को पढ़ने के लिए यहां क्लिक करें।

Do you like confetti? Me too. Today I’ll show you how to add it to your Angular application with the canvas-confetti library:

https://www.npmjs.com/package/canvas-confetti

Skill Prerequisites

Fundamental HTML and CSS knowledge
Experience with Angular 2+ and TypeScript

Source Code

Clone the final product here:

https://github.com/LucyVeron/confetti-ui

Procedure

As in previous tutorials, let’s first install Node and npm:

Node: https://nodejs.org/
npm: https://www.npmjs.com/

Set up the Angular project by installing the Angular CLI tool:

npm install -g @angular/cli

Create a project:

ng new confetti-ui

Enter the project directory:

cd confetti-ui

Run the local development server:

ng serve

Check localhost:4200 in your browser:

We want to click a button to trigger the confetti effect. A canvas HTML element will be generated which contains the confetti animation. For the sake of simplicity, we will use a boolean flag to hide the button once it has been clicked to prevent the user from creating multiple canvases.

We will use Angular’s Renderer2 class to create and attach the canvas element to our HTML template. The full API documentation for Renderer2 can be found here:

https://angular.io/api/core/Renderer2

Finally, we’ll import the entire canvas-confetti module into our Angular application. Let’s make it accessible through a variable we’ll call confetti.

app.component.ts

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;
  }
}

app.component.html

<div class="container">
  <button *ngIf="!clicked" (click)="surprise()">🎊  Surprise  🎉</button>
</div>

app.component.css

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%; /* we need these for full-screen effect */
  width: 100%;
}

.container {
  display: flex;
  justify-content: center;
}

The final result will look like this: