3
3
[ ![ npm version] ( https://badge.fury.io/js/%40fivethree%2Flottie.svg )] ( https://www.npmjs.com/@fivethree/lottie )
4
4
[ ![ License] ( https://img.shields.io/badge/License-MIT-green.svg )] ( https://github.com/fivethree-team/lottie/blob/master/LICENSE )
5
5
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 |
7
12
8
13
## 📦 Installation
9
14
@@ -15,16 +20,15 @@ yarn add @fivethree/lottie lottie-web
15
20
```
16
21
17
22
## 🔨 Usage
23
+
18
24
Import the module into your root application module:
19
25
20
26
``` typescript
21
27
import { NgModule } from ' @angular/core' ;
22
28
import { LottieModule } from ' @fivethree/lottie' ;
23
29
24
30
@NgModule ({
25
- imports: [
26
- LottieModule
27
- ]
31
+ imports: [LottieModule ]
28
32
})
29
33
export class AppModule {}
30
34
```
@@ -34,7 +38,12 @@ export class AppModule {}
34
38
Add the lottie component to your template:
35
39
36
40
``` 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 >
38
47
```
39
48
40
49
You need to setup the ` lottieParams ` in your component:
@@ -46,10 +55,9 @@ import { LottieAnimation, LottieParams } from '@fivethree/lottie';
46
55
Component ({
47
56
selector: ' app-home' ,
48
57
templateUrl: ' home.page.html' ,
49
- styleUrls: [' home.page.scss' ],
58
+ styleUrls: [' home.page.scss' ]
50
59
})
51
60
export class HomePage {
52
-
53
61
lottieParams: LottieParams = {
54
62
path: ' assets/lottie/empty_box.json' ,
55
63
renderer: ' canvas' ,
0 commit comments