Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 40b657b

Browse files
authored
docs(guide/filters): clarify when filters are executed
Closes #14590 PR (#14758)
1 parent 356e6b1 commit 40b657b

File tree

1 file changed

+19
-3
lines changed

1 file changed

+19
-3
lines changed

docs/content/guide/filter.ngdoc

Lines changed: 19 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,21 @@ Filters may have arguments. The syntax for this is
3131
E.g. the markup `{{ 1234 | number:2 }}` formats the number 1234 with 2 decimal points using the
3232
{@link ng.filter:number `number`} filter. The resulting value is `1,234.00`.
3333

34+
### When filters are executed
35+
36+
In templates, filters are only executed when their inputs have changed. This is more performant than executing
37+
a filter on each {@link ng.$rootScope.Scope#$digest `$digest`} as is the case with {@link guide/expression expressions}.
38+
39+
There are two exceptions to this rule:
40+
41+
1. In general, this applies only to filters that take [primitive values](https://developer.mozilla.org/docs/Glossary/Primitive)
42+
as inputs. Filters that receive [Objects](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Data_structures#Objects)
43+
as input are executed on each `$digest`, as it would be too costly to track if the inputs have changed.
44+
45+
2. Filters that are marked as `$stateful` are also executed on each $digest.
46+
See {@link guide/filter#stateful-filters Stateful filters} for more information. Note that no Angular
47+
core filters are $stateful.
48+
3449

3550
## Using filters in controllers, services, and directives
3651

@@ -93,8 +108,9 @@ as the first argument. Any filter arguments are passed in as additional argument
93108
function.
94109

95110
The filter function should be a [pure function](http://en.wikipedia.org/wiki/Pure_function), which
96-
means that it should be stateless and idempotent. Angular relies on these properties and executes
97-
the filter only when the inputs to the function change.
111+
means that it should be stateless and idempotent, and not rely for example on other Angular services.
112+
Angular relies on this contract and will by default execute a filter only when the inputs to the function change.
113+
{@link guide/filter#stateful-filters Stateful filters} are possible, but less performant.
98114

99115
<div class="alert alert-warning">
100116
**Note:** Filter names must be valid angular {@link expression} identifiers, such as `uppercase` or `orderBy`.
@@ -141,7 +157,7 @@ text upper-case.
141157
</example>
142158

143159

144-
## Stateful filters
160+
### Stateful filters
145161

146162
It is strongly discouraged to write filters that are stateful, because the execution of those can't
147163
be optimized by Angular, which often leads to performance issues. Many stateful filters can be

0 commit comments

Comments
 (0)