Install Lottie Player to Angular

Question

I'm currently trying to implement Lottie to my Angular web-app.

Somehow I couldn't manage to do so yet. I tried to follow the instructions from github, but that lead to multiple errors, as f.e.:

lottie-player is not a known ng module.

Furthermore, I tried to install ng-lottie for Angular - since the original wasn't working - but this one didn't provide any option to jump to a frame or loop only to a certain frame.

Does anyone know an alternative or a way to get lottie player working?

user_10453610 · Answer

You can add lottie-player as a custom element schema

npm install --save @lottiefiles/lottie-player

angular.json

"scripts": [
          "./node_modules/@lottiefiles/lottie-player/dist/lottie-player.js"
]

custom.module.ts

import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';

@NgModule({
schemas: [ CUSTOM_ELEMENTS_SCHEMA ]
})
export class CustomModule { }

custom.component.html

Hope this helps! and if you managed to implements it with a different approach you can help by sharing it

user_12113964 · Answer

theres a much simpler approach, install required packages as below

npm i ngx-lottie & lottie-web

in your app.module.ts, add

import { LottieModule } from 'ngx-lottie'; // add this line

export function playerFactory() { // add this line
  return import('lottie-web'); // add this line
} // add this line

@NgModule({ 
declarations: ['your component 1', 'your component 2'...],
imports: [ 
   LottieModule.forRoot({ player: playerFactory, useCache: true }) // add this line
]})

stop your angular server 4200 and start again using ng serve

define options in your component.ts file as

options: AnimationOptions = {
    path: 'add animation json file link', // download the JSON version of animation in your project directory and add the path to it like ./assets/animations/example.json
  };

then in your component.ts file

import the animation options module at the top of your component as

import { AnimationOptions } from 'ngx-lottie';

then in your component.html

for more information on other attributes of ng-lottie tag visit https://www.npmjs.com/package/ngx-lottie

Install Lottie Player to Angular

2 Answers