![Cover image for [Angular] How to create beautiful and realistic confetti animations using tsParticles](https://media2.dev.to/dynamic/image/width=1000,height=420,fit=cover,gravity=auto,format=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fmpxl31lqhaak3q7g2fqn.png)
I wrote a post about tsParticles and the new confetti animation created in the 1.30 version.
This configuration can be used as is in any Angular tsParticles installation (ng-particles package).
app.module.ts
import { NgParticlesModule } from "ng-particles";
@NgModule({
declarations: [/* ... */],
imports: [/* ... */, NgParticlesModule],
providers: [],
bootstrap: [/* ... */]
})
app.component.html
<!-- this component can be placed anywhere -->
<Particles id="tsparticles" [options]="options"></Particles>
app.component.ts
export class AppComponent {
options = {
/* ... */
}
/* ... */
}
A working sample can be found below
tsparticles
/
tsparticles
tsParticles - Easily create highly customizable JavaScript particles effects, confetti explosions and fireworks animations and use them as animated backgrounds for your website. Ready to use components available for React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Solid, Riot and Web Components.
tsParticles - TypeScript Particles
A lightweight TypeScript library for creating particles. Dependency free (*), browser ready and compatible with React.js, Vue.js (2.x and 3.x), Angular, Svelte, jQuery, Preact, Inferno, Riot.js, Solid.js, and Web Components
Table of Contents
-
tsParticles - TypeScript Particles
- Table of Contents
- Do you want to use it on your website?
- Library installation
- Official components for some of the most used frameworks
- Presets
- Templates and Resources
- Demo / Generator
- Video Tutorials
- …
Top comments (0)