fix(core): updating options dynamically should work

ajitzero · Nov 30, 2024 · 25efbe5 · 25efbe5
1 parent e3eaf49
commit 25efbe5
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 6 deletions.
diff --git a/apps/demo/src/app/app.component.ts b/apps/demo/src/app/app.component.ts
@@ -1,4 +1,5 @@
-import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
+import { ChangeDetectionStrategy, Component, computed, model, signal } from '@angular/core';
+import { FormsModule } from '@angular/forms';
 import { AutoAnimationPlugin, getTransitionSizes } from '@formkit/auto-animate';
 import { NgAutoAnimateDirective } from 'ng-auto-animate';
 
@@ -17,7 +18,7 @@ type KeyframeProps = {
 @Component({
 	standalone: true,
 	changeDetection: ChangeDetectionStrategy.OnPush,
-	imports: [NgAutoAnimateDirective],
+	imports: [NgAutoAnimateDirective, FormsModule],
 	selector: 'ng-auto-animate-root',
 	template: `
 		<main class="container">
@@ -38,6 +39,7 @@ type KeyframeProps = {
 						<a href="https://github.com/ajitzero/ng-auto-animate/tree/main/libs/ng-auto-animate#readme">
 							📝 View README (Slow transition, from global default settings)
 						</a>
+						<input type="number" [(ngModel)]="duration" />
 					}
 				</header>
 				<div class="grid">
@@ -46,9 +48,9 @@ type KeyframeProps = {
 				</div>
 				<footer [auto-animate]="bouncyPlugin">
 					<!-- Custom plugin: Affects the <div *ngIf> below, but not its children -->
-					<h3>Footer content</h3>
+					<h3>Footer content {{ duration() }}</h3>
 					@if (showList()) {
-						<ol [auto-animate]="{ duration: 250 }">
+						<ol [auto-animate]="inputOptions()">
 							<!-- Explicit, inline setting: Affects the <p *ngFor> below -->
 							@for (paragraph of paragraphs(); track paragraph.id) {
 								<li>{{ paragraph.desc }}</li>
@@ -64,6 +66,9 @@ export class AppComponent {
 	showIntro = signal(false);
 	showList = signal(false);
 
+	duration = model(250);
+	inputOptions = computed(() => ({ duration: this.duration() }));
+
 	paragraphs = signal([
 		{ id: '1', desc: 'lorem ipsum dolor sit amet, consectetur adipiscing elit.' },
 		{ id: '2', desc: 'random lorem ipsum dolor sit amet, consectetur adipiscing elit.' },

diff --git a/libs/ng-auto-animate/src/lib/ng-auto-animate.directive.ts b/libs/ng-auto-animate/src/lib/ng-auto-animate.directive.ts
@@ -1,4 +1,14 @@
-import { Directive, ElementRef, InjectionToken, afterNextRender, computed, inject, input } from '@angular/core';
+import {
+	Directive,
+	ElementRef,
+	InjectionToken,
+	Injector,
+	afterNextRender,
+	computed,
+	effect,
+	inject,
+	input,
+} from '@angular/core';
 import autoAnimate, { AutoAnimateOptions, AutoAnimationPlugin } from '@formkit/auto-animate';
 
 export type AutoAnimationConfig = Partial<AutoAnimateOptions> | AutoAnimationPlugin;
@@ -17,6 +27,7 @@ export const GLOBAL_AUTO_ANIMATE_OPTIONS = new InjectionToken<AutoAnimationConfi
 	standalone: true,
 })
 export class NgAutoAnimateDirective {
+	private readonly _injector = inject(Injector);
 	private readonly _elementRef = inject(ElementRef);
 	private readonly _globalOptions = inject(GLOBAL_AUTO_ANIMATE_OPTIONS);
 
@@ -42,7 +53,12 @@ export class NgAutoAnimateDirective {
 
 	constructor() {
 		afterNextRender(() => {
-			autoAnimate(this._elementRef.nativeElement, this._options());
+			effect(
+				() => {
+					autoAnimate(this._elementRef.nativeElement, this._options());
+				},
+				{ injector: this._injector },
+			);
 		});
 	}
 }