33[ ![ npm version] ( https://badge.fury.io/js/%40fivethree%2Flottie.svg )] ( https://www.npmjs.com/@fivethree/lottie )
44[ ![ License] ( https://img.shields.io/badge/License-MIT-green.svg )] ( https://github.com/fivethree-team/lottie/blob/master/LICENSE )
55
6- Lottie Animation Component for Angular 7 or higher.
6+ Lottie Animation Component for Angular 8 or higher.
7+
8+ | Angular | @fivehtree/core |
9+ | ------- | --------------- |
10+ | 8/9 | 0.3.x+ |
11+ | 7 | 0.2.x |
712
813## 📦 Installation
914
@@ -15,16 +20,15 @@ yarn add @fivethree/lottie lottie-web
1520```
1621
1722## 🔨 Usage
23+
1824Import the module into your root application module:
1925
2026``` typescript
2127import { NgModule } from ' @angular/core' ;
2228import { LottieModule } from ' @fivethree/lottie' ;
2329
2430@NgModule ({
25- imports: [
26- LottieModule
27- ]
31+ imports: [LottieModule ]
2832})
2933export class AppModule {}
3034```
@@ -34,7 +38,12 @@ export class AppModule {}
3438Add the lottie component to your template:
3539
3640``` html
37- <fiv-lottie [params] =" lottieParams" [width] =" 250" [height] =" 250" (animationCreated) =onAnimationCreated($event) ></fiv-lottie >
41+ <fiv-lottie
42+ [params] =" lottieParams"
43+ [width] =" 250"
44+ [height] =" 250"
45+ (animationCreated) =" onAnimationCreated($event)"
46+ ></fiv-lottie >
3847```
3948
4049You need to setup the ` lottieParams ` in your component:
@@ -46,10 +55,9 @@ import { LottieAnimation, LottieParams } from '@fivethree/lottie';
4655Component ({
4756 selector: ' app-home' ,
4857 templateUrl: ' home.page.html' ,
49- styleUrls: [' home.page.scss' ],
58+ styleUrls: [' home.page.scss' ]
5059})
5160export class HomePage {
52-
5361 lottieParams: LottieParams = {
5462 path: ' assets/lottie/empty_box.json' ,
5563 renderer: ' canvas' ,
0 commit comments