Skip to content

Commit be723a3

Browse files
ricardochlSplaktar
authored andcommitted
chore: update origin to V17.3.4
1 parent 7542c0e commit be723a3

File tree

158 files changed

+2621
-1699
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

158 files changed

+2621
-1699
lines changed

adev-es/src/app/sub-navigation-data.ts

Lines changed: 202 additions & 169 deletions
Large diffs are not rendered by default.

adev-es/src/content/best-practices/a11y.md

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -17,16 +17,16 @@ Use attribute binding template syntax to control the values of accessibility-rel
1717
When binding to ARIA attributes in Angular, you must use the `attr.` prefix. The ARIA specification depends specifically on HTML attributes rather than properties of DOM elements.
1818

1919
<docs-code language="html">
20-
&lt;!-- Use attr. when binding to an ARIA attribute --&gt;
21-
&lt;button [attr.aria-label]="myActionLabel"&gt;&hellip;&lt;/button&gt;
20+
<!-- Use attr. when binding to an ARIA attribute -->
21+
<button [attr.aria-label]="myActionLabel">…</button>
2222
</docs-code>
2323

2424
Note: This syntax is only necessary for attribute *bindings*.
2525
Static ARIA attributes require no extra syntax.
2626

2727
<docs-code language="html">
28-
&lt;!-- Static ARIA attributes require no extra syntax --&gt;
29-
&lt;button aria-label="Save document"&gt;&hellip;&lt;/button&gt;
28+
<!-- Static ARIA attributes require no extra syntax -->
29+
<button aria-label="Save document">…</button>
3030
</docs-code>
3131

3232
HELPFUL: By convention, HTML attributes use lowercase names \(`tabindex`\), while properties use camelCase names \(`tabIndex`\).
@@ -77,14 +77,14 @@ The following example shows how to make a progress bar accessible by using host
7777
* In the template, the `aria-label` attribute ensures that the control is accessible to screen readers.
7878

7979
<docs-code-multifile
80-
path="accessibility/src/app/app.component.ts"
80+
path="adev/src/content/examples/accessibility/src/app/app.component.ts"
8181
preview>
8282
<docs-code
83-
path="accessibility/src/app/progress-bar.component.ts"
83+
path="adev/src/content/examples/accessibility/src/app/progress-bar.component.ts"
8484
linenums
8585
highlight="[12, 20]"/>
8686
<docs-code
87-
path="accessibility/src/app/app.component.html"
87+
path="adev/src/content/examples/accessibility/src/app/app.component.html"
8888
linenums
8989
highlight="[8, 9]"/>
9090
</docs-code-multifile>
@@ -103,8 +103,8 @@ The following example shows how to find and focus the main content header in the
103103

104104
<docs-code language="typescript">
105105

106-
router.events.pipe(filter(e =&gt; e instanceof NavigationEnd)).subscribe(() =&gt; {
107-
const mainHeader = document.querySelector('&num;main-content-header')
106+
router.events.pipe(filter(e => e instanceof NavigationEnd)).subscribe(() => {
107+
const mainHeader = document.querySelector('#main-content-header')
108108
if (mainHeader) {
109109
mainHeader.focus();
110110
}

adev-es/src/content/best-practices/runtime-performance/skipping-subtrees.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -59,7 +59,7 @@ If Angular handles an event within a component with OnPush strategy, the framewo
5959

6060
As an example, if Angular handles an event within `MainComponent`, the framework will run change detection in the entire component tree. Angular will ignore the subtree with root `LoginComponent` because it has `OnPush` and the event happened outside of its scope.
6161

62-
<img alt="Change detection propagation from OnPush component" src="assets/content/images/best-practices/runtime-performance/on-push-trigger.svg">
62+
<img alt="Change detection propagation from OnPush component" src="assets/images/best-practices/runtime-performance/on-push-trigger.svg">
6363

6464
```mermaid
6565
graph TD;

adev-es/src/content/best-practices/runtime-performance/slow-computations.md

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ A single slow computation within a template or a lifecycle hook can slow down th
1010

1111
You can identify heavy computations with Angular DevTools’ profiler. In the performance timeline, click a bar to preview a particular change detection cycle. This displays a bar chart, which shows how long the framework spent in change detection for each component. When you click a component, you can preview how long Angular spent evaluating its template and lifecycle hooks.
1212

13-
<img alt="Angular DevTools profiler preview showing slow computation" src="assets/content/images/best-practices/runtime-performance/slow-computations.png">
13+
<img alt="Angular DevTools profiler preview showing slow computation" src="assets/images/best-practices/runtime-performance/slow-computations.png">
1414

1515
For example, in the preceding screenshot, the second recorded change detection cycle is selected. Angular spent over 573 ms on this cycle, with the most time spent in the `EmployeeListComponent`. In the details panel, you can see that Angular spent over 297 ms evaluating the template of the `EmployeeListComponent`.
1616

adev-es/src/content/best-practices/runtime-performance/zone-pollution.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,13 +13,13 @@ This section covers how to identify such conditions, and how to run code outside
1313

1414
You can detect unnecessary change detection calls using Angular DevTools. Often they appear as consecutive bars in the profiler’s timeline with source `setTimeout`, `setInterval`, `requestAnimationFrame`, or an event handler. When you have limited calls within your application of these APIs, the change detection invocation is usually caused by a third-party library.
1515

16-
<img alt="Angular DevTools profiler preview showing Zone pollution" src="assets/content/images/best-practices/runtime-performance/zone-pollution.png">
16+
<img alt="Angular DevTools profiler preview showing Zone pollution" src="assets/images/best-practices/runtime-performance/zone-pollution.png">
1717

1818
In the image above, there is a series of change detection calls triggered by event handlers associated with an element. That’s a common challenge when using third-party, non-native Angular components, which do not alter the default behavior of `NgZone`.
1919

2020
## Run tasks outside `NgZone`
2121

22-
In such cases, you can instruct Angular to avoid calling change detection for tasks scheduled by a given piece of code using [NgZone](/guide/zone).
22+
In such cases, you can instruct Angular to avoid calling change detection for tasks scheduled by a given piece of code using [NgZone](/api/core/NgZone).
2323

2424
<docs-code header="Run outside of the Zone" language='ts' linenums>
2525
import { Component, NgZone, OnInit } from '@angular/core';

0 commit comments

Comments
 (0)