336 |
337 |
343 |
344 |
345 |
347 | ```
348 |
349 | ### Directive Patterns
350 |
351 | ```typescript
352 | import {
353 | Directive,
354 | effect,
355 | inject,
356 | input,
357 | output,
358 | signal,
359 | ElementRef,
360 | OnDestroy,
361 | } from '@angular/core';
362 |
363 | @Directive({
364 | selector: '[viewportObserver]',
365 | standalone: true,
366 | host: {
367 | '[attr.data-in-viewport]': 'isInViewport()',
368 | },
369 | })
370 | export class ViewportObserverDirective implements OnDestroy {
371 | // Signal inputs
372 | readonly threshold = input Piotr Stępniewski 💻 📖 👀 ⚠️ |
49 |  Jordan Benge 📝 |
50 |  Kévin Perrée 🐛 |
51 |  Alexandre Couret 🐛 |
52 |  anwar-elmawardy 🐛 |
53 |  Jan-Willem Willebrands 🐛 |
54 |  CSchulz 🐛 |
55 |
 Johnnie Ho 🐛 |
58 |  Aleksandr Pasevin 💻 🐛 |
59 |  Wilson Kurniawan 🐛 |
60 |  Eugene 💻 |
61 |  Sami Zarraa 🐛 |
62 |  JordiJS 🐛 |
63 |  mpschaeuble 🐛 |
64 |
 Daniel Karp 🐛 |
67 |  Tine Kondo 🤔 👀 |
68 |  Bojan Kogoj 📖 |
69 |
{{ title }}
3 |
10 | {{ item.value }}
11 |
12 | }
13 |
24 | {{ item.value }}
25 |
26 | }
27 | 10 | Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque porta lorem id nulla varius dictum. 11 | Suspendisse ut ante ac odio finibus fringilla id quis nulla. Etiam sapien elit, facilisis ut mattis non, euismod 12 | ac magna. Donec vehicula, mi ac bibendum finibus, mauris turpis malesuada tellus, accumsan feugiat felis mi in 13 | velit. Donec vitae sollicitudin eros. Vestibulum hendrerit magna urna, ut malesuada sem fringilla sit amet. Cras 14 | non tellus posuere nibh tincidunt pellentesque. Nunc mattis finibus accumsan. Aenean fringilla sapien ut quam 15 | posuere tempus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. 16 | Pellentesque interdum sit amet dui id auctor. Donec in gravida ex. Duis convallis tellus at lacus euismod 17 | suscipit sed quis risus. In varius urna ipsum, eget varius eros viverra in. 18 |
19 |Testing DestroyableDirective
`);
14 | directive = spectator.directive;
15 | });
16 |
17 | describe('WHEN directive was created', () => {
18 | let complete: () => void;
19 |
20 | beforeEach(() => {
21 | complete = jest.fn();
22 | interval(1).pipe(takeUntil(directive.destroyed$)).subscribe({ complete });
23 | });
24 |
25 | it('THEN instance should exists', () => {
26 | expect(directive).toBeTruthy();
27 | });
28 |
29 | it("THEN `complete` function wasn't called", () => {
30 | expect(complete).not.toHaveBeenCalled();
31 | });
32 |
33 | describe('AND directive was destroyed', () => {
34 | beforeEach(() => {
35 | spectator.fixture.destroy();
36 | });
37 |
38 | it('THEN `complete` function was called', () => {
39 | expect(complete).toHaveBeenCalledTimes(1);
40 | });
41 | });
42 | });
43 | });
44 |
--------------------------------------------------------------------------------
/projects/ng-in-viewport/src/lib/directives/destroyable.directive.ts:
--------------------------------------------------------------------------------
1 | import { Directive, OnDestroy } from '@angular/core';
2 | import { Observable, ReplaySubject } from 'rxjs';
3 |
4 | @Directive({
5 | standalone: true,
6 | selector: '[inViewportDestroyable]',
7 | })
8 | export class DestroyableDirective implements OnDestroy {
9 | public readonly destroyed$: ObservableTesting InViewportDirective
`,
29 | {
30 | hostProps: { options: { threshold: [0, 0.5, 1], partial: false }, action: jest.fn() },
31 | providers: [
32 | MockProvider(InViewportService, {
33 | trigger$: trigger$.asObservable(),
34 | register: jest.fn(),
35 | unregister: jest.fn(),
36 | }),
37 | ],
38 | }
39 | );
40 |
41 | directive = spectator.directive;
42 | host = spectator.hostComponent as HostComponent & { action: () => void };
43 | service = spectator.inject(InViewportService);
44 | node = spectator.query('div') as HTMLDivElement;
45 | config = new Config({ threshold: [0, 0.5, 1] });
46 | });
47 |
48 | it('THEN instance should exists', () => {
49 | expect(directive).toBeTruthy();
50 | });
51 |
52 | it('THEN `register` methods from service should be called', () => {
53 | expect(service.register).toHaveBeenCalledWith(node, config);
54 | });
55 |
56 | describe('AND `trigger$` observable from service emitted partially visible value', () => {
57 | beforeEach(() =>
58 | trigger$.next({
59 | target: node,
60 | intersectionRatio: 0.5,
61 | isIntersecting: true,
62 | } as IntersectionObserverEntry)
63 | );
64 |
65 | it('THEN `action` method from host component should be called by action output', () => {
66 | expect(host.action).toHaveBeenCalledTimes(1);
67 | });
68 | });
69 |
70 | describe('AND `trigger$` observable from service emitted visible value', () => {
71 | beforeEach(() =>
72 | trigger$.next({
73 | target: node,
74 | intersectionRatio: 1,
75 | isIntersecting: true,
76 | } as IntersectionObserverEntry)
77 | );
78 |
79 | it('THEN `action` method from host component should be called by action output', () => {
80 | expect(host.action).toHaveBeenCalledTimes(1);
81 | });
82 | });
83 |
84 | describe('AND config has checkFn and `trigger$` observable from service emitted value', () => {
85 | let mockCheckFn: () => void;
86 |
87 | beforeEach(() => {
88 | mockCheckFn = jest.fn();
89 |
90 | spectator.setInput('options', { partial: true, checkFn: mockCheckFn });
91 | spectator.detectChanges();
92 |
93 | trigger$.next({
94 | target: node,
95 | intersectionRatio: 1,
96 | isIntersecting: false,
97 | } as IntersectionObserverEntry);
98 | });
99 |
100 | it('THEN `action` method from host component should be called by action output', () => {
101 | expect(host.action).toHaveBeenCalledTimes(1);
102 | });
103 |
104 | it('THEN provided `checkFn` function should be called', () => {
105 | expect(mockCheckFn).toHaveBeenCalledTimes(1);
106 | });
107 | });
108 |
109 | describe('AND directive was destroyed', () => {
110 | beforeEach(() => spectator.fixture.destroy());
111 |
112 | it('THEN `unregister` methods from service should be called', () => {
113 | expect(service.unregister).toHaveBeenCalledWith(node, config);
114 | });
115 |
116 | it('THEN `action` method from host component should be called by action output', () => {
117 | expect(host.action).toHaveBeenCalledWith({
118 | [InViewportMetadata]: { entry: undefined },
119 | target: node,
120 | visible: false,
121 | });
122 | });
123 | });
124 | });
125 |
126 | describe('WHEN directive was created on server platform', () => {
127 | beforeEach(async () => {
128 | trigger$ = new ReplaySubject(1);
129 |
130 | spectator = createDirective(
131 | `Testing InViewportDirective
`,
132 | {
133 | hostProps: { options: { threshold: [0, 0.5, 1] }, action: jest.fn() },
134 | providers: [
135 | { provide: PLATFORM_ID, useValue: 'server' },
136 | MockProvider(InViewportService, {
137 | trigger$: trigger$.asObservable(),
138 | register: jest.fn(),
139 | unregister: jest.fn(),
140 | }),
141 | ],
142 | }
143 | );
144 |
145 | directive = spectator.directive;
146 | host = spectator.hostComponent as HostComponent & { action: () => void };
147 | service = spectator.inject(InViewportService);
148 | node = spectator.query('div') as HTMLDivElement;
149 | config = new Config({
150 | root: spectator.element,
151 | rootMargin: '1px 2px 3px 4px',
152 | threshold: 1,
153 | partial: false,
154 | direction: InViewportDirection.VERTICAL,
155 | });
156 | });
157 |
158 | it('THEN instance should exists', () => {
159 | expect(directive).toBeTruthy();
160 | });
161 |
162 | it('THEN `register` methods from service should be called', () => {
163 | expect(service.register).not.toHaveBeenCalled();
164 | });
165 |
166 | it('THEN `action` method from host component should be called by action output', () => {
167 | expect(host.action).toHaveBeenCalledWith({
168 | [InViewportMetadata]: { entry: undefined },
169 | target: node,
170 | visible: true,
171 | });
172 | });
173 |
174 | describe('AND directive was destroyed', () => {
175 | beforeEach(() => spectator.fixture.destroy());
176 |
177 | it('THEN `unregister` methods from service should be called', () => {
178 | expect(service.unregister).not.toHaveBeenCalled();
179 | });
180 |
181 | it('THEN `action` method from host component should be called by action output', () => {
182 | expect(host.action).not.toHaveBeenCalledWith({
183 | [InViewportMetadata]: { entry: undefined },
184 | target: node,
185 | visible: false,
186 | });
187 | });
188 | });
189 | });
190 | });
191 |
--------------------------------------------------------------------------------
/projects/ng-in-viewport/src/lib/directives/in-viewport.directive.ts:
--------------------------------------------------------------------------------
1 | import { isPlatformBrowser } from '@angular/common';
2 | import {
3 | AfterViewInit,
4 | ChangeDetectorRef,
5 | Directive,
6 | ElementRef,
7 | EventEmitter,
8 | Input,
9 | OnDestroy,
10 | Output,
11 | PLATFORM_ID,
12 | inject,
13 | } from '@angular/core';
14 | import { filter, takeUntil } from 'rxjs/operators';
15 |
16 | import { InViewportService } from '../services';
17 | import { Config } from '../values';
18 |
19 | import { DestroyableDirective } from './destroyable.directive';
20 |
21 | export const InViewportMetadata = Symbol('InViewportMetadata');
22 |
23 | export interface InViewportAction {
24 | [InViewportMetadata]: { entry?: IntersectionObserverEntry };
25 | target: HTMLElement | SVGElement | Element;
26 | visible: boolean;
27 | }
28 |
29 | export type InViewportOptions = Partial