Table of contents
ngx-lottieprovides more opportunities to work with API exposed by Lottie
- strict: all types of objects and events are available to you
- performant: the
lottie-weblibrary can be loaded synchronously or on demand
ngx-lottie run the following command:
npm i lottie-web ngx-lottie# Or if you use yarnyarn add lottie-web ngx-lottie
First, import the
LottieModule into the
;;;// Note we need a separate function as it's required// by the AOT compiler.
lottie-web library can be loaded on demand using dynamic import. Webpack will load this library only when your animation gets rendered for the first time. Given the following code:
Now you can simply use the
ng-lottie component and provide your custom options via the
Also it's possible to use the
lottie directive if you'd like to provide your own custom container and control it:
Notice that you will need to import the
LottieModule into other modules as it exports
ng-lottie component and
lottie directive. But
forRoot has to be called only once!
lottie-web will load your JSON file every time when animation is created. When importing the
LottieModule into the root module you can provide the
This will enable cache under the hood. Since the cache is enabled your JSON file will be loaded only once.
ng-lottie component supports the following bindings:
options: AnimationOptionsoptions used by
width?: stringcontainer element width in pixels. Bound to
[style.width]. You can provide any CSS unit, e.g.
height?: stringcontainer element height in pixels. Bound to
[style.height]. You can provide any CSS unit, e.g.
styles?: Partial<CSSStyleDeclaration>custom styles object. Bound to
containerClass?: stringcustom container class(es). Bound to
lottie directive supports only
||optional||Dispatched after the
||optional||Dispatched after the needed renderer is configured|
||optional||Dispatched when all parts of the animation have been loaded|
||optional||Dispatched when elements have been added to the DOM|
||optional||Dispatched after entering the new frame|
||optional||Dispatched when the new segment is adjusted|
||optional||Dispatched after completing frame loop|
||optional||Dispatched after completing the last frame|
||optional||Dispatched in the
||optional||Dispatched if the lottie player could not render some frame or parse the config|
ng-lottie component is marked with
OnPush change detection strategy. This means it will not be checked in any phase of the change detection mechanism until you change the reference to some binding. For example if you use an
svg renderer and there are a lot DOM elements projected — you would like to avoid checking this component, as it's not necessary.
AnimationItem events are listened outside of the Angular zone. You shouldn't worry that animation events will cause change detection every ms.
But be careful! Always wrap any calls to
AnimationItem methods in
runOutsideAngular. See the below code:
Server side rendering
lottie will load your
json file with animation data every time you create an animation. You may have some problems with the connection, so there may be some delay or even timeout. It's worth loading animation data only once and cache it on the client side, so every time you create an animation — the animation data will be retrieved from cache.
ngx-lottie/server package gives you the opportunity to preload animation data and cache it using
TL;DR - see
LottieServerModule into your
Don't forget to import
BrowserTransferStateModule into your
AppModule. Let's look at these options.
animations is an array of
json files, that contain animation data, that should be read on the server side, cached and transfered on the client.
folder is a path where your
json files are located, but you should use it properly, this path is joined with the
process.cwd(). Imagine such project structure:
— dist (here you store your output artifacts) — project-name — assets — index.html — main.hash.js — dist-server — server.js — src (here is your app) — angular.json — package.json — webpack.config.js
If you start a server from the root folder like
node dist-server/server, thus the
folder property should equal
LottieServerModule - now you have to import
LottieTransferState from the
ngx-lottie package. Don't worry, this service is tree-shakable and won't be bundled if you don't inject it anywhere.
Inject this service into your component where you declare animation options:
data.json is a filename that you pass to the
preloadAnimations.animations property. Finally change this: