Quickly way to integrate Lottie-web component with Angular

Lottie is a mobile library for Web, and iOS that parses Adobe After Effects animations exported as json with Bodymovin and renders them natively on mobile! View documentation, FAQ, help, examples, and more at here.

Install lottie-web and ngx-lottie library from npm

npm install lottie-web @synapsium/ngx-lottie --save

Add lottie.min.js into angular.json

"scripts": [
    "node_modules/lottie-web/build/player/lottie.min.js"
]

Add LottieModule to module

import { LottieModule } from '@synapsium/ngx-lottie';


@NgModule({
  ...
  imports: [
    ...
    LottieModule
  ]
})

Add the following tag in your html :

<lottie [path]="assets/home.json" 
        [loop]="true" animationEvent="click">
</lottie>