Skip to content

Commit bd51762

Browse files
David Shevitzzarend
authored andcommitted
docs: add section on binding to passive events (angular#42292)
fixes angular#41622 PR Close angular#42292
1 parent de8a6ae commit bd51762

File tree

1 file changed

+20
-0
lines changed

1 file changed

+20
-0
lines changed

aio/content/guide/event-binding.md

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,26 @@ The event binding listens for the button's click events and calls the component'
2424
<img src='generated/images/guide/template-syntax/syntax-diagram.svg' alt="Syntax diagram">
2525
</div>
2626

27+
## Binding to passive events
28+
29+
Angular also supports passive event listeners. For example, you can use the following steps to make a scroll event passive.
30+
31+
1. Create a file `zone-flags.ts` under `src` directory.
32+
2. Add the following line into this file.
33+
34+
```
35+
(window as any)['__zone_symbol__PASSIVE_EVENTS'] = ['scroll'];
36+
```
37+
38+
3. In the `src/polyfills.ts` file, before importing zone.js, import the newly created `zone-flags`.
39+
40+
```
41+
import './zone-flags';
42+
import 'zone.js'; // Included with Angular CLI.
43+
```
44+
45+
After those steps, if you add event listeners for the `scroll` event, the listeners will be `passive`.
46+
2747
## Custom events with `EventEmitter`
2848

2949
[Directives](guide/built-in-directives) typically raise custom events with an Angular [EventEmitter](api/core/EventEmitter) as follows.

0 commit comments

Comments
 (0)