Skip to content

Commit 68df976

Browse files
crisbetoAndrewKushnir
authored andcommitted
docs: mention new viewport trigger syntax in docs (angular#64130)
Updates the docs to mention the new options for the `viewport` trigger. PR Close angular#64130
1 parent ad23764 commit 68df976

File tree

1 file changed

+18
-0
lines changed
  • adev/src/content/guide/templates

1 file changed

+18
-0
lines changed

adev/src/content/guide/templates/defer.md

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -177,6 +177,24 @@ Alternatively, you can specify a [template reference variable](/guide/templates/
177177
}
178178
```
179179

180+
If you want to customize the options of the `IntersectionObserver`, the `viewport` trigger supports passing in an object literal. The literal supports all properties from the second parameter of `IntersectionObserver`, except for `root`. When using the object literal notation, you have to pass your trigger using the `trigger` property.
181+
182+
```angular-html
183+
<div #greeting>Hello!</div>
184+
185+
<!-- With options and a trigger -->
186+
@defer (on viewport({trigger: greeting, rootMargin: '100px', threshold: 0.5})) {
187+
<greetings-cmp />
188+
}
189+
190+
<!-- With options and an implied trigger -->
191+
@defer (on viewport({rootMargin: '100px', threshold: 0.5})) {
192+
<greetings-cmp />
193+
} @placeholder {
194+
<div>Implied trigger</div>
195+
}
196+
```
197+
180198
#### `interaction`
181199

182200
The `interaction` trigger loads the deferred content when the user interacts with the specified element through `click` or `keydown` events.

0 commit comments

Comments
 (0)