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?

Answer 1

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

<lottie-player src="https://assets4.lottiefiles.com/datafiles/zc3XRzudyWE36ZBJr7PIkkqq0PFIrIBgp4ojqShI/newAnimation.json"  background="transparent"  speed="1" loop  autoplay >
</lottie-player>

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