angular/aio/content/guide/migration-dynamic-flag.md
Joe Martin (Crowdstaffing) 42289f25c6 docs: improve markdown (#45325)
The purpose of the changes is to clean all markdown to match a single pedantic style.

*   To ensure all changes in style are properly separated.
*   To ensure all styled content aligns to nearest 4-character-tab.
*   To ensure all code blocks use the Angular `<code-example>` or `<code-tab>` elements.
*   To ensure all markdown exists outside of html tags.
*   To ensure all images use the Angular style for `<img>` elements.
*   To ensure that all smart punctuation is replaced or removed.

    ```text
    ’, ’, “, ”, –, —, …
    ```

*   To ensure all content does not conflict with the following reserved characters.

    ```text
    @, $, *, &, #, |, <, >,
    ```

*   To ensure all content displays using html entities.

The following changes were made to files in the following directory.

```text
aio/content
```

The target files were markdown files.
The list of excluded files:

```text
.browserslistrc, .css, .conf, .editorconfig, .gitignore, .html, .js, .json, .sh, .svg, .ts, .txt, .xlf,
```

PR Close #45325
2022-04-08 19:36:30 +00:00

4.4 KiB

Dynamic queries flag migration

What does this migration do?

In Angular version 8, a schematic added static flags to all @ViewChild() and @ContentChild() queries. This was the first step towards changing the default behavior. With version 9, the default value changes to static: false and the flag becomes optional.

This schematic scans classes in the compilation and for each class, checks if the members have a @ViewChild() or @ContentChild() query with the static flag set to false. If so, the schematic removes the flag, as it now matches the default.

Before:

@ViewChild('foo', {static: false}) foo: ElementRef;

@ViewChild('bar', {static: true}) bar: ElementRef;

After:

@ViewChild('foo') foo: ElementRef;

// this query doesn't change because the static value is true @ViewChild('bar', {static: true}) bar: ElementRef;

NOTE:
The flag is not supported in @ViewChildren() or @ContentChildren() queries, so the schematic will not check these properties.


Why is this migration necessary?

This schematic performs a code cleanup to remove static flags that match the default, as they are no longer necessary. Functionally, the code change should be a noop.

Versions Details
Before version 9 Angular figured out the static or dynamic nature of a query automatically, based on how the template was written. Looking at templates in this way, however, caused buggy and surprising behavior see more about that in the [Static Query Migration Guide](guide/static-query-migration#what-does-this-flag-mean).
As of version 9 Angular uses dynamic queries `static: false` by default, which simplifies queries. Developers can still explicitly set a query to static: true if necessary.

What is the difference between static and dynamic queries?

The static option for @ViewChild() and @ContentChild() queries determines when the query results become available.

Queries Details
Static queries `static: true` The query resolves once the view has been created, but before change detection runs. The result, though, will never be updated to reflect changes to your view, such as changes to ngIf and ngFor blocks.
Dynamic queries `static: false` The query resolves after either ngAfterViewInit() or ngAfterContentInit() for @ViewChild() and @ContentChild() respectively. The result will be updated for changes to your view, such as changes to ngIf and ngFor blocks.

For more information, see the following entries in the Static Query Migration Guide:

What does this mean for libraries?

In order to support applications that are still running with version 8, the safest option for libraries is to retain the static flag to keep the resolution timing consistent.

Library and application combination Details
Libraries on version 9 with applications running version 8 The schematic won't run on libraries. As long as libraries retain their static flags from version 8, they should work with apps on 8.
Libraries on version 8 with applications running version 9 Libraries will have explicit flags defined. The behavior with explicit flags has not changed.

What about applications using non-migrated libraries?

Because this is a code cleanup that is a noop, non-migrated libraries will work the same either way.

@reviewed 2022-02-28