ngx-lottie - npm Package Compare versions

Comparing version 11.0.1 to 11.0.2

lib/base.directive.d.ts

@@ -6,5 +6,5 @@ import { SimpleChanges, OnDestroy } from '@angular/core';
 export declare class BaseDirective implements OnDestroy {
-    options: AnimationOptions | null;
-    containerClass: string | null;
-    styles: Partial<CSSStyleDeclaration> | null;
+    options: import("@angular/core").InputSignal<AnimationOptions | null>;
+    containerClass: import("@angular/core").InputSignal<string | null>;
+    styles: import("@angular/core").InputSignal<Partial<CSSStyleDeclaration> | null>;
     /**
@@ -68,3 +68,3 @@ * `animationCreated` is dispatched after calling `loadAnimation`.
     static ɵfac: i0.ɵɵFactoryDeclaration<BaseDirective, never>;
-    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseDirective, "[lottie]", never, { "options": { "alias": "options"; "required": false; }; "containerClass": { "alias": "containerClass"; "required": false; }; "styles": { "alias": "styles"; "required": false; }; }, { "animationCreated": "animationCreated"; "complete": "complete"; "loopComplete": "loopComplete"; "enterFrame": "enterFrame"; "segmentStart": "segmentStart"; "configReady": "configReady"; "dataReady": "dataReady"; "domLoaded": "domLoaded"; "destroy": "destroy"; "error": "error"; }, never, never, false, never>;
+    static ɵdir: i0.ɵɵDirectiveDeclaration<BaseDirective, "[lottie]", never, { "options": { "alias": "options"; "required": false; "isSignal": true; }; "containerClass": { "alias": "containerClass"; "required": false; "isSignal": true; }; "styles": { "alias": "styles"; "required": false; "isSignal": true; }; }, { "animationCreated": "animationCreated"; "complete": "complete"; "loopComplete": "loopComplete"; "enterFrame": "enterFrame"; "segmentStart": "segmentStart"; "configReady": "configReady"; "dataReady": "dataReady"; "domLoaded": "domLoaded"; "destroy": "destroy"; "error": "error"; }, never, never, false, never>;
 }

lib/lottie.component.d.ts

@@ -5,8 +5,8 @@ import { ElementRef, OnChanges, SimpleChanges } from '@angular/core';
 export declare class LottieComponent extends BaseDirective implements OnChanges {
-    width: string | null;
-    height: string | null;
+    width: import("@angular/core").InputSignal<string | null>;
+    height: import("@angular/core").InputSignal<string | null>;
     container: ElementRef<HTMLElement>;
     ngOnChanges(changes: SimpleChanges): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<LottieComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LottieComponent, "ng-lottie", never, { "width": { "alias": "width"; "required": false; }; "height": { "alias": "height"; "required": false; }; }, {}, never, never, true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LottieComponent, "ng-lottie", never, { "width": { "alias": "width"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }

package.json

 {
   "name": "ngx-lottie",
-  "version": "11.0.1",
+  "version": "11.0.2",
   "repository": {
@@ -5,0 +5,0 @@ "type": "git",

README.md

@@ -121,3 +121,3 @@ <h1 align="center">
   (error)="error($event)"
-></ng-lottie>
+/>
 ```
@@ -133,2 +133,4 @@
 yarn add lottie-web ngx-lottie
+# Or if you use pnpm
+pnpm i lottie-web ngx-lottie
 ```
@@ -180,5 +182,3 @@
   selector: 'app-root',
-  template: `
-    <ng-lottie [options]="options" (animationCreated)="animationCreated($event)"></ng-lottie>
-  `,
+  template: ` <ng-lottie [options]="options" (animationCreated)="animationCreated($event)" /> `,
   standalone: true,
@@ -236,3 +236,3 @@ imports: [LottieComponent],
   template: `
-    <ng-lottie [options]="options" (animationCreated)="animationCreated($event)"></ng-lottie>
+    <ng-lottie [options]="options" (animationCreated)="animationCreated($event)" />
     <button (click)="updateAnimation()">Update animation</button>
@@ -275,3 +275,3 @@ `,
   template: `
-    <ng-lottie [options]="options" (animationCreated)="animationCreated($event)"></ng-lottie>
+    <ng-lottie [options]="options" (animationCreated)="animationCreated($event)" />
     <button (click)="updateAnimation()">Update animation</button>
@@ -288,3 +288,6 @@ `,
 
-  constructor(private ref: ChangeDetectorRef, private animationService: AnimationService) {}
+  constructor(
+    private ref: ChangeDetectorRef,
+    private animationService: AnimationService,
+  ) {}
 
@@ -304,3 +307,3 @@ animationCreated(animationItem: AnimationItem): void {
 
-You can also store options in `singla` and bind them via the `options()` signal call:
+You can also store options in `signal` and bind them via the `options()` signal call:
 
@@ -311,3 +314,3 @@ ```ts
   template: `
-    <ng-lottie [options]="options()" (animationCreated)="animationCreated($event)"></ng-lottie>
+    <ng-lottie [options]="options()" (animationCreated)="animationCreated($event)" />
     <button (click)="updateAnimation()">Update animation</button>
@@ -324,3 +327,6 @@ `,
 
-  constructor(private ref: ChangeDetectorRef, private animationService: AnimationService) {}
+  constructor(
+    private ref: ChangeDetectorRef,
+    private animationService: AnimationService,
+  ) {}
 
@@ -344,3 +350,3 @@ animationCreated(animationItem: AnimationItem): void {
 ```html
-<ng-lottie (loopComplete)="onLoopComplete()"></ng-lottie>
+<ng-lottie (loopComplete)="onLoopComplete()" />
 ```
@@ -366,3 +372,3 @@
   selector: 'app-root',
-  template: ` <ng-lottie [options]="options" (loopComplete)="onLoopComplete()"></ng-lottie> `,
+  template: ` <ng-lottie [options]="options" (loopComplete)="onLoopComplete()" /> `,
   changeDetection: ChangeDetectionStrategy.OnPush,
@@ -393,3 +399,3 @@ standalone: true,
   template: `
-    <ng-lottie [options]="options" (loopComplete)="onLoopComplete()"></ng-lottie>
+    <ng-lottie [options]="options" (loopComplete)="onLoopComplete()" />
     <p>On loop complete called times = {{ onLoopCompleteCalledTimes }}</p>
@@ -408,3 +414,6 @@ `,
 
-  constructor(private ngZone: NgZone, private ref: ChangeDetectorRef) {}
+  constructor(
+    private ngZone: NgZone,
+    private ref: ChangeDetectorRef,
+  ) {}
 
@@ -422,3 +431,3 @@ onLoopComplete(): void {
 
-The `lottie-web` will load your JSON file whenever animation is created. When importing the `LottieModule` into the root module, you can also import the `LottieCacheModule`:
+The `lottie-web` will load your JSON file whenever animation is created. When providing options in the root config, you can also add the `provideCacheableAnimationLoader`:
 
@@ -457,3 +466,3 @@ ```ts
       [options]="options"
-    ></ng-lottie>
+    />
   `,
@@ -593,3 +602,3 @@ standalone: true,
   template: `
-    <ng-lottie [options]="options" (animationCreated)="animationCreated($event)"></ng-lottie>
+    <ng-lottie [options]="options" (animationCreated)="animationCreated($event)" />
 
@@ -639,9 +648,9 @@ <button (click)="stop()">Stop</button>
 
-Import the `LottieServerModule` into your `AppServerModule`:
+Add the `provideLottieServerOptions` into your `appServerConfig`:
 
 ```typescript
 // src/app/app.config.server.ts
-import { importProvidersFrom, mergeApplicationConfig } from '@angular/core';
+import { mergeApplicationConfig } from '@angular/core';
 import { provideServerRendering } from '@angular/platform-server';
-import { LottieServerModule } from 'ngx-lottie/server';
+import { provideLottieServerOptions } from 'ngx-lottie/server';
 
@@ -653,10 +662,8 @@ import { appConfig } from './app.config';
     provideServerRendering(),
-    importProvidersFrom(
-      LottieServerModule.forRoot({
-        preloadAnimations: {
-          folder: 'dist/browser/assets',
-          animations: ['data.json'],
-        },
-      }),
-    ),
+    provideLottieServerOptions({
+      preloadAnimations: {
+        folder: 'dist/browser/assets',
+        animations: ['data.json'],
+      },
+    }),
   ],
@@ -691,3 +698,3 @@ });
   selector: 'app-root',
-  template: ` <ng-lottie [options]="options"></ng-lottie> `,
+  template: ` <ng-lottie [options]="options" /> `,
   standalone: true,
@@ -694,0 +701,0 @@ imports: [LottieComponent],

server/index.d.ts

@@ -1,1 +0,1 @@
-export { LottieServerModule } from './lottie-server.module';
+export { LottieServerModule, provideLottieServerOptions } from './lottie-server.module';

server/lottie-server.module.d.ts

@@ -11,1 +11,2 @@ import { ModuleWithProviders, InjectionToken } from '@angular/core';
 }
+export declare function provideLottieServerOptions(options: LottieServerOptions): import("@angular/core").EnvironmentProviders;

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

168760

increased by2.4%

Lines of code

1171

increased by1.12%

Number of lines in readme file

698

increased by1.01%

No dependency changes