docs: add section on binding to passive events (#42292)

fixes #41622

PR Close #42292
This commit is contained in:
David Shevitz 2021-05-24 22:33:44 +00:00 committed by Zach Arend
parent de8a6ae9ed
commit bd51762d6e
1 changed files with 20 additions and 0 deletions

View File

@ -24,6 +24,26 @@ The event binding listens for the button's click events and calls the component'
<img src='generated/images/guide/template-syntax/syntax-diagram.svg' alt="Syntax diagram"> <img src='generated/images/guide/template-syntax/syntax-diagram.svg' alt="Syntax diagram">
</div> </div>
## Binding to passive events
Angular also supports passive event listeners. For example, you can use the following steps to make a scroll event passive.
1. Create a file `zone-flags.ts` under `src` directory.
2. Add the following line into this file.
```
(window as any)['__zone_symbol__PASSIVE_EVENTS'] = ['scroll'];
```
3. In the `src/polyfills.ts` file, before importing zone.js, import the newly created `zone-flags`.
```
import './zone-flags';
import 'zone.js'; // Included with Angular CLI.
```
After those steps, if you add event listeners for the `scroll` event, the listeners will be `passive`.
## Custom events with `EventEmitter` ## Custom events with `EventEmitter`
[Directives](guide/built-in-directives) typically raise custom events with an Angular [EventEmitter](api/core/EventEmitter) as follows. [Directives](guide/built-in-directives) typically raise custom events with an Angular [EventEmitter](api/core/EventEmitter) as follows.