From bd51762d6ea96c93c4f9cba8b4fb47da4b0c18ae Mon Sep 17 00:00:00 2001
From: David Shevitz <dshevitz@google.com>
Date: Mon, 24 May 2021 22:33:44 +0000
Subject: [PATCH] docs: add section on binding to passive events (#42292)

fixes #41622

PR Close #42292
---
 aio/content/guide/event-binding.md | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/aio/content/guide/event-binding.md b/aio/content/guide/event-binding.md
index 2d2c91fb3c..b292d904bf 100644
--- a/aio/content/guide/event-binding.md
+++ b/aio/content/guide/event-binding.md
@@ -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">
 </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`
 
 [Directives](guide/built-in-directives) typically raise custom events with an Angular [EventEmitter](api/core/EventEmitter) as follows.