Skip to content

Commit acd5dd2

Browse files
hm21hm21
committed
feat: support zoneless operation for Angular 18
1 parent 81cd65b commit acd5dd2

File tree

6 files changed

+67
-56
lines changed

6 files changed

+67
-56
lines changed

‎CHANGELOG.md‎

Lines changed: 14 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -2,41 +2,39 @@
22

33
All notable changes to this project will be documented in this file.
44

5-
<a name="1.1.3"></a>
5+
## `1.2.0` - 2024.05.23
66

7-
## [1.1.3] - 2024.03.22
7+
### Feat
8+
9+
- Added support for Angular 18 zone-less applications.
10+
- Replaced this.zone.onStable with an EventEmitter to ensure compatibility with zone-less environments.
11+
- This update ensures that the application functions seamlessly in Angular 18 without relying on Angular Zones.
12+
13+
## `1.1.3` - 2024.03.22
814

915
### Feat
1016

1117
- Add a gap for multiple scroll animations so that they are not triggered twice at the same moment.
1218

13-
<a name="1.1.2"></a>
14-
15-
## [1.1.2] - 2024.03.07
19+
## `1.1.2` - 2024.03.07
1620

1721
### Fix
1822

1923
- Resize screen was not triggered
2024

21-
<a name="1.1.1"></a>
22-
23-
## [1.1.1] - 2024.02.16
25+
## `1.1.1` - 2024.02.16
2426

2527
### Fix
2628

2729
- Export scroll-service that user can override the scroll-listener
2830

29-
<a name="1.1.0"></a>
30-
31-
## [1.1.0] - 2024.02.16
31+
## `1.1.0` - 2024.02.16
3232

3333
### Added
3434

3535
- Enhance the functionality by implementing a feature that allows users to override the scroll listener to a different HTML element.
3636

37-
<a name="1.0.6"></a>
38-
39-
## [1.0.6] - 2023-12-20
37+
## `1.0.6` - 2023-12-20
4038

4139
### Added
4240

@@ -50,17 +48,8 @@ All notable changes to this project will be documented in this file.
5048

5149
- Updated dependencies to the latest versions.
5250

53-
<a name="1.0.0"></a>
54-
55-
## [1.0.0] (2023-12-18)
51+
## `1.0.0` (2023-12-18)
5652

5753
_Initial release_
5854

59-
---
60-
61-
[1.1.3]: https://github.com/your/project/releases/tag/1.1.3
62-
[1.1.2]: https://github.com/your/project/releases/tag/1.1.2
63-
[1.1.1]: https://github.com/your/project/releases/tag/1.1.1
64-
[1.1.0]: https://github.com/your/project/releases/tag/1.1.0
65-
[1.0.6]: https://github.com/your/project/releases/tag/1.0.6
66-
[1.0.0]: https://github.com/your/project/releases/tag/1.0.0
55+
---

‎README.md‎

Lines changed: 11 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -87,16 +87,17 @@ export class AppModule { }
8787

8888
### Inputs
8989

90-
| Option | Type | Default | Comment |
91-
|:------------------|:----------------|:------------------|:--------------------------------------------------------|
92-
| ngxScrollAnimate | string | fade-in-up | Name of the animation (as example 'fade-in') |
93-
| easing | string | ease | Defines how the animation accelerates and decelerates during its runtime. |
94-
| speed | number | 300 | The speed at which the animation runs in milliseconds. |
95-
| delay | number | 0 | Delays the start of the animation. Accepts the delay time in milliseconds. |
96-
| aos | number | 0.8 (when thresholdMode is set to 'pixel', the value is 20) | The threshold for triggering the animation when an element scrolls into the viewport. |
97-
| thresholdMode | 'percent' / 'pixel' | percent | Defines the mode for calculating the threshold: 'percent' or 'pixel'. |
98-
| once | boolean | true | If true, triggers the animation only once when the element scrolls into the viewport. |
99-
| disabled | boolean | false | A boolean value to enable or disable the animation. |
90+
| Option | Type | Default | Comment |
91+
|:------------------|:-----------------|:------------------------------------------------------------|:---------------------------------------------------------------------------------------|
92+
| ngxScrollAnimate | string | fade-in-up | Name of the animation (as example 'fade-in') |
93+
| zoneless | boolean | true | Set this property to false if your application runs with ng zone. |
94+
| easing | string | ease | Defines how the animation accelerates and decelerates during its runtime. |
95+
| speed | number | 300 | The speed at which the animation runs in milliseconds. |
96+
| delay | number | 0 | Delays the start of the animation. Accepts the delay time in milliseconds. |
97+
| aos | number | 0.8 (when thresholdMode is set to 'pixel', the value is 20) | The threshold for triggering the animation when an element scrolls into the viewport. |
98+
| thresholdMode | 'percent' / 'pixel' | percent | Defines the mode for calculating the threshold: 'percent' or 'pixel'. |
99+
| once | boolean | true | If true, triggers the animation only once when the element scrolls into the viewport. |
100+
| disabled | boolean | false | A boolean value to enable or disable the animation. |
100101

101102

102103
### Outputs

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-scroll-animations",
3-
"version": "1.1.3",
3+
"version": "1.2.0",
44
"description": "This minimalistic Angular directive, free from external dependencies, empowers you to effortlessly implement CSS animations on elements. These animations trigger when an element comes into view through scrolling on the page. It seamlessly integrates with your choice of CSS animations.",
55
"author": {
66
"name": "Alex Frei",

‎projects/ngx-scroll-animations/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "ngx-scroll-animations",
3-
"version": "1.1.3",
3+
"version": "1.2.0",
44
"description": "This minimalistic Angular directive, free from external dependencies, empowers you to effortlessly implement CSS animations on elements. These animations trigger when an element comes into view through scrolling on the page. It seamlessly integrates with your choice of CSS animations.",
55
"author": {
66
"name": "Alex Frei",

‎projects/ngx-scroll-animations/src/lib/ngx-scroll-animations.directive.ts‎

Lines changed: 37 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,37 @@
11
import { isPlatformBrowser } from '@angular/common';
22
import {
3-
Directive,
4-
ElementRef,
5-
EventEmitter,
6-
Inject,
7-
Input,
8-
NgZone,
9-
OnDestroy,
10-
OnInit,
11-
Output,
12-
PLATFORM_ID,
13-
Renderer2,
3+
AfterViewInit,
4+
Directive,
5+
ElementRef,
6+
EventEmitter,
7+
Inject,
8+
Input,
9+
NgZone,
10+
OnDestroy,
11+
OnInit,
12+
Output,
13+
PLATFORM_ID,
14+
Renderer2,
1415
} from '@angular/core';
1516
import { Subject, fromEvent } from 'rxjs';
1617
import { filter, takeUntil, takeWhile } from 'rxjs/operators';
1718
import { NgxScrollAnimationsService } from './ngx-scroll-animations.service';
1819
import {
19-
BooleanInput,
20-
coerceBooleanProperty,
20+
BooleanInput,
21+
coerceBooleanProperty,
2122
} from './utils/coercion/coercion-boolean';
2223
import {
23-
NumberInput,
24-
coerceNumberProperty,
24+
NumberInput,
25+
coerceNumberProperty,
2526
} from './utils/coercion/coercion-number';
2627
import { ThresholdModeT } from './utils/ngx-scroll-animations-types';
2728

2829
@Directive({
2930
selector: '[ngxScrollAnimate]',
3031
})
31-
export class NgxScrollAnimationsDirective implements OnInit, OnDestroy {
32+
export class NgxScrollAnimationsDirective
33+
implements OnInit, AfterViewInit, OnDestroy
34+
{
3235
/**
3336
* Emits an event at the start of the animation.
3437
*/
@@ -130,6 +133,18 @@ export class NgxScrollAnimationsDirective implements OnInit, OnDestroy {
130133
return this._once;
131134
}
132135

136+
private _zoneless: boolean = true;
137+
/**
138+
* Set this property to false if your application runs with ng zone.
139+
*/
140+
@Input()
141+
set zoneless(value: BooleanInput) {
142+
this._zoneless = coerceBooleanProperty(value);
143+
}
144+
get zoneless(): boolean {
145+
return this._zoneless;
146+
}
147+
133148
private _undoGap: number = 20;
134149
/**
135150
* The gap between the animation start point and animation leave point.
@@ -195,6 +210,8 @@ export class NgxScrollAnimationsDirective implements OnInit, OnDestroy {
195210
* Initializes the directive and sets up the animation triggers.
196211
*/
197212
ngOnInit(): void {
213+
if (!this.zoneless) this.scrollService.stableEvent = this.zone.onStable;
214+
198215
this.elRef.nativeElement.classList.add('ngx-scroll-animations');
199216
this.zone.runOutsideAngular(() => {
200217
this.triggerIdle();
@@ -205,6 +222,10 @@ export class NgxScrollAnimationsDirective implements OnInit, OnDestroy {
205222
});
206223
}
207224

225+
ngAfterViewInit(): void {
226+
if (this.zoneless) this.scrollService.stableEvent.next(true);
227+
}
228+
208229
ngOnDestroy(): void {
209230
this.destroy$.next(true);
210231
this.destroy$.complete();

‎projects/ngx-scroll-animations/src/lib/ngx-scroll-animations.service.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import { DOCUMENT, isPlatformBrowser } from '@angular/common';
22
import {
33
ElementRef,
4+
EventEmitter,
45
Inject,
56
Injectable,
6-
NgZone,
77
PLATFORM_ID,
88
} from '@angular/core';
99
import { Observable, OperatorFunction, fromEvent, of } from 'rxjs';
@@ -25,9 +25,9 @@ import { ThresholdModeT } from './utils/ngx-scroll-animations-types';
2525
export class NgxScrollAnimationsService {
2626
private view$!: Observable<DOMRect>;
2727
private scroll$!: Observable<Event>;
28+
public stableEvent = new EventEmitter<any>();
2829

2930
constructor(
30-
private zone: NgZone,
3131
@Inject(DOCUMENT) private document: Document,
3232
@Inject(PLATFORM_ID) private platformId: any
3333
) {
@@ -83,7 +83,7 @@ export class NgxScrollAnimationsService {
8383
undoGap: number
8484
): OperatorFunction<boolean, 0 | 1 | undefined> {
8585
return (source) =>
86-
this.zone.onStable.pipe(
86+
this.stableEvent.pipe(
8787
first(),
8888
// switchMap(() => source),
8989
switchMap((trigger) =>

0 commit comments

Comments
 (0)