Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 9267ff0

Browse filesBrowse files
bencodezenAndrewKushnir
bencodezen
authored and
AndrewKushnir
committed
docs: update phrasing and fix code snippet (#62031)
docs: improve phrasing on required Co-authored-by: Matthieu Riegler <kyro38@gmail.com> refactor: remove standalone flag docs: remove unnecessary standalone in tutorial code PR Close #62031
1 parent fdeb193 commit 9267ff0
Copy full SHA for 9267ff0

File tree

Expand file treeCollapse file tree

42 files changed

+580
-2654
lines changed
Filter options

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.
Dismiss banner
Expand file treeCollapse file tree

42 files changed

+580
-2654
lines changed

‎adev/src/content/tutorials/first-app/common/package-lock.json

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/common/package-lock.json
+458-2,502Lines changed: 458 additions & 2502 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎adev/src/content/tutorials/first-app/common/package.json

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/common/package.json
-12Lines changed: 0 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,6 @@
99
},
1010
"private": true,
1111
"dependencies": {
12-
"@angular/animations": "^20.1.0-next",
1312
"@angular/common": "^20.1.0-next",
1413
"@angular/compiler": "^20.1.0-next",
1514
"@angular/core": "^20.1.0-next",
@@ -24,18 +23,7 @@
2423
"@angular/build": "^20.1.0-next",
2524
"@angular/cli": "^20.1.0-next",
2625
"@angular/compiler-cli": "^20.1.0-next",
27-
"@types/jasmine": "~5.1.0",
2826
"@types/node": "^16.11.35",
29-
"copyfiles": "^2.4.1",
30-
"jasmine-core": "~5.8.0",
31-
"jasmine-marbles": "~0.9.2",
32-
"jasmine-spec-reporter": "~7.0.0",
33-
"karma": "~6.4.0",
34-
"karma-chrome-launcher": "~3.2.0",
35-
"karma-coverage": "~2.2.0",
36-
"karma-jasmine": "~5.1.0",
37-
"karma-jasmine-html-reporter": "~2.1.0",
38-
"protractor": "~7.0.0",
3927
"ts-node": "~10.9.0",
4028
"typescript": "~5.8.0"
4129
}

‎adev/src/content/tutorials/first-app/intro/config.json

Copy file name to clipboard
+1-2Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
{
22
"title": "Your first Angular app",
33
"type": "editor",
4-
"src": "../steps/14-http/src",
5-
"nextTutorial": "learn-angular",
4+
"nextTutorial": "first-app",
65
"openFiles": ["src/app/app.ts"]
76
}

‎adev/src/content/tutorials/first-app/intro/src/app/app.ts

Copy file name to clipboard
+9Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import {Component} from '@angular/core';
2+
3+
@Component({
4+
selector: 'app-root',
5+
template: `
6+
Welcome to Angular!
7+
`,
8+
})
9+
export class App {}

‎adev/src/content/tutorials/first-app/steps/02-Home/README.md

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/02-Home/README.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -100,7 +100,7 @@ In the **Edit** pane of your IDE:
100100
1. In the `first-app` directory, open `home.ts` in the editor.
101101
1. In `home.ts`, in `@Component`, update the `template` property with this code.
102102

103-
<docs-code header="Replace in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts" visibleLines="[7,14]"/>
103+
<docs-code header="Replace in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts" visibleLines="[5,12]"/>
104104

105105
1. Next, open `home.css` in the editor and update the content with these styles.
106106

‎adev/src/content/tutorials/first-app/steps/03-HousingLocation/README.md

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/03-HousingLocation/README.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -47,7 +47,7 @@ In the **Edit** pane of your IDE:
4747
1. Open `home.ts` in the editor.
4848
1. In `home.ts`, import `HousingLocation` by adding this line to the file level imports.
4949

50-
<docs-code header="Import HousingLocation in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[3]"/>
50+
<docs-code header="Import HousingLocation in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts" visibleLines="[2]"/>
5151

5252
1. Next update the `imports` property of the `@Component` metadata by adding `HousingLocation` to the array.
5353

‎adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/03-HousingLocation/src/app/home/home.ts
-2Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import {Component} from '@angular/core';
2-
import {CommonModule} from '@angular/common';
32

43
@Component({
54
selector: 'app-home',
6-
imports: [CommonModule],
75
template: `
86
<section>
97
<form>

‎adev/src/content/tutorials/first-app/steps/04-interfaces/README.md

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/04-interfaces/README.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -66,15 +66,15 @@ There are a few more lessons to complete before that happens.
6666
1. In the **Edit** pane of your IDE, open `src/app/home/home.ts`.
6767
1. In `src/app/home/home.ts`, add this import statement after the existing `import` statements so that `Home` can use the new interface.
6868

69-
<docs-code header="Import Home in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[4]"/>
69+
<docs-code header="Import Home in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[3]"/>
7070

7171
1. In `src/app/home/home.ts`, replace the empty `export class Home {}` definition with this code to create a single instance of the new interface in the component.
7272

7373
<docs-code header="Add sample data to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[22,35]"/>
7474

7575
1. Confirm that your `home.ts` file matches this example.
7676

77-
<docs-code header="src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[1,36]" />
77+
<docs-code header="src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts" visibleLines="[[1,7],[9,36]]" />
7878

7979
By adding the `housingLocation` property of type `HousingLocation` to the `Home` class, we're able to confirm that the data matches the description of the interface. If the data didn't satisfy the description of the interface, the IDE has enough information to give us helpful errors.
8080

‎adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/home/home.ts
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
import {Component} from '@angular/core';
2-
import {CommonModule} from '@angular/common';
32
import {HousingLocation} from '../housing-location/housing-location';
3+
44
@Component({
55
selector: 'app-home',
6-
imports: [CommonModule, HousingLocation],
6+
imports: [HousingLocation],
77
template: `
88
<section>
99
<form>

‎adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/housing-location/housing-location.ts

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/04-interfaces/src/app/housing-location/housing-location.ts
-2Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import {Component} from '@angular/core';
2-
import {CommonModule} from '@angular/common';
32

43
@Component({
54
selector: 'app-housing-location',
6-
imports: [CommonModule],
75
template: `
86
<p>housing-location works!</p>
97
`,

‎adev/src/content/tutorials/first-app/steps/05-inputs/README.md

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/05-inputs/README.md
+16-14Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -4,41 +4,43 @@ This tutorial lesson demonstrates how to create a component `input` and use it t
44

55
<docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=WvRGFSkW_7_zDIFD&amp;start=241"/>
66

7+
NOTE: This video reflects an older syntax, but the main concepts remain valid.
8+
79
## What you'll learn
10+
811
Your app's `HousingLocation` template has a `HousingLocation` property to receive input.
912

1013
## Conceptual preview of Inputs
1114

12-
[Inputs](api/core/input) allow components to share data. The direction of the data sharing is from parent component to child component.
15+
[Inputs](api/core/input) allow components to specify data that can be passed to it from a parent component.
1316

14-
In this lesson, you'll define an `input` property in the `HousingLocation` component which will enable you to customize the data displayed in the component.
17+
In this lesson, you'll define an `input` property in the `HousingLocation` component that enables you to customize the data displayed in the component.
1518

1619
Learn more in the [Accepting data with input properties](guide/components/inputs) and [Custom events with outputs](guide/components/outputs) guides.
1720

1821
<docs-workflow>
1922

2023
<docs-step title="Import the input() function">
21-
This step imports the `input()` function into the class.
22-
23-
In the code editor:
24-
25-
1. Navigate to `src/app/housing-location/housing-location.ts`
26-
1. Update the file imports to include `input` and `HousingLocation`:
24+
In the code editor, import the `input` helper method from `@angular/core` and the `HousingLocation` component.
2725

28-
<docs-code header="Import HousingLocation and Input in src/app/housing-location/housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[1,3]"/>
26+
<docs-code header="Import HousingLocation and Input in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[1]"/>
2927

3028
</docs-step>
3129

3230
<docs-step title="Add the Input property">
33-
1. In the same file, add a property called `housingLocation` and initialize it using `input.required()` with the type `HousingLocationInfo`. To set the type, use a generic parameter, by writing <code>&lt;HousingLocationInfo&gt;</code> immediately after <code>.required</code>:
31+
Add a required property called `housingLocation` and initialize it using `input.required()` with the type `HousingLocationInfo`.
3432

35-
<docs-code header="Import HousingLocation and Input in src/app/housing-location/housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[13,15]"/>
33+
<docs-code header="Declare the input property in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts" visibleLines="[12]"/>
34+
35+
You have to invoked the `required` method on `input` to indicate that the parent component must provide a value. In our example application, we know this value will always be passed in — this is by design. The `.required()` call ensures that the TypeScript compiler enforces this and treats the property as non-nullable when this component is used in a template.
36+
37+
</docs-step>
3638

37-
You have to add `.required` after `input` to indicate that the parent component must provide a value. In our example application, we know this value will always be passed in — this is by design. The `.required()` call ensures that the TypeScript compiler enforces this and treats the property as non-nullable when this component is used in a template.
39+
<docs-step title="Pass data to the input">
40+
Send the `housingLocation` value from the `Home` component to the `housingLocation` property of the HousingLocation component.
3841

39-
1. Save your changes and confirm the app does not have any errors.
42+
<docs-code header="Declare the input property in housing-location.ts" path="adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/home/home.ts" visibleLines="[16]"/>
4043

41-
1. Correct any errors before you continue to the next step.
4244
</docs-step>
4345

4446
</docs-workflow>

‎adev/src/content/tutorials/first-app/steps/05-inputs/config.json

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/05-inputs/config.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,5 @@
33
"type": "editor",
44
"answerSrc": "../06-property-binding/src",
55
"answerRootDir": "../06-property-binding/",
6-
"openFiles": ["src/app/housing-location/housing-location.ts"]
6+
"openFiles": ["src/app/housing-location/housing-location.ts", "src/app/home/home.ts","src/app/housinglocations.ts"]
77
}

‎adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/05-inputs/src/app/home/home.ts
+2-3Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import {Component} from '@angular/core';
2-
import {CommonModule} from '@angular/common';
32
import {HousingLocation} from '../housing-location/housing-location';
43
import {HousingLocationInfo} from '../housinglocation';
54

65
@Component({
76
selector: 'app-home',
8-
imports: [CommonModule, HousingLocation],
7+
imports: [HousingLocation],
98
template: `
109
<section>
1110
<form>
@@ -22,7 +21,7 @@ import {HousingLocationInfo} from '../housinglocation';
2221
export class Home {
2322
readonly baseUrl = 'https://angular.dev/assets/images/tutorials/common';
2423

25-
housingLocation: HousingLocation = {
24+
housingLocation: HousingLocationInfo = {
2625
id: 9999,
2726
name: 'Test Home',
2827
city: 'Test city',

‎adev/src/content/tutorials/first-app/steps/05-inputs/src/app/housing-location/housing-location.ts

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/05-inputs/src/app/housing-location/housing-location.ts
-2Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
11
import {Component} from '@angular/core';
2-
import {CommonModule} from '@angular/common';
32

43
@Component({
54
selector: 'app-housing-location',
6-
imports: [CommonModule],
75
template: `
86
<p>housing-location works!</p>
97
`,

‎adev/src/content/tutorials/first-app/steps/06-property-binding/README.md

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/06-property-binding/README.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ In the code editor:
2626

2727
1. Navigate to `src/app/home/home.ts`
2828
1. In the template property of the `@Component` decorator, update the code to match the code below:
29-
<docs-code header="Add housingLocation property binding" path="adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/home/home.ts" visibleLines="[17,19]"/>
29+
<docs-code header="Add housingLocation property binding" path="adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/home/home.ts" visibleLines="[15,17]"/>
3030

3131
When adding a property binding to a component tag, we use the `[attribute] = "value"` syntax to notify Angular that the assigned value should be treated as a property from the component class and not a string value.
3232

‎adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/home/home.ts

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/home/home.ts
+2-3Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import {Component} from '@angular/core';
2-
import {CommonModule} from '@angular/common';
32
import {HousingLocation} from '../housing-location/housing-location';
43
import {HousingLocationInfo} from '../housinglocation';
54

65
@Component({
76
selector: 'app-home',
8-
imports: [CommonModule, HousingLocation],
7+
imports: [HousingLocation],
98
template: `
109
<section>
1110
<form>
@@ -14,7 +13,7 @@ import {HousingLocationInfo} from '../housinglocation';
1413
</form>
1514
</section>
1615
<section class="results">
17-
<app-housing-location></app-housing-location>
16+
<app-housing-location [housingLocation]="housingLocation"/>
1817
</section>
1918
`,
2019
styleUrls: ['./home.css'],

‎adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/06-property-binding/src/app/housing-location/housing-location.ts
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
import {Component, input} from '@angular/core';
22
import {HousingLocationInfo} from '../housinglocation';
3+
34
@Component({
45
selector: 'app-housing-location',
5-
imports: [],
66
template: `
77
<p>housing-location works!</p>
88
`,

‎adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/README.md
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ In the code editor:
2727
1. Navigate to `src/app/housing-location/housing-location.ts`
2828
1. In the template property of the `@Component` decorator, replace the existing HTML markup with the following code:
2929

30-
<docs-code header="Update HousingLocation template" path="adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/housing-location/housing-location.ts" visibleLines="[9,20]"/>
30+
<docs-code header="Update HousingLocation template" path="adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/housing-location/housing-location.ts" visibleLines="[6,17]"/>
3131

3232
In this updated template code you have used property binding to bind the `housingLocation.photo` to the `src` attribute. The `alt` attribute uses interpolation to give more context to the alt text of the image.
3333

‎adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/home/home.ts

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/home/home.ts
+1-2Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import {Component} from '@angular/core';
2-
import {CommonModule} from '@angular/common';
32
import {HousingLocation} from '../housing-location/housing-location';
43
import {HousingLocationInfo} from '../housinglocation';
54

65
@Component({
76
selector: 'app-home',
8-
imports: [CommonModule, HousingLocation],
7+
imports: [HousingLocation],
98
template: `
109
<section>
1110
<form>

‎adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/housing-location/housing-location.ts

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/07-dynamic-template-values/src/app/housing-location/housing-location.ts
-1Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import {HousingLocationInfo} from '../housinglocation';
33

44
@Component({
55
selector: 'app-housing-location',
6-
imports: [],
76
template: `
87
<p>housing-location works!</p>
98
`,

‎adev/src/content/tutorials/first-app/steps/08-ngFor/README.md

Copy file name to clipboard
+17-17Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,23 @@
1-
# Use *ngFor to list objects in component
1+
# Use @for to list objects in component
22

3-
This tutorial lesson demonstrates how to use `ngFor` directive in Angular templates in order to display dynamically repeated data in a template.
3+
This tutorial lesson demonstrates how to use `@for` block in Angular templates in order to display dynamically repeated data in a template.
44

55
<docs-video src="https://www.youtube.com/embed/eM3zi_n7lNs?si=MIl5NcRxvcLjYt5f&amp;start=477"/>
66

7+
NOTE: This video reflects an older syntax, but the main concepts remain valid.
8+
79
## What you'll learn
810

911
* You will have added a data set to the app
10-
* Your app will display a list of elements from the new data set using `ngFor`
12+
* Your app will display a list of elements from the new data set using `@for`
1113

12-
## Conceptual preview of ngFor
14+
## Conceptual preview of `@for`
1315

14-
In Angular, `ngFor` is a specific type of [directive](guide/directives) used to dynamically repeat data in a template. In plain JavaScript you would use a for loop - ngFor provides similar functionality for Angular templates.
16+
In Angular, `@for` is a specific type of [control flow block](/guide/templates/control-flow) used to dynamically repeat data in a template. In plain JavaScript you would use a for loop - `@for` provides similar functionality for Angular templates.
1517

16-
You can utilize `ngFor` to iterate over arrays and even asynchronous values. In this lesson, you'll add a new array of data to iterate over.
18+
You can utilize `@for` to iterate over arrays and even asynchronous values. In this lesson, you'll add a new array of data to iterate over.
1719

18-
For a more in depth explanation, please refer to the [Built-in directives](guide/directives#ngFor) guide.
20+
For a more in depth explanation, please refer to the [control flow](guide/templates/control-flow#repeat-content-with-the-for-block) guide.
1921

2022
<docs-workflow>
2123

@@ -31,15 +33,13 @@ In the `Home` there is only a single housing location. In this step, you will ad
3133

3234
</docs-step>
3335

34-
<docs-step title="Update the `Home` template to use `ngFor`">
35-
Now the app has a dataset that you can use to display the entries in the browser using the `ngFor` directive.
36+
<docs-step title="Update the `Home` template to use `@for`">
37+
Now the app has a dataset that you can use to display the entries in the browser using the `@for` block.
3638

3739
1. Update the `<app-housing-location>` tag in the template code to this:
38-
<docs-code header="Add ngFor to Home template" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="[17,22]"/>
39-
40-
Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `ngFor` directive. Before this change, it referred to the property on the `Home` class.
40+
<docs-code header="Add @for to Home template" path="adev/src/content/tutorials/first-app/steps/09-services/src/app/home/home.ts" visibleLines="[14,20]"/>
4141

42-
IMPORTANT: Don't forget to import the `NgFor` directive in your `Home` class.
42+
Note, in the code `[housingLocation] = "housingLocation"` the `housingLocation` value now refers to the variable used in the `@for` block. Before this change, it referred to the property on the `Home` class.
4343

4444
1. Save all changes.
4545

@@ -53,14 +53,14 @@ Now the app has a dataset that you can use to display the entries in the browser
5353

5454
</docs-workflow>
5555

56-
SUMMARY: In this lesson, you used the `ngFor` directive to repeat data dynamically in Angular templates. You also added a new array of data to be used in the Angular app. The application now dynamically renders a list of housing locations in the browser.
56+
SUMMARY: In this lesson, you used the `@for` block to repeat data dynamically in Angular templates. You also added a new array of data to be used in the Angular app. The application now dynamically renders a list of housing locations in the browser.
5757

5858
The app is taking shape, great job.
5959

6060
For more information about the topics covered in this lesson, visit:
6161

6262
<docs-pill-row>
63-
<docs-pill href="guide/directives/structural-directives" title="Structural Directives"/>
64-
<docs-pill href="guide/directives#ngFor" title="ngFor guide"/>
65-
<docs-pill href="api/common/NgFor" title="ngFor"/>
63+
<docs-pill href="guide/templates/control-flow" title="Control flow blocks"/>
64+
<docs-pill href="guide/templates/control-flow#repeat-content-with-the-for-block" title="@for guide"/>
65+
<docs-pill href="/api/core/@for" title="@for"/>
6666
</docs-pill-row>

‎adev/src/content/tutorials/first-app/steps/08-ngFor/config.json

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/08-ngFor/config.json
+1-1Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
{
2-
"title": "Use *ngFor in templates",
2+
"title": "Use the `@for` block in templates",
33
"type": "editor",
44
"answerSrc": "../09-services/src",
55
"answerRootDir": "../09-services/",

‎adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/home/home.ts

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/08-ngFor/src/app/home/home.ts
+1-2Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
import {Component} from '@angular/core';
2-
import {CommonModule} from '@angular/common';
32
import {HousingLocation} from '../housing-location/housing-location';
43
import {HousingLocationInfo} from '../housinglocation';
54

65
@Component({
76
selector: 'app-home',
8-
imports: [CommonModule, HousingLocation],
7+
imports: [HousingLocation],
98
template: `
109
<section>
1110
<form>

‎adev/src/content/tutorials/first-app/steps/09-services/README.md

Copy file name to clipboardExpand all lines: adev/src/content/tutorials/first-app/steps/09-services/README.md
+2-2Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -81,13 +81,13 @@ In the **Edit** pane of your IDE, in `src/app/home/home.ts`:
8181

8282
1. Add a new file level import for the `HousingService`:
8383

84-
<docs-code header="Add import to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[5]"/>
84+
<docs-code header="Add import to src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[7]"/>
8585

8686
1. From `Home`, delete the `housingLocationList` array entries and assign `housingLocationList` the value of empty array (`[]`). In a few steps you will update the code to pull the data from the `HousingService`.
8787

8888
1. In `Home`, add the following code to inject the new service and initialize the data for the app. The `constructor` is the first function that runs when this component is created. The code in the `constructor` will assign the `housingLocationList` the value returned from the call to `getAllHousingLocations`.
8989

90-
<docs-code header="Initialize data from service in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[25,32]"/>
90+
<docs-code header="Initialize data from service in src/app/home/home.ts" path="adev/src/content/tutorials/first-app/steps/10-routing/src/app/home/home.ts" visibleLines="[23,30]"/>
9191

9292
1. Save the changes to `src/app/home/home.ts` and confirm your app builds without error.
9393
Correct any errors before you continue to the next step.

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.