docs: add relevant link to guides in learn angular tutorial (#60834)

PR Close #60834

adev/src/content/tutorials/learn-angular/steps/1-components-in-angular/README.md

@@ -2,9 +2,11 @@
 
 Components are the foundational building blocks for any Angular application. Each component has three parts:
 
-* TypeScript class
-* HTML template
-* CSS styles
+- TypeScript class
+- HTML template
+- CSS styles
+
+Note: Learn more about [components in the essentials guide](/essentials/components).
 
 In this activity, you'll learn how to update the template and styles of a component.
 

adev/src/content/tutorials/learn-angular/steps/10-deferrable-views/README.md

@@ -4,6 +4,8 @@ Sometimes in app development, you end up with a lot of components that you need
 
 Maybe they are below the visible fold or are heavy components that aren't interacted with until later. In that case, we can load some of those resources later with deferrable views.
 
+Note: Learn more about [deferred loading with @defer in the in-depth guide](/guide/templates/defer).
+
 In this activity, you'll learn how to use deferrable views to defer load a section of your component template.
 
 <hr>

adev/src/content/tutorials/learn-angular/steps/11-optimizing-images/README.md

@@ -2,7 +2,11 @@
 
 Images are a big part of many applications, and can be a major contributor to application performance problems, including low [Core Web Vitals](https://web.dev/explore/learn-core-web-vitals) scores.
 
-Image optimization can be a complex topic, but Angular handles most of it for you, with the `NgOptimizedImage` directive. In this activity, you'll learn how to use `NgOptimizedImage` to ensure your images are loaded efficiently.
+Image optimization can be a complex topic, but Angular handles most of it for you, with the `NgOptimizedImage` directive.
+
+Note: Learn more about [image optimization with NgOptimizedImage in the in-depth guide](/guide/image-optimization).
+
+In this activity, you'll learn how to use `NgOptimizedImage` to ensure your images are loaded efficiently.
 
 <hr>
 
@@ -31,8 +35,7 @@ To enable the `NgOptimizedImage` directive, swap out the `src` attribute for `ng
 import { NgOptimizedImage } from '@angular/common';
 
 @Component({
-  template: `
-    ...
+template: `     ...
     <li>
       Static Image:
       <img ngSrc="/assets/logo.svg" alt="Angular logo" width="32" height="32" />
@@ -43,7 +46,7 @@ import { NgOptimizedImage } from '@angular/common';
     </li>
     ...
   `,
-  imports: [NgOptimizedImage],
+imports: [NgOptimizedImage],
 })
 </docs-code>
 
@@ -86,6 +89,7 @@ providers: [
 ```
 
 Final URL will be 'https://my.base.url/image.png'
+
 ```angular-html
 <img ngSrc="image.png" height="600" width="800" />
 ```

adev/src/content/tutorials/learn-angular/steps/12-enable-routing/README.md

@@ -2,6 +2,8 @@
 
 For most apps, there comes a point where the app requires more than a single page. When that time inevitably comes, routing becomes a big part of the performance story for users.
 
+Note: Learn more about [routing in the in-depth guide](/guide/routing).
+
 In this activity, you'll learn how to set up and configure your app to use Angular Router.
 
 <hr>
@@ -13,7 +15,7 @@ In this activity, you'll learn how to set up and configure your app to use Angul
 Inside `app.routes.ts`, make the following changes:
 
 1. Import `Routes` from the `@angular/router` package.
-1. Export a constant called `routes` of type `Routes`, assign it `[]` as the value.
+2. Export a constant called `routes` of type `Routes`, assign it `[]` as the value.
 
 ```ts
 import {Routes} from '@angular/router';
@@ -37,7 +39,7 @@ import {provideRouter} from '@angular/router';
 import {routes} from './app.routes';
 
 export const appConfig: ApplicationConfig = {
-  providers: [provideRouter(routes)],
+providers: [provideRouter(routes)],
 };
 </docs-code>
 
@@ -53,16 +55,15 @@ Update the template for `AppComponent` by adding `<router-outlet />`
 import {RouterOutlet} from '@angular/router';
 
 @Component({
-  ...
-  template: `
-    <nav>
+...
+template: `     <nav>
       <a href="/">Home</a>
       |
       <a href="/user">User</a>
     </nav>
     <router-outlet />
   `,
-  imports: [RouterOutlet],
+imports: [RouterOutlet],
 })
 export class AppComponent {}
 </docs-code>

adev/src/content/tutorials/learn-angular/steps/13-define-a-route/README.md

@@ -2,6 +2,8 @@
 
 Now that you've set up the app to use Angular Router, you need to define the routes.
 
+Note: Learn more about [defining a basic route in the in-depth guide](/guide/routing/common-router-tasks#defining-a-basic-route).
+
 In this activity, you'll learn how to add and configure routes with your app.
 
 <hr>
@@ -48,11 +50,11 @@ import {Routes} from '@angular/router';
 import {HomeComponent} from './home/home.component';
 
 export const routes: Routes = [
-  {
-    path: '',
-    title: 'App Home Page',
-    component: HomeComponent,
-  },
+{
+path: '',
+title: 'App Home Page',
+component: HomeComponent,
+},
 ];
 </docs-code>
 

adev/src/content/tutorials/learn-angular/steps/14-routerLink/README.md

@@ -2,6 +2,8 @@
 
 In the app's current state, the entire page refreshes when we click on an internal link that exists within the app. While this may not seem significant with a small app, this can have performance implications for larger pages with more content where users have to redownload assets and run calculations again.
 
+Note: Learn more about [adding routes to your application in the in-depth guide](/guide/routing/common-router-tasks#add-your-routes-to-your-application).
+
 In this activity, you'll learn how to leverage the `RouterLink` directive to make the most use of Angular Router.
 
 <hr>

adev/src/content/tutorials/learn-angular/steps/15-forms/README.md

@@ -4,6 +4,8 @@ Forms are a big part of many apps because they enable your app to accept user in
 
 In Angular, there are two types of forms: template-driven and reactive. You'll learn about both over the next few activities.
 
+Note: Learn more about [forms in Angular in the in-depth guide](/guide/forms).
+
 In this activity, you'll learn how to set up a form using a template-driven approach.
 
 <hr>
@@ -34,8 +36,8 @@ import {Component} from '@angular/core';
 import {FormsModule} from '@angular/forms';
 
 @Component({
-  ...
-  imports: [FormsModule],
+...
+imports: [FormsModule],
 })
 export class UserComponent {}
 </docs-code>

adev/src/content/tutorials/learn-angular/steps/16-form-control-values/README.md

@@ -2,6 +2,8 @@
 
 Now that your forms are set up with Angular, the next step is to access the values from the form controls.
 
+Note: Learn more about [adding a basic form control in the in-depth guide](/guide/forms/reactive-forms#adding-a-basic-form-control).
+
 In this activity, you'll learn how to get the value from your form input.
 
 <hr>
@@ -49,9 +51,9 @@ export class UserComponent {
   favoriteFramework = '';
   ...
 
-  showFramework() {
-    alert(this.favoriteFramework);
-  }
+showFramework() {
+alert(this.favoriteFramework);
+}
 }
 </docs-code>
 

adev/src/content/tutorials/learn-angular/steps/17-reactive-forms/README.md

@@ -2,6 +2,8 @@
 
 When you want to manage your forms programmatically instead of relying purely on the template, reactive forms are the answer.
 
+Note: Learn more about [reactive forms in the in-depth guide](/guide/forms/reactive-forms).
+
 In this activity, you'll learn how to set up reactive forms.
 
 <hr>

adev/src/content/tutorials/learn-angular/steps/18-forms-validation/README.md

@@ -2,6 +2,8 @@
 
 Another common scenario when working with forms is the need to validate the inputs to ensure the correct data is submitted.
 
+Note: Learn more about [validating form input in the in-depth guide](/guide/forms/reactive-forms#validating-form-input).
+
 In this activity, you'll learn how to validate forms with reactive forms.
 
 <hr>

adev/src/content/tutorials/learn-angular/steps/19-creating-an-injectable-service/README.md

@@ -2,9 +2,9 @@
 
 Dependency injection (DI) in Angular is one of the framework's most powerful features. Consider dependency injection to be the ability for Angular to _provide_ resources you need for your application at runtime. A dependency could be a service or some other resources.
 
-You can learn more about [dependency injection in the Angular docs](guide/di). For now, you will get practice creating `injectable` resources.
+Note: Learn more about [dependency injection in the essentials guide](/essentials/dependency-injection).
 
-In this activity, you'll learn how to create an injectable service.
+In this activity, you'll learn how to create an `injectable` service.
 
 <hr>
 

adev/src/content/tutorials/learn-angular/steps/2-updating-the-component-class/README.md

@@ -2,6 +2,8 @@
 
 In Angular, the component's logic and behavior are defined in the component's TypeScript class.
 
+Note: Learn more about [showing dynamic text in the essentials guide](/essentials/templates#showing-dynamic-text).
+
 In this activity, you'll learn how to update the component class and how to use [interpolation](/guide/templates/binding#render-dynamic-text-with-text-interpolation).
 
 <hr />

adev/src/content/tutorials/learn-angular/steps/20-inject-based-di/README.md

@@ -2,7 +2,7 @@
 
 Creating an injectable service is the first part of the dependency injection (DI) system in Angular. How do you inject a service into a component? Angular has a convenient function called `inject()` that can be used in the proper context.
 
-NOTE: Injection contexts are beyond the scope of this tutorial, but you can find more information in the [Angular Docs](guide/di/dependency-injection-context) if you would like to learn more.
+NOTE: Injection contexts are beyond the scope of this tutorial, but you can learn more in the [dependency injection (DI) essentials guide](/essentials/dependency-injection)and [DI context guide](guide/di/dependency-injection-context).
 
 In this activity, you'll learn how to inject a service and use it in a component.
 

adev/src/content/tutorials/learn-angular/steps/21-constructor-based-di/README.md

@@ -3,7 +3,9 @@
 In previous activities you used the `inject()` function to make resources available, "providing" them to your components. The `inject()` function is one pattern and it is useful to know that there is another pattern for injecting resources called constructor-based dependency injection.
 
 You specify the resources as parameters to the `constructor` function of a component. Angular will make those resources available to your component.
-<br><br>
+
+Note: Learn more about [injecting services in the in-depth guide](/guide/di/creating-injectable-service#injecting-services).
+
 In this activity, you will learn how to use constructor-based dependency injection.
 
 <hr>

adev/src/content/tutorials/learn-angular/steps/22-pipes/README.md

@@ -2,6 +2,8 @@
 
 Pipes are functions that are used to transform data in templates. In general, pipes are "pure" functions that don't cause side effects. Angular has a number of helpful built-in pipes you can import and use in your components. You can also create a custom pipe.
 
+Note: Learn more about [pipes in the in-depth guide](/guide/templates/pipes).
+
 In this activity, you will import a pipe and use it in the template.
 
 <hr>
@@ -12,12 +14,12 @@ To use a pipe in a template include it in an interpolated expression. Check out
 import {UpperCasePipe} from '@angular/common';
 
 @Component({
-    ...
-    template: `{{ loudMessage | uppercase }}`,
-    imports: [UpperCasePipe],
+...
+template: `{{ loudMessage | uppercase }}`,
+imports: [UpperCasePipe],
 })
 class AppComponent {
-    loudMessage = 'we think you are doing great!'
+loudMessage = 'we think you are doing great!'
 }
 </docs-code>
 

adev/src/content/tutorials/learn-angular/steps/23-pipes-format-data/README.md

@@ -2,6 +2,8 @@
 
 You can take your use of pipes even further by configuring them. Pipes can be configured by passing options to them.
 
+Note: Learn more about [formatting data with pipes in the in-depth guide](/guide/templates/pipes).
+
 In this activity, you will work with some pipes and pipe parameters.
 
 <hr>

adev/src/content/tutorials/learn-angular/steps/24-create-a-pipe/README.md

@@ -2,6 +2,8 @@
 
 You can create custom pipes in Angular to fit your data transformation needs.
 
+Note: Learn more about [creating custom pipes in the in-depth guide](/guide/templates/pipes#creating-custom-pipes).
+
 In this activity, you will create a custom pipe and use it in your template.
 
 <hr>

adev/src/content/tutorials/learn-angular/steps/3-composing-components/README.md

@@ -4,6 +4,8 @@ You've learned to update the component template, component logic, and component
 
 The `selector` property of the component configuration gives you a name to use when referencing the component in another template. You use the `selector` like an HTML tag, for example `app-user` would be `<app-user />` in the template.
 
+Note: Learn more about [using components in the essentials guide](/essentials/components#using-components).
+
 In this activity, you'll learn how to compose components.
 
 <hr/>

adev/src/content/tutorials/learn-angular/steps/4-control-flow-if/README.md

@@ -4,6 +4,8 @@ Deciding what to display on the screen for a user is a common task in applicatio
 
 To express conditional displays in templates, Angular uses the `@if` template syntax.
 
+Note: Learn more about [control flow in the essentials guide](/essentials/templates#control-flow-with-if-and-for).
+
 In this activity, you'll learn how to use conditionals in templates.
 
 <hr/>

adev/src/content/tutorials/learn-angular/steps/5-control-flow-for/README.md

@@ -2,7 +2,10 @@
 
 Often when building web applications, you need to repeat some code a specific number of times - for example, given an array of names, you may want to display each name in a `<p>` tag.
 
+Note: Learn more about [control flow in the essentials guide](/essentials/templates#control-flow-with-if-and-for).
+
 In this activity, you'll learn how to use `@for` to repeat elements in a template.
+
 <hr/>
 
 The syntax that enables repeating elements in a template is `@for`.
@@ -25,8 +28,8 @@ export class AppComponent {
 
 Two things to take note of:
 
-* There is an `@` prefix for the `for` because it is a special syntax called [Angular template syntax](guide/templates)
-* For applications using v16 and older please refer to the [Angular documentation for NgFor](guide/directives/structural-directives)
+- There is an `@` prefix for the `for` because it is a special syntax called [Angular template syntax](guide/templates)
+- For applications using v16 and older please refer to the [Angular documentation for NgFor](guide/directives/structural-directives)
 
 <docs-workflow>
 

adev/src/content/tutorials/learn-angular/steps/6-property-binding/README.md

@@ -4,6 +4,8 @@ Property binding in Angular enables you to set values for properties of HTML ele
 
 Use property binding to dynamically set values for properties and attributes. You can do things such as toggle button features, set image paths programmatically, and share values between components.
 
+Note: Learn more about [setting dynamic properties and attributes in the essentials guide](/essentials/templates#setting-dynamic-properties-and-attributes).
+
 In this activity, you'll learn how to use property binding in templates.
 
 <hr />

adev/src/content/tutorials/learn-angular/steps/7-event-handling/README.md

@@ -2,6 +2,8 @@
 
 Event handling enables interactive features on web apps. It gives you the ability as a developer to respond to user actions like button presses, form submissions and more.
 
+Note: Learn more about [handling user interaction in the essentials guide](/essentials/templates#handling-user-interaction).
+
 In this activity, you'll learn how to add an event handler.
 
 <hr />

adev/src/content/tutorials/learn-angular/steps/8-input/README.md

@@ -4,6 +4,8 @@ Sometimes app development requires you to send data into a component. This data
 
 Angular uses a concept called `Input`. This is similar to `props` in other frameworks. To create an `Input` property, use the `@Input` decorator.
 
+Note: Learn more about [accepting data with input properties in the inputs guide](/guide/components/inputs).
+
 In this activity, you'll learn how to use the `@Input` decorator to send information to components.
 
 <hr>

adev/src/content/tutorials/learn-angular/steps/9-output/README.md

@@ -4,6 +4,8 @@ When working with components it may be required to notify other components that
 
 Angular uses the `@Output` decorator to enable this type of behavior.
 
+Note: Learn more about [custom events in the outputs guide](/guide/components/outputs).
+
 In this activity, you'll learn how to use the `@Output` decorator and `EventEmitter` to communicate with components.
 
 <hr />