mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
c09f5352f6
The list of valid links is generated from navigation data configuration in the ADEV app. Redirections are knowingly exclude so we stop referencing them.
63 lines
2.6 KiB
Markdown
63 lines
2.6 KiB
Markdown
A type of [block](api/core/@defer) that can be used to defer load the JavaScript for 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` | 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 -->
|
|
}
|
|
```
|
|
|
|
Learn more in the [defer loading guide](/guide/templates/defer).
|