ngx-lottie-view

Lottie component for angular

Usage no npm install needed!

<script type="module">
  import ngxLottieView from 'https://cdn.skypack.dev/ngx-lottie-view';
</script>

README

Lottie component for Angular

Lottie is a mobile library for Android and iOS that parses Adobe After Effects animations exported as JSON with bodymovin and renders them natively on mobile!

Install

npm install ngx-lottie-view lottie-web --save

Usage

  1. Import module

import { NgxLottieViewModule } from 'ngx-lottie-view';

@NgModule({
  declarations: [
    YourComponent
  ],
  imports: [
    ...,
    NgxLottieViewModule // Import NgxLottieViewModule
  ],
  bootstrap: [YourComponent]
})
export class YourModule { }
  1. Add component
<ngx-lottie-view path="your-json-path.json"
                 style="width: 200px; height: 200px;">
</ngx-lottie-view>

APIs

Props

Prop Description Default
path The relative path to the animation object null
loop A boolean flag indicating whether or not the animation should loop. true
render 'svg' / 'canvas' / 'html' to set the renderer svg
autoPlay true / false it will start playing as soon as it is ready true

Events

Output Description
animationLoad DOMLoaded
animationComplete complete