diff --git a/adev/src/content/guide/di/creating-injectable-service.md b/adev/src/content/guide/di/creating-injectable-service.md
index e90000c5d42..f8b15a9cc73 100644
--- a/adev/src/content/guide/di/creating-injectable-service.md
+++ b/adev/src/content/guide/di/creating-injectable-service.md
@@ -67,35 +67,35 @@ ng generate service heroes/hero
This command creates the following default `HeroService`:
-
-import { Injectable } from '@angular/core';
+```ts {header: 'heroes/hero.service.ts (CLI-generated)'}
+import {Injectable} from '@angular/core';
@Injectable({
-providedIn: 'root',
+ providedIn: 'root',
})
export class HeroService {}
-
+```
The `@Injectable()` decorator specifies that Angular can use this class in the DI system.
The metadata, `providedIn: 'root'`, means that the `HeroService` is provided throughout the application.
Add a `getHeroes()` method that returns the heroes from `mock.heroes.ts` to get the hero mock data:
-
-import { Injectable } from '@angular/core';
-import { HEROES } from './mock-heroes';
+```ts {header: 'hero.service.ts'}
+import {Injectable} from '@angular/core';
+import {HEROES} from './mock-heroes';
@Injectable({
-// declares that this service should be created
-// by the root application injector.
-providedIn: 'root',
+ // declares that this service should be created
+ // by the root application injector.
+ providedIn: 'root',
})
export class HeroService {
-getHeroes() {
-return HEROES;
+ getHeroes() {
+ return HEROES;
+ }
}
-}
-
+```
For clarity and maintainability, it is recommended that you define components and services in separate files.
@@ -106,19 +106,19 @@ To inject a service as a dependency into a component, you can declare a class fi
The following example specifies the `HeroService` in the `HeroListComponent`.
The type of `heroService` is `HeroService`.
-
-import { inject } from "@angular/core";
+```ts
+import {inject} from '@angular/core';
export class HeroListComponent {
-private heroService = inject(HeroService);
+ private heroService = inject(HeroService);
}
-
+```
It is also possible to inject a service into a component using the component's constructor:
-
+```ts {header: 'hero-list.component.ts (constructor signature)'}
constructor(private heroService: HeroService)
-
+```
The `inject` method can be used in both classes and functions, while the constructor method can naturally only be used in a class constructor. However, in either case a dependency may only be injected in a valid [injection context](guide/di/dependency-injection-context), usually in the construction or initialization of a component.
@@ -127,24 +127,23 @@ The `inject` method can be used in both classes and functions, while the constru
When a service depends on another service, follow the same pattern as injecting into a component.
In the following example, `HeroService` depends on a `Logger` service to report its activities:
-
-import { inject, Injectable } from '@angular/core';
-import { HEROES } from './mock-heroes';
-import { Logger } from '../logger.service';
+```ts {header: 'hero.service.ts, highlight: [[3],[9],[12]]}
+import {inject, Injectable} from '@angular/core';
+import {HEROES} from './mock-heroes';
+import {Logger} from '../logger.service';
@Injectable({
-providedIn: 'root',
+ providedIn: 'root',
})
export class HeroService {
-private logger = inject(Logger);
+ private logger = inject(Logger);
-getHeroes() {
-this.logger.log('Getting heroes.');
-return HEROES;
+ getHeroes() {
+ this.logger.log('Getting heroes.');
+ return HEROES;
+ }
}
-}
-
+```
In this example, the `getHeroes()` method uses the `Logger` service by logging a message when fetching heroes.
diff --git a/adev/src/content/guide/forms/form-validation.md b/adev/src/content/guide/forms/form-validation.md
index 7b0ba0ca5ce..4e9b634d1f0 100644
--- a/adev/src/content/guide/forms/form-validation.md
+++ b/adev/src/content/guide/forms/form-validation.md
@@ -13,7 +13,7 @@ Every time the value of a form control changes, Angular runs validation and gene
You can then inspect the control's state by exporting `ngModel` to a local template variable.
The following example exports `NgModel` into a variable called `name`:
-
+
Notice the following features illustrated by the example.
@@ -62,7 +62,7 @@ For a full list of built-in validators, see the [Validators](api/forms/Validator
To update the actor form to be a reactive form, use some of the same
built-in validators —this time, in function form, as in the following example.
-
+
In this example, the `name` control sets up two built-in validators —`Validators.required` and `Validators.minLength(4)`— and one custom validator, `forbiddenNameValidator`.
@@ -74,7 +74,7 @@ In a reactive form, you can always access any form control through the `get` met
If you look at the template for the `name` input again, it is fairly similar to the template-driven example.
-
+
This form differs from the template-driven version in that it no longer exports any directives. Instead, it uses the `name` getter defined in the component class.
@@ -87,7 +87,7 @@ The built-in validators don't always match the exact use case of your applicatio
Consider the `forbiddenNameValidator` function from the previous example.
Here's what the definition of that function looks like.
-
+
The function is a factory that takes a regular expression to detect a _specific_ forbidden name and returns a validator function.
@@ -105,7 +105,7 @@ In the case of an observable, the observable must complete, at which point the f
In reactive forms, add a custom validator by passing the function directly to the `FormControl`.
-
+
### Adding custom validators to template-driven forms
@@ -115,17 +115,17 @@ For example, the corresponding `ForbiddenValidatorDirective` serves as a wrapper
Angular recognizes the directive's role in the validation process because the directive registers itself with the `NG_VALIDATORS` provider, as shown in the following example.
`NG_VALIDATORS` is a predefined provider with an extensible collection of validators.
-
+
The directive class then implements the `Validator` interface, so that it can easily integrate with Angular forms.
Here is the rest of the directive to help you get an idea of how it all comes together.
-
+
Once the `ForbiddenValidatorDirective` is ready, you can add its selector, `appForbiddenName`, to any input element to activate it.
For example:
-
+
HELPFUL: Notice that the custom validation directive is instantiated with `useExisting` rather than `useClass`.
The registered validator must be _this instance_ of the `ForbiddenValidatorDirective` —the instance in the form with its `forbiddenName` property bound to "bob".
@@ -170,15 +170,13 @@ The validators do this by checking that the actor names and roles do not match.
The form has the following structure:
-
-
+```ts
const actorForm = new FormGroup({
-'name': new FormControl(),
-'role': new FormControl(),
-'skill': new FormControl()
+ 'name': new FormControl(),
+ 'role': new FormControl(),
+ 'skill': new FormControl(),
});
-
-
+```
Notice that the `name` and `role` are sibling controls.
To evaluate both controls in a single custom validator, you must perform the validation in a common ancestor control: the `FormGroup`.
@@ -186,19 +184,20 @@ You query the `FormGroup` for its child controls so that you can compare their v
To add a validator to the `FormGroup`, pass the new validator in as the second argument on creation.
-
-
-const actorForm = new FormGroup({
-'name': new FormControl(),
-'role': new FormControl(),
-'skill': new FormControl()
-}, { validators: unambiguousRoleValidator });
-
-
+```ts
+const actorForm = new FormGroup(
+ {
+ 'name': new FormControl(),
+ 'role': new FormControl(),
+ 'skill': new FormControl(),
+ },
+ {validators: unambiguousRoleValidator},
+);
+```
The validator code is as follows.
-
+
The `unambiguousRoleValidator` validator implements the `ValidatorFn` interface.
It takes an Angular control object as an argument and returns either null if the form is valid, or `ValidationErrors` otherwise.
@@ -210,7 +209,7 @@ If they do match, the actor's role is ambiguous and the validator must mark the
To provide better user experience, the template shows an appropriate error message when the form is invalid.
-
+
This `@if` displays the error if the `FormGroup` has the cross validation error returned by the `unambiguousRoleValidator` validator, but only if the user finished [interacting with the form](#control-status-css-classes).
@@ -219,16 +218,16 @@ This `@if` displays the error if the `FormGroup` has the cross validation error
For a template-driven form, you must create a directive to wrap the validator function.
You provide that directive as the validator using the [`NG_VALIDATORS` token](/api/forms/NG_VALIDATORS), as shown in the following example.
-
+
You must add the new directive to the HTML template.
Because the validator must be registered at the highest level in the form, the following template puts the directive on the `form` tag.
-
+
To provide better user experience, an appropriate error message appears when the form is invalid.
-
+
This is the same in both template-driven and reactive forms.
@@ -250,13 +249,13 @@ Inspect the control's `pending` property and use it to give visual feedback abou
A common UI pattern is to show a spinner while the async validation is being performed.
The following example shows how to achieve this in a template-driven form.
-
-
+```angular-html
+
@if(model.pending) {
-
+
}
-
+```
### Implementing a custom async validator
@@ -266,15 +265,15 @@ To validate the potential role entry, the validator must initiate an asynchronou
The following code creates the validator class, `UniqueRoleValidator`, which implements the `AsyncValidator` interface.
-
+
The `actorsService` property is initialized with an instance of the `ActorsService` token, which defines the following interface.
-
+```ts
interface ActorsService {
isRoleTaken: (role: string) => Observable;
}
-
+```
In a real world application, the `ActorsService` would be responsible for making an HTTP request to the actor database to check if the role is available.
From the validator's point of view, the actual implementation of the service is not important, so the example can just code against the `ActorsService` interface.
@@ -297,7 +296,7 @@ The `pending` flag is set to `false`, and the form validity is updated.
To use an async validator in reactive forms, begin by injecting the validator into a property of the component class.
-
+
Then, pass the validator function directly to the `FormControl` to apply it.
@@ -305,7 +304,7 @@ In the following example, the `validate` function of `UnambiguousRoleValidator`
The value of `asyncValidators` can be either a single async validator function, or an array of functions.
To learn more about `FormControl` options, see the [AbstractControlOptions](api/forms/AbstractControlOptions) API reference.
-
+
### Adding async validators to template-driven forms
@@ -313,11 +312,11 @@ To use an async validator in template-driven forms, create a new directive and r
In the example below, the directive injects the `UniqueRoleValidator` class that contains the actual validation logic and invokes it in the `validate` function, triggered by Angular when validation should happen.
-
+
Then, as with synchronous validators, add the directive's selector to an input to activate it.
-
+
### Optimizing performance of async validators
@@ -330,15 +329,15 @@ You can delay updating the form validity by changing the `updateOn` property fro
With template-driven forms, set the property in the template.
-
+```angular-html
-
+```
With reactive forms, set the property in the `FormControl` instance.
-
+```ts
new FormControl('', {updateOn: 'blur'});
-
+```
## Interaction with native HTML form validation
diff --git a/adev/src/content/guide/routing/navigate-to-routes.md b/adev/src/content/guide/routing/navigate-to-routes.md
index 2992f17bba3..7a270b90cdf 100644
--- a/adev/src/content/guide/routing/navigate-to-routes.md
+++ b/adev/src/content/guide/routing/navigate-to-routes.md
@@ -8,6 +8,7 @@ Instead of using regular anchor elements `` with an `href` attribute, you add
```angular-ts
import {RouterLink} from '@angular/router';
+
@Component({
template: `