mirror of
https://github.com/angular/angular.git
synced 2026-09-14 13:54:52 +08:00
Shuaib Hasan Akib
21eed5f8d4
Replace broken link with inline code formatting. The link was pointing to the page itself, as no dedicated block concept page exists at that URL. corrects 'everytime' to 'every time'. Update tools/manual_api_docs/blocks/let.md Co-authored-by: Matthieu Riegler <kyro38@gmail.com>
64 lines
2.6 KiB
Markdown
64 lines
2.6 KiB
Markdown
The `@defer` block can be used to lazy load components,
|
|
directives and pipes used inside a component template.
|
|
|
|
## Syntax
|
|
|
|
```angular-html
|
|
@defer (on <trigger>; when <condition>; prefetch on <trigger>; prefetch when <condition>) {
|
|
<!-- deferred template fragment -->
|
|
<calendar-cmp />
|
|
} @placeholder (minimum? <duration>) {
|
|
<!-- placeholder template fragment -->
|
|
<p>Placeholder</p>
|
|
} @loading (minimum? <duration>; after? <duration>) {
|
|
<!-- loading template fragment -->
|
|
<img alt="loading image" src="loading.gif" />
|
|
} @error {
|
|
<!-- error template fragment -->
|
|
<p>An loading error occurred</p>
|
|
}
|
|
```
|
|
|
|
## Description
|
|
|
|
### Blocks
|
|
|
|
Supported sections of a defer block. Note: only the @defer block template fragment is deferred
|
|
loaded. The remaining optional blocks are eagerly loaded.
|
|
|
|
| block | Description |
|
|
| -------------- | -------------------------------------------------------- |
|
|
| `@defer` | The defer loaded block of content |
|
|
| `@placeholder` | Content shown prior to defer loading (Optional) |
|
|
| `@loading` | Content shown during defer loading (Optional) |
|
|
| `@error` | Content shown when defer loading errors occur (Optional) |
|
|
|
|
<h3>Triggers</h3>
|
|
|
|
Triggers provide conditions for when defer loading occurs. Some allow a template reference variable
|
|
as an optional parameter. Separate multiple triggers with a semicolon.
|
|
|
|
| trigger | Triggers... |
|
|
| ------------------------------- | --------------------------------------------- |
|
|
| `on idle(<timeout>?)` | when the browser reports idle state (default) |
|
|
| `on viewport(<elementRef>?)` | when the element enters the viewport |
|
|
| `on interaction(<elementRef>?)` | when clicked, touched, or focused |
|
|
| `on hover(<elementRef>?)` | when element has been hovered |
|
|
| `on immediate` | when the page finishes rendering |
|
|
| `on timer(<duration>)` | after a specific timeout |
|
|
| `when <condition>` | on a custom condition |
|
|
|
|
<h2>Prefetch</h2>
|
|
|
|
Configures prefetching of the defer block used in the `@defer` parameters, but does not affect
|
|
rendering. Rendering is handled by the standard `on` and `when` conditions. Separate multiple
|
|
prefetch configurations with a semicolon.
|
|
|
|
```angular-html
|
|
@defer (prefetch on <trigger>; prefetch when <condition>) {
|
|
<!-- deferred template fragment -->
|
|
}
|
|
```
|
|
|
|
HELPFUL: Learn more in the [defer loading guide](/guide/templates/defer).
|