# ngx-lottie-view

> Lottie component for angular

Latest version **0.0.3** (published 2019-12-12) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-lottie-view
pnpm add ngx-lottie-view
yarn add ngx-lottie-view
bun add ngx-lottie-view
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2019-12-12 |
| First published | 2019-12-11 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 50.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | toolkitx |
| Maintainers | hwangzhiming |
| Keywords | angular, lottie, animation |

## Links

- npm: https://www.npmjs.com/package/ngx-lottie-view
- npm.io page: https://npm.io/package/ngx-lottie-view

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [@luma.gl/experimental](https://npm.io/package/@luma.gl/experimental.md) — 77.1K weekly downloads
- [persona-harness](https://npm.io/package/persona-harness.md) — 4.7K weekly downloads
- [@tsparticles/effect-bubble](https://npm.io/package/@tsparticles/effect-bubble.md) — 4.6K weekly downloads
- [f3d](https://npm.io/package/f3d.md) — 730 weekly downloads
- [spark-html-motion](https://npm.io/package/spark-html-motion.md) — 298 weekly downloads

## Recent versions

- 0.0.3 (latest) — 2019-12-12
- 0.0.2 — 2019-12-11

## README

## Lottie component for Angular
   
Lottie is a mobile library for Android and iOS that parses [Adobe After Effects](http://www.adobe.com/products/aftereffects.html) animations exported as JSON with [bodymovin](https://github.com/bodymovin/bodymovin) and renders them natively on mobile!

### Install

```bash
npm install ngx-lottie-view lottie-web --save
```
 
### Usage

1. Import module

```javascript

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

@NgModule({
  declarations: [
    YourComponent
  ],
  imports: [
    ...,
    NgxLottieViewModule // Import NgxLottieViewModule
  ],
  bootstrap: [YourComponent]
})
export class YourModule { }

```
2. Add component
```html
<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    |

---
_Source: https://npm.io/package/ngx-lottie-view · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._