docs: Standardize route parameter input signal & code block tags in routing docs (#64788)

PR Close #64788

adev/src/content/guide/routing/define-routes.md

@@ -8,7 +8,7 @@ In Angular, a **route** is an object that defines which component should render
 
 Here is a basic example of a route:
 
-```angular-ts
+```ts
 import { AdminPage } from './app-admin/app-admin.component';
 
 const adminPage = {
@@ -25,7 +25,7 @@ Most projects define routes in a separate file that contains `routes` in the fil
 
 A collection of routes looks like this:
 
-```angular-ts
+```ts
 import { Routes } from '@angular/router';
 import { HomePage } from './home-page/home-page.component';
 import { AdminPage } from './about-page/admin-page.component';
@@ -50,7 +50,7 @@ When bootstrapping an Angular application without the Angular CLI, you can pass
 
 Inside of the `providers` array, you can add the Angular router to your application by adding a `provideRouter` function call with your routes.
 
-```angular-ts
+```ts
 import { ApplicationConfig } from '@angular/core';
 import { provideRouter } from '@angular/router';
 
@@ -87,9 +87,9 @@ Learn more about [query parameters in Angular in this guide](/guide/routing/read
 
 The following example displays a user profile component based on the user id passed in through the URL.
 
-```angular-ts
+```ts
 import { Routes } from '@angular/router';
-import { UserProfile } from './user-profile/user-profile;
+import { UserProfile } from './user-profile/user-profile';
 
 const routes: Routes = [
   { path: 'user/:id', component: UserProfile }
@@ -107,7 +107,7 @@ Valid route parameter names must start with a letter (a-z, A-Z) and can only con
 
 You can also define paths with multiple parameters:
 
-```angular-ts
+```ts
 import { Routes } from '@angular/router';
 import { UserProfile } from './user-profile/user-profile.component';
 import { SocialMediaFeed } from './user-profile/social–media-feed.component';
@@ -128,7 +128,7 @@ When you need to catch all routes for a specific path, the solution is a wildcar
 
 A common example is defining a Page Not Found component.
 
-```angular-ts
+```ts
 import { Home } from './home/home.component';
 import { UserProfile } from './user-profile/user-profile.component';
 import { NotFound } from './not-found/not-found.component';
@@ -150,7 +150,7 @@ When you define routes, the order is important because Angular uses a first-matc
 
 The following example shows routes defined from most-specific to least specific:
 
-```angular-ts
+```ts
 const routes: Routes = [
   { path: '', component: HomeComponent },              // Empty path
   { path: 'users/new', component: NewUserComponent },  // Static, most specific
@@ -181,7 +181,7 @@ Each approach offers distinct advantages for different scenarios.
 
 When you define a route with the `component` property, the referenced component is eagerly loaded as part of the same JavaScript bundle as the route configuration.
 
-```angular-ts
+```ts
 import { Routes } from "@angular/router";
 import { HomePage } from "./components/home/home-page"
 import { LoginPage } from "./components/auth/login-page"
@@ -208,7 +208,7 @@ While including more JavaScript in your initial page load leads to slower initia
 
 You can use the `loadComponent` property to lazily load the JavaScript for a route only at the point at which that route would become active.
 
-```angular-ts
+```ts
 import { Routes } from "@angular/router";
 
 export const routes: Routes = [
@@ -264,7 +264,7 @@ Note: While lazy routes have the upfront performance benefit of reducing the amo
 
 You can define a route that redirects to another route instead of rendering a component:
 
-```angular-ts
+```ts
 import { BlogComponent } from './home/blog.component';
 
 const routes: Routes = [
@@ -366,7 +366,7 @@ Each route has a `providers` property that lets you provide dependencies to that
 
 Common scenarios where this can be helpful include applications that have different services based on whether the user is an admin or not.
 
-```angular-ts
+```ts
 export const ROUTES: Route[] = [
   {
     path: 'admin',
@@ -398,7 +398,7 @@ There are two ways to work with route data: static data that remains constant, a
 
 You can associate arbitrary static data with a route via the `data` property in order to centralize things like route-specific metadata (e.g., analytics tracking, permissions, etc.):
 
-```angular-ts
+```ts
 import { Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { AboutComponent } from './about/about.component';
@@ -434,7 +434,7 @@ Nested routes, also known as child routes, are a common technique for managing m
 
 You can add child routes to any route definition with the `children` property:
 
-```angular-ts
+```ts
 const routes: Routes = [
   {
     path: 'product/:id',

adev/src/content/guide/routing/lifecycle-and-events.md

@@ -116,7 +116,7 @@ export class AppComponent {
 
 Track page views for analytics:
 
-```typescript
+```ts
 import { Component, inject, signal, effect } from '@angular/core';
 import { Router, NavigationEnd } from '@angular/router';
 

adev/src/content/guide/routing/routing-with-urlmatcher.md

@@ -13,35 +13,35 @@ Implement Angular's `UrlMatcher` to create a custom route matcher.
 
 ## Create a sample application
 
-Using the Angular CLI, create a new application, *angular-custom-route-match*.
-In addition to the default Angular application framework, you will also create a *profile* component.
+Using the Angular CLI, create a new application, _angular-custom-route-match_.
+In addition to the default Angular application framework, you will also create a _profile_ component.
 
-1. Create a new Angular project, *angular-custom-route-match*.
+1. Create a new Angular project, _angular-custom-route-match_.
 
-    ```shell
-    ng new angular-custom-route-match
-    ```
+   ```shell
+   ng new angular-custom-route-match
+   ```
 
-    When prompted with `Would you like to add Angular routing?`, select `Y`.
+   When prompted with `Would you like to add Angular routing?`, select `Y`.
 
-    When prompted with `Which stylesheet format would you like to use?`, select `CSS`.
+   When prompted with `Which stylesheet format would you like to use?`, select `CSS`.
 
-    After a few moments, a new project, `angular-custom-route-match`, is ready.
+   After a few moments, a new project, `angular-custom-route-match`, is ready.
 
 1. From your terminal, navigate to the `angular-custom-route-match` directory.
-1. Create a component, *profile*.
+1. Create a component, _profile_.
 
-    ```shell
-    ng generate component profile
-    ```
+   ```shell
+   ng generate component profile
+   ```
 
 1. In your code editor, locate the file, `profile.component.html` and replace the placeholder content with the following HTML.
 
-    <docs-code header="src/app/profile/profile.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.component.html"/>
+<docs-code header="src/app/profile/profile.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/profile/profile.component.html"/>
 
 1. In your code editor, locate the file, `app.component.html` and replace the placeholder content with the following HTML.
 
-    <docs-code header="src/app/app.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.component.html"/>
+<docs-code header="src/app/app.component.html" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.component.html"/>
 
 ## Configure your routes for your application
 
@@ -52,24 +52,24 @@ This handle is identified by a preceding `@` symbol.
 1. In your code editor, open your `app.config.ts` file.
 1. Add an `import` statement for Angular's `provideRouter` and `withComponentInputBinding` as well as the application routes.
 
-    ```ts
-    import {provideRouter, withComponentInputBinding} from '@angular/router';
+   ```ts
+   import {provideRouter, withComponentInputBinding} from '@angular/router';
 
-    import {routes} from './app.routes';
-    ```
+   import {routes} from './app.routes';
+   ```
 
 1. In the providers array, add a `provideRouter(routes, withComponentInputBinding())` statement.
 
 1. Define the custom route matcher by adding the following code to the application routes.
 
-    <docs-code header="src/app/app.routes.ts" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.routes.ts" visibleRegion="matcher"/>
+<docs-code header="src/app/app.routes.ts" path="adev/src/content/examples/routing-with-urlmatcher/src/app/app.routes.ts" visibleRegion="matcher"/>
 
 This custom matcher is a function that performs the following tasks:
 
-* The matcher verifies that the array contains only one segment
-* The matcher employs a regular expression to ensure that the format of the username is a match
-* If there is a match, the function returns the entire URL, defining a `username` route parameter as a substring of the path
-* If there isn't a match, the function returns null and the router continues to look for other routes that match the URL
+- The matcher verifies that the array contains only one segment
+- The matcher employs a regular expression to ensure that the format of the username is a match
+- If there is a match, the function returns the entire URL, defining a `username` route parameter as a substring of the path
+- If there isn't a match, the function returns null and the router continues to look for other routes that match the URL
 
 HELPFUL: A custom URL matcher behaves like any other route definition. Define child routes or lazy loaded routes as you would with any other route.
 
@@ -77,12 +77,12 @@ HELPFUL: A custom URL matcher behaves like any other route definition. Define ch
 
 With the custom matcher in place, you can now bind the route parameter in the `profile` component.
 
-In your code editor, open your `profile.component.ts` file and create an `Input` matching the `username` parameter.
+In your code editor, open your `profile.component.ts` file and create an `input` matching the `username` parameter.
 We added the `withComponentInputBinding` feature earlier
 in `provideRouter`. This allows the `Router` to bind information directly to the route components.
 
 ```ts
-@Input() username!: string;
+username = input.required<string>();
 ```
 
 ## Test your custom URL matcher
@@ -91,17 +91,17 @@ With your code in place, you can now test your custom URL matcher.
 
 1. From a terminal window, run the `ng serve` command.
 
-    <docs-code language="shell">
-    ng serve
-    </docs-code>
+   ```shell
+   ng serve
+   ```
 
 1. Open a browser to `http://localhost:4200`.
 
-    You should see a single web page, consisting of a sentence that reads `Navigate to my profile`.
+   You should see a single web page, consisting of a sentence that reads `Navigate to my profile`.
 
 1. Click the **my profile** hyperlink.
 
-    A new sentence, reading `Hello, Angular!` appears on the page.
+   A new sentence, reading `Hello, Angular!` appears on the page.
 
 ## Next steps
 

adev/src/content/guide/routing/show-routes-with-outlets.md

@@ -8,7 +8,7 @@ The `RouterOutlet` directive is a placeholder that marks the location where the
 <app-footer />
 ```
 
-```angular-ts
+```ts
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
@@ -23,7 +23,7 @@ export class AppComponent {}
 
 In this example, if an application has the following routes defined:
 
-```angular-ts
+```ts
 import { Routes } from '@angular/router';
 import { HomeComponent } from './home/home.component';
 import { ProductsComponent } from './products/products.component';
@@ -96,7 +96,7 @@ In this example, the `Settings` component will display the desired panel based o
 
 A child route is like any other route, in that it needs both a `path` and a `component`. The one difference is that you place child routes in a children array within the parent route.
 
-```angular-ts
+```ts
 const routes: Routes = [
   {
     path: 'settings-component',
@@ -133,7 +133,7 @@ Each outlet must have a unique name. The name cannot be set or changed dynamical
 
 Angular matches the outlet's name to the `outlet` property defined on each route:
 
-```angular-ts
+```ts
 {
   path: 'user/:id',
   component: UserDetails,
@@ -169,7 +169,7 @@ Check out the [API docs for RouterOutlet](/api/router/RouterOutlet?tab=api) if y
 
 Passing contextual data to routed components often requires global state or complicated route configurations. To make this easier, each `RouterOutlet` supports a `routerOutletData` input. Routed components and their children can read this data as a signal using the `ROUTER_OUTLET_DATA` injection token, allowing outlet-specific configuration without modifying route definitions.
 
-```ts
+```angular-ts
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
 
@@ -186,7 +186,7 @@ export class DashboardComponent {}
 
 The routed component can inject the provided outlet data using `ROUTER_OUTLET_DATA`:
 
-```ts
+```angular-ts
 import { Component, inject } from '@angular/core';
 import { ROUTER_OUTLET_DATA } from '@angular/router';
 

adev/src/content/guide/routing/testing.md

@@ -46,7 +46,7 @@ describe('UserProfile', () => {
 });
 ```
 
-```ts
+```angular-ts
 // user-profile.component.ts
 import { Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
@@ -186,7 +186,7 @@ describe('App Router Outlet', () => {
 });
 ```
 
-```ts
+```angular-ts
 // app.component.ts
 import { Component } from '@angular/core';
 import { RouterOutlet, RouterLink } from '@angular/router';
@@ -254,7 +254,7 @@ describe('Nested Routes', () => {
 });
 ```
 
-```ts
+```angular-ts
 // nested-components.ts
 import { Component } from '@angular/core';
 import { RouterOutlet } from '@angular/router';
@@ -314,7 +314,7 @@ describe('Search', () => {
 });
 ```
 
-```ts
+```angular-ts
 // search.component.ts
 import { Component, inject, computed } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';