cms

Tag: Angular Standalone

  • Using Lottie Icons in Angular Standalone Projects

    Using Lottie Icons in Angular Standalone Projects

    Introduction

    Animations can add a lot of life to a web app — but let’s be honest, Animations can bring a web app to life — whether it’s a subtle loading spinner or a bold hero icon, they make your UI feel smoother and more modern. But traditional formats like GIFs or sprite sheets? Not so great. They’re heavy, not scalable, and kind of stuck in the past.

    That’s where Lottie comes in. Lottie lets you render beautiful, high-quality animations using small JSON files. They’re lightweight, resolution-independent, and easy to control — a perfect fit for today’s fast, interactive frontends.

    In this post, I’ll walk you through how to set up and use Lottie animations in Angular, using a clean and modern approach. It’s quick to get started, and once you do, you’ll probably never want to go back to static icons again.

    Here’s what you’ll learn:

    • What Lottie animations are and why they’re awesome for modern UIs
    • How to set up Lottie in your Angular standalone project
    • How to add and reuse animations in your components

    Let’s jump in and make your app a little more fun ✨

    What Lottie animations are and why they’re awesome for modern UIs

    Lottie is an open-source animation library developed by Airbnb that lets you render animations created in Adobe After Effects (exported via Bodymovin) as real-time, vector-based animations in your app — using just JSON.

    Unlike GIFs or video files, Lottie animations are:

    • Lightweight – they load quickly and don’t bloat your bundle size.
    • Scalable – no quality loss on high-DPI screens.
    • Interactive – you can control playback, respond to user actions, or even sync them with state changes.

    They’re perfect for:

    • Loading spinners
    • Button feedback
    • Empty states and onboarding screens
    • Decorative illustrations

    Most developers use LottieFiles — a massive library of free (and premium) animations you can browse, customize, and export directly as JSON files for use in your app.

    So instead of using clunky image assets or reinventing animation from scratch, Lottie gives you plug-and-play motion design — and your users will feel the difference.

    How to set up Lottie in your Angular standalone project

    Once you’ve got your Angular project set up, adding Lottie is pretty straightforward. We’ll be using the official Angular wrapper for Lottie: ngx-lottie.

    Install the necessary packages:

    npm install lottie-web ngx-lottie

    Next, configure the Lottie player globally using provideLottieOptions. This can go in your app.config.ts:

    import {
  ApplicationConfig,
  provideBrowserGlobalErrorListeners,
  provideZoneChangeDetection,
} from '@angular/core';
import { provideRouter } from '@angular/router';
import { provideLottieOptions } from 'ngx-lottie';
import player from 'lottie-web';

import { routes } from './app.routes';

export const appConfig: ApplicationConfig = {
  providers: [
    provideBrowserGlobalErrorListeners(),
    provideZoneChangeDetection({ eventCoalescing: true }),
    provideRouter(routes),
    provideLottieOptions({
      player: () => player,
    }),
  ],
};

    And that’s it — Lottie is now wired up and ready to use in your components!

    How to Add and Reuse Animations in Your Components

    Now that Lottie is wired up, let’s make it easy to drop animations anywhere in your app.

    Instead of repeating the same Lottie config in every component, we’ll create a dedicated LottieIconComponent. This keeps things clean and lets you reuse animations by just passing in a few inputs like the path, size, and autoplay settings.

    Creating the LottieIconComponent

    To get started, create a new standalone component:

    ng generate component lottie-icon

    Set up the component using signal inputs

    Let’s wire it up to accept a path to the animation, along with optional size and behavior flags.

    // lottie-icon.ts
import { Component, computed, input } from '@angular/core';
import { AnimationOptions, LottieComponent } from 'ngx-lottie';

@Component({
  selector: 'app-lottie-icon',
  imports: [LottieComponent],
  templateUrl: './lottie-icon.html',
  styleUrl: './lottie-icon.css',
})
export class LottieIcon {
  path = input<string>('');
  width = input<string>('100px');
  height = input<string>('100px');
  loop = input<boolean>(true);
  autoplay = input<boolean>(true);

  readonly options = computed<AnimationOptions>(() => ({
    path: this.path(),
    loop: this.loop(),
    autoplay: this.autoplay(),
  }));
}

    <!-- lottie-icon.html -->
<ng-lottie
  [options]="options()"
  [styles]="{ width: width(), height: height() }"
></ng-lottie>

    Use It Anywhere in Your App

    Before using your Lottie icon, make sure your JSON animation file is placed where Angular can serve it statically.

    📁 Put Your Icon in the Public Folder

    Drop your animation file into the public/icons directory. For example:

    public/icons/lottie-icon.json

    Files in the public/ folder are served as-is at the root of your app, so the URL to this file will be /icons/lottie-icon.json.

    You can now drop your Lottie icons into any component where you want a bit of motion or visual feedback. They’re perfect for things like loading states, empty screens, confirmation messages, or just to add a little personality to your UI.

    Here’s how you can use the reusable component:

    <app-lottie-icon 
  [path]="'/icons/lottie-icon.json'" 
  [width]="'150px'" 
  [height]="'150px'" 
  [loop]="true" 
  [autoplay]="true">
</app-lottie-icon>

    This example loads an animation from your /public/icons/ folder, sizes it to 150×150 pixels, and sets it to autoplay in a loop. You can easily switch out the path to show different icons, and adjust the width, height, loop, or autoplay settings as needed.

    🧵 In Summary

    Lottie makes it super easy to add sleek, scalable animations to your Angular app — and with a reusable component setup, you don’t have to repeat yourself. Whether you’re adding a fun touch to a button or showing a loading state with flair, Lottie helps your UI feel more modern and alive.

    Now you’ve got the setup, the component, and the flexibility — go ahead and bring your UI to life!