docs(learn): Revise Angular tutorial for v17

[bsmth]

Description

There were some errors in the Angular tutorial and some fixes have landed, but there was a need to follow through the steps again from the beginning to make sure everything works as expected.

This PR uses 17.3.0 (current when using npm install -g @angular/cli at time of writing).

Motivation

Keeping the tutorials using frameworks error-free at the very least.

Related issues and pull requests

• fix(learn): Remove errors discovered while following Angular todo list app Guide #32132

[github-actions]

Preview URLs

• /en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building
• /en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started
• /en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component
• /en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_styling
• /en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning

Flaws (1)

Note! 4 documents with no flaws that don't need to be listed. 🎉

URL: /en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started
Title: Getting started with Angular
Flaw count: 1

• macros:
  • Unknown macro title

External URLs (24)

URL: /en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_todo_list_beginning
Title: Beginning our Angular todo list app

• https://angular.io/api/core/Component (4 times) (Note! This may be a new URL 👀)
• https://angular.io/api/core/Directive (1 time) (Note! This may be a new URL 👀)
• https://angular.io/guide/ngmodules (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_item_component
Title: Creating an item component

• https://angular.io/api/common/CommonModule (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_building
Title: Building Angular applications and further resources

• https://www.npmjs.com/package/http-server (1 time) (Note! This may be a new URL 👀)

---

URL: /en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks/Angular_getting_started
Title: Getting started with Angular

• https://angular.io/api/common (2 times) (Note! This may be a new URL 👀)
• https://angular.io/api/common/CommonModule (1 time) (Note! This may be a new URL 👀)
• https://angular.io/cli/analytics (1 time) (Note! This may be a new URL 👀)
• https://angular.io/cli/build (1 time) (Note! This may be a new URL 👀)
• https://angular.io/cli/completion (1 time) (Note! This may be a new URL 👀)
• https://angular.io/cli/e2e (1 time) (Note! This may be a new URL 👀)
• https://angular.io/cli/generate (1 time) (Note! This may be a new URL 👀)
• https://angular.io/cli/new (1 time) (Note! This may be a new URL 👀)
• https://angular.io/cli/serve (1 time) (Note! This may be a new URL 👀)
• https://angular.io/cli/test (1 time) (Note! This may be a new URL 👀)
• https://angular.io/guide/component-overview (1 time) (Note! This may be a new URL 👀)
• https://angular.io/guide/ngmodules (1 time) (Note! This may be a new URL 👀)
• https://angular.io/guide/standalone-components (1 time) (Note! This may be a new URL 👀)
• https://angular.io/guide/testing (1 time) (Note! This may be a new URL 👀)
• https://angular.io/guide/update-to-version-17 (1 time) (Note! This may be a new URL 👀)
• https://angular.io/guide/versions (1 time) (Note! This may be a new URL 👀)
• https://nodejs.org/en/about/previous-releases (1 time) (Note! This may be a new URL 👀)
• https://nodejs.org/en/download (1 time) (Note! This may be a new URL 👀)
• https://www.typescriptlang.org/ (1 time) (Note! This may be a new URL 👀)

(comment last updated: 2024-03-19 10:36:16)

[OnkarRuikar]

A few more changes. In Angular_getting_started, the angular doesn't support current version it seems only LTS versions are supported. So the statement needs to be

Angular requires a active LTS or maintenance LTS.

May I get edit permissions to learn-angular-v17 branch?

[bsmth]

A few more changes. In Angular_getting_started, the angular doesn't support current version it seems only LTS versions are supported. So the statement needs to be

Angular requires a active LTS or maintenance LTS.

Nice one, thanks for spotting.

May I get edit permissions to learn-angular-v17 branch?

Sure! I've sent you an invite for my fork, you should get access 🙌🏻

[OnkarRuikar]

The ngFor and ngIf are old control flow mechanisms.
Can we switch to the new Built-in control flow in our tutorial?

-- <li *ngFor="let item of items">{{item.description}}</li>
++ @for (item of items) {
++   <li>{{item.description}}</li>
++ }

[bsmth]

The ngFor and ngIf are old control flow mechanisms. Can we switch to the new Built-in control flow in our tutorial?

-- <li *ngFor="let item of items">{{item.description}}</li>
++ @for (item of items) {
++   <li>{{item.description}}</li>
++ }

I like how it looks, they're in "developer preview" - shall we update this when they're "stable"? Angular 18 is on the way, so maybe we hold off on these types of changes until then.

[OnkarRuikar]

Angular 18 is on the way, so maybe we hold off on these types of changes until then.

Around two months from now. Let's add the new stuff after that.

[bsmth]

Around two months from now. Let's add the new stuff after that.

Sounds good to me! Are your changes ready to land? I think we can merge shortly

[OnkarRuikar]

Sounds good to me! Are your changes ready to land?

Yes

[bsmth]

Thanks @OnkarRuikar - do you want to leave a review so we can merge (no author self-approval)?

[OnkarRuikar]

Thanks @OnkarRuikar - do you want to leave a review so we can merge (no author self-approval)?

I don't have approve rights in this repo.

[pepelsbey]

A few minor tweaks and a suggestion. Otherwise, looks good to me :) Thanks!

[bsmth]

Thanks, both - going to merge shortly!