Lottie Animation Component

Usage no npm install needed!

<script type="module">
  import sentinelOneLottie from 'https://cdn.skypack.dev/@sentinel-one/lottie';


Lottie Animation Component

npm version License

Lottie Animation Wrapper Component for Angular 7 or higher.

(Originally forked from: fivethree-team/lottie)

📦 Installation

TBD as ng add soon

npm i @sentinel-one/lottie lottie-web --save

🔨 Usage

Import the module into your root application module:

import { NgModule } from '@angular/core';
import { LottieModule } from '@sentinel-one/lottie';

    imports: [
export class AppModule {}

🦁 Animation

Add the lottie component to your template:

<fiv-lottie [params]="lottieParams" [width]="250" [height]="250" (animationCreated)=onAnimationCreated($event)></fiv-lottie>

You need to setup the lottieParams in your component:

import { Component } from '@angular/core';
import { LottieAnimation, LottieParams } from '@sentinel-one/lottie';

  selector: 'app-home',
  templateUrl: 'home.page.html',
  styleUrls: ['home.page.scss'],
export class HomePage {

  lottieParams: LottieParams = {
    path: 'assets/lottie/empty_box.json',
    renderer: 'canvas',
    loop: true

  onAnimationCreated(animation: LottieAnimation) {

Save your lottie files in the assets folder and change the path param, this way they are copied when building your application.