mdn
35381 angular update
Preview URLs (6 pages)
/en-US/docs/Glossary/Router/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Angular_building/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Angular_getting_started/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Angular_item_component/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Angular_todo_list_beginning/en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features
Flaws (1255)
Note! 1 document with no flaws that don't need to be listed. 🎉
URL: /en-US/docs/Learn_web_development/Core/Frameworks_libraries/Angular_building
Title: Building Angular applications and further resources
Flaw count: 251
- macros:
Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_webWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_softwareWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_likeWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_filesWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics- and 246 more flaws omitted
URL: /en-US/docs/Learn_web_development/Core/Frameworks_libraries/Angular_getting_started
Title: Getting started with Angular
Flaw count: 251
- macros:
Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_webWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_softwareWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_likeWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_filesWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics- and 246 more flaws omitted
URL: /en-US/docs/Learn_web_development/Core/Frameworks_libraries/Angular_item_component
Title: Creating an item component
Flaw count: 251
- macros:
Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_webWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_softwareWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_likeWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_filesWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics- and 246 more flaws omitted
URL: /en-US/docs/Learn_web_development/Core/Frameworks_libraries/Angular_todo_list_beginning
Title: Beginning our Angular todo list app
Flaw count: 251
- macros:
Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_webWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_softwareWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_likeWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_filesWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics- and 246 more flaws omitted
URL: /en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features
Title: Framework main features
Flaw count: 251
- macros:
Wrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_webWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Installing_basic_softwareWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/What_will_your_website_look_likeWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/Dealing_with_filesWrong xref macro used (consider changing which macro you use). Error processing path /en-US/docs/Learn/Getting_started_with_the_web/HTML_basics- and 246 more flaws omitted
External URLs (32)
URL: /en-US/docs/Glossary/Router
Title: Router
- https://angular.dev/guide/routing/common-router-tasks (1 time) (Note! This may be a new URL 👀)
URL: /en-US/docs/Learn_web_development/Core/Frameworks_libraries/Angular_building
Title: Building Angular applications and further resources
- https://angular.dev/guide/components (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/guide/forms (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/tutorials (1 time) (Note! This may be a new URL 👀)
URL: /en-US/docs/Learn_web_development/Core/Frameworks_libraries/Angular_getting_started
Title: Getting started with Angular
- https://angular.dev/api/common/CommonModule (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/cli/analytics (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/cli/build (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/cli/completion (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/cli/e2e (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/cli/generate (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/cli/new (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/cli/serve (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/cli/test (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/guide/components/importing (2 times) (Note! This may be a new URL 👀)
- https://angular.dev/guide/directives (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/guide/ngmodules (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/guide/pipes (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/guide/testing (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/overview (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/reference/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 👀)
URL: /en-US/docs/Learn_web_development/Core/Frameworks_libraries/Angular_item_component
Title: Creating an item component
- https://angular.dev/api/common/CommonModule (1 time) (Note! This may be a new URL 👀)
URL: /en-US/docs/Learn_web_development/Core/Frameworks_libraries/Angular_todo_list_beginning
Title: Beginning our Angular todo list app
- https://angular.dev/api/core/@for (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/api/core/@if (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/api/core/Component (4 times) (Note! This may be a new URL 👀)
- https://angular.dev/api/core/Directive (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/guide/ngmodules (1 time) (Note! This may be a new URL 👀)
- https://angular.dev/guide/templates/control-flow (1 time) (Note! This may be a new URL 👀)
URL: /en-US/docs/Learn_web_development/Core/Frameworks_libraries/Main_features
Title: Framework main features
- https://angular.dev/guide/di/dependency-injection (1 time) (Note! This may be a new URL 👀)
- https://guides.emberjs.com/release/services/ (1 time) (Note! This may be a new URL 👀)
- https://react.dev/learn/passing-data-deeply-with-context (1 time) (Note! This may be a new URL 👀)
- https://v2.vuejs.org/v2/api/ (1 time) (Note! This may be a new URL 👀)
(comment last updated: 2024-12-20 11:14:07)
![github-actions[bot] avatar](https://avatars.githubusercontent.com/in/15368?v=4 "Published by a pub.dev verified publisher"){kind=small}
I haven't forgotten about this one, BTW, I have some other work that's top of my list for the moment. I will be getting back to this shortly. Thanks for the patience.
Changelog, for convenience: https://github.com/angular/angular/releases/tag/18.0.0
Thanks for the improvements, the only issue I see is that this PR is targeting the @next version which may change, so this concerns the 'structural directives' syntax: https://angular.dev/guide/directives#built-in-structural-directives
- https://next.angular.dev/api/core/@for# v https://angular.dev/api/common/NgFor
- https://next.angular.dev/api/core/@if# v https://angular.dev/api/common/NgIf
Some comments:
In Angular_todo_list_beginning, I would change the ### Dynamically change the UI with @if and @for section to:
### Control flow with @if and @for blocks
This tutorial covers two important Angular [control flow blocks](https://angular.dev/essentials/conditionals-and-loops) which tell the framework when and how your templates should be rendered.
The first block that this tutorial covers is the [`@for` block](https://angular.dev/api/core/@for) which loops through a collection and repeatedly renders the content of a block.
The second block that you learn in this tutorial is [`@if`](https://angular.dev/api/core/@if).
You can use `@if` to display content based on a condition.
For example, if a user clicks an "edit" button, you can show elements used to edit an item.
If a user clicks "cancel", you can remove the elements used for editing.
In "Add HTML to the AppComponent template":
The `<li>` is inside a `@for` block that iterates over the items in the `items` array.
For each item, a new `<li>` is created.
The double curly braces that contain `item.description` instructs Angular to populate each `<li>` with the text of each item's description.
The `track` keyword in Angular's `@for` block helps Angular identify which items in an array have changed, been added, or removed.
This makes it easier and faster for Angular to update the DOM when the array is modified.
And in "Creating an item component", we should change the following:
-On this `<div>` is an `@if`, a built-in Angular directive that you can use to dynamically change the structure of the DOM.
-This `@if` means that if `editable` is `false`, this `<div>` is in the DOM. If `editable` is `true`, Angular removes this `<div>` from the DOM.
+On this `<div>` is an `@if` block that you can use to render parts of a template based on a condition.
+This `@if` means that if `editable` is `false`, this `<div>` is rendered in the template. If `editable` is `true`, Angular removes this `<div>` from the DOM.
-You can update the `@Component` to use [`CommonModule`](https://angular.dev/api/common/CommonModule) in `app/item/item.component.ts` so that we can use the `@if` directives:
+You can update the `@Component` to use [`CommonModule`](https://angular.dev/api/common/CommonModule) in `app/item/item.component.ts` so that we can use the `@if` blocks:
-The `@for` - Angular's repeater directive, used to iterate over all of the items in the `items` array.
-Angular's `@for` like `@if`, is another directive that helps you change the structure of the DOM while writing less code.
+The `@for` - Angular's control flow block, used to iterate over all of the items in the `items` array.
+Angular's `@for` like `@if`, is another block that helps you change the structure of the DOM while writing less code.
-You can wrap other elements such as `<div>`, `<span`, or `<p>` within an `@for` directive.
+You can wrap other elements such as `<div>`, `<span`, or `<p>` within an `@for` block.
@ragul1697 let me know if you need a hand, I'm happy to apply the changes on your branch if you're okay with that. TY
Hi @bsmth, I have made the changes for control blocks instead of directives. This will wrap up the content for Angular 18.
But now, Angular 19 is released. Do we have to make changes for that also?
There is also a discussion with a suggestion that removing the guides for each and every framework.
Link for the Discussion
Hi @bsmth, I have made the changes for
control blocksinstead ofdirectives. This will wrap up the content for Angular 18. But now, Angular 19 is released. Do we have to make changes for that also? There is also a discussion with a suggestion that removing the guides for each and every framework. Link for the Discussion
Thanks a lot, the changes look good. As Chris mentioned in the Discussion, we're going to move content first and then take stock of guides for maintenance plans.
But now, Angular 19 is released. Do we have to make changes for that also?
Let's keep this isolated to v18 first. There are large changes landing in the Learn area in the next few days, so we can wait until that's settled and then revise. I'm going to postpone merging until that's clearer, thanks a lot for your patience.
This pull request has merge conflicts that must be resolved before it can be merged.
The Learn PR has finished now (hence the conflicts) I will give you a hand fixing this