From 5ae6def35dbb8de62cd790851c44a9655aa7571b Mon Sep 17 00:00:00 2001 From: yogeshwaran-c Date: Tue, 24 Feb 2026 02:35:06 +0530 Subject: [PATCH] docs: use viewChild signal queries and modern patterns in code examples --- src/cdk/a11y/a11y.md | 4 ++-- src/google-maps/google-map/README.md | 2 +- src/google-maps/map-info-window/README.md | 8 ++++---- src/material/core/ripple/ripple.md | 19 +++++++++++-------- src/material/datepicker/datepicker.md | 10 ++++++---- src/material/menu/menu.md | 6 ++++-- src/material/sidenav/sidenav.md | 12 ++++++++---- 7 files changed, 36 insertions(+), 25 deletions(-) diff --git a/src/cdk/a11y/a11y.md b/src/cdk/a11y/a11y.md index ac989804d0aa..b6fb97dc86dc 100644 --- a/src/cdk/a11y/a11y.md +++ b/src/cdk/a11y/a11y.md @@ -8,7 +8,7 @@ Intended to be used with components that correspond to a `role="menu"` or `role= #### Basic usage Any component that uses a `ListKeyManager` will generally do three things: -* Create a `@ViewChildren` query for the options being managed. +* Create a `viewChildren` query for the options being managed. * Initialize the `ListKeyManager`, passing in the options. * Forward keyboard events from the managed component to the `ListKeyManager`. @@ -63,7 +63,7 @@ components that implement a `role="tree"` pattern. #### Basic usage Any component that uses a `TreeKeyManager` should do three things: -* Create a `@ViewChildren` query for the tree items being managed. +* Create a `viewChildren` query for the tree items being managed. * Initialize the `TreeKeyManager`, passing in the options. * Forward keyboard events from the managed component to the `TreeKeyManager` via `onKeydown`. diff --git a/src/google-maps/google-map/README.md b/src/google-maps/google-map/README.md index fea6e4ca791b..8f7cc23bb933 100644 --- a/src/google-maps/google-map/README.md +++ b/src/google-maps/google-map/README.md @@ -1,6 +1,6 @@ # GoogleMap -The `GoogleMap` component wraps the [`google.maps.Map` class](https://developers.google.com/maps/documentation/javascript/reference/map) from the Google Maps JavaScript API. You can configure the map via the component's inputs. The `options` input accepts a full [`google.maps.MapOptions` object](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions), and the component additionally offers convenience inputs for setting the `center` and `zoom` of the map without needing an entire `google.maps.MapOptions` object. The `height` and `width` inputs accept a string to set the size of the Google map. [Events](https://developers.google.com/maps/documentation/javascript/reference/map#Map.bounds_changed) can be bound using the outputs of the `GoogleMap` component, although events have the same name as native mouse events (e.g. `mouseenter`) have been prefixed with "map" as to not collide with the native mouse events. Other members on the `google.maps.Map` object are available on the `GoogleMap` component and can be accessed using the [`ViewChild` decorator](https://angular.dev/api/core/ViewChild) or via [`viewChild`](https://angular.dev/api/core/viewChild). +The `GoogleMap` component wraps the [`google.maps.Map` class](https://developers.google.com/maps/documentation/javascript/reference/map) from the Google Maps JavaScript API. You can configure the map via the component's inputs. The `options` input accepts a full [`google.maps.MapOptions` object](https://developers.google.com/maps/documentation/javascript/reference/map#MapOptions), and the component additionally offers convenience inputs for setting the `center` and `zoom` of the map without needing an entire `google.maps.MapOptions` object. The `height` and `width` inputs accept a string to set the size of the Google map. [Events](https://developers.google.com/maps/documentation/javascript/reference/map#Map.bounds_changed) can be bound using the outputs of the `GoogleMap` component, although events have the same name as native mouse events (e.g. `mouseenter`) have been prefixed with "map" as to not collide with the native mouse events. Other members on the `google.maps.Map` object are available on the `GoogleMap` component and can be accessed using [`viewChild`](https://angular.dev/api/core/viewChild). ## Example diff --git a/src/google-maps/map-info-window/README.md b/src/google-maps/map-info-window/README.md index 582e95d16c96..90c2fe6ad156 100644 --- a/src/google-maps/map-info-window/README.md +++ b/src/google-maps/map-info-window/README.md @@ -2,13 +2,13 @@ The `MapInfoWindow` component wraps the [`google.maps.InfoWindow` class](https://developers.google.com/maps/documentation/javascript/reference/info-window#InfoWindow) from the Google Maps JavaScript API. The `MapInfoWindow` has an `options` input as well as a convenience `position` input. Content for the `MapInfoWindow` is the inner HTML of the component, and will keep the structure and css styling of any content that is put there when it is displayed as an info window on the map. -To display the `MapInfoWindow`, it must be a child of a `GoogleMap` component, and it must have its `open` method called, so a reference to `MapInfoWindow` will need to be loaded using the [`ViewChild` decorator](https://angular.dev/api/core/ViewChild) or via [`viewChild`](https://angular.dev/api/core/viewChild). The `open` method accepts an `MapMarker` as an optional input, if you want to anchor the `MapInfoWindow` to a `MapMarker`. +To display the `MapInfoWindow`, it must be a child of a `GoogleMap` component, and it must have its `open` method called, so a reference to `MapInfoWindow` will need to be loaded using the [`viewChild`](https://angular.dev/api/core/viewChild) function. The `open` method accepts an `MapMarker` as an optional input, if you want to anchor the `MapInfoWindow` to a `MapMarker`. ## Example ```typescript // google-maps-demo.component.ts -import {Component, ViewChild} from '@angular/core'; +import {Component, viewChild} from '@angular/core'; import {GoogleMap, MapInfoWindow, MapMarker} from '@angular/google-maps'; @Component({ @@ -17,7 +17,7 @@ import {GoogleMap, MapInfoWindow, MapMarker} from '@angular/google-maps'; imports: [GoogleMap, MapInfoWindow, MapMarker], }) export class GoogleMapDemo { - @ViewChild(MapInfoWindow) infoWindow: MapInfoWindow; + infoWindow = viewChild.required(MapInfoWindow); center: google.maps.LatLngLiteral = {lat: 24, lng: 12}; markerPositions: google.maps.LatLngLiteral[] = []; @@ -28,7 +28,7 @@ export class GoogleMapDemo { } openInfoWindow(marker: MapMarker) { - this.infoWindow.open(marker); + this.infoWindow().open(marker); } } ``` diff --git a/src/material/core/ripple/ripple.md b/src/material/core/ripple/ripple.md index 54ab1baa5d36..9a8620217519 100644 --- a/src/material/core/ripple/ripple.md +++ b/src/material/core/ripple/ripple.md @@ -39,14 +39,16 @@ the `matRippleTrigger` option that expects a reference to an `HTMLElement`. Ripples can be shown programmatically by getting a reference to the `MatRipple` directive. ```ts +import {viewChild} from '@angular/core'; + class MyComponent { /** Reference to the directive instance of the ripple. */ - @ViewChild(MatRipple) ripple: MatRipple; + ripple = viewChild.required(MatRipple); /** Shows a centered and persistent ripple. */ launchRipple() { - const rippleRef = this.ripple.launch({ + const rippleRef = this.ripple().launch({ persistent: true, centered: true }); @@ -89,11 +91,11 @@ const globalRippleConfig: RippleGlobalOptions = { } }; -@NgModule({ +bootstrapApplication(MyApp, { providers: [ {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useValue: globalRippleConfig} ] -}) +}); ``` All available global options can be seen in the `RippleGlobalOptions` interface. @@ -158,21 +160,22 @@ export class AppGlobalRippleOptions implements RippleGlobalOptions { ``` ```ts -@NgModule({ +bootstrapApplication(MyApp, { providers: [ {provide: MAT_RIPPLE_GLOBAL_OPTIONS, useExisting: AppGlobalRippleOptions}, ] -}) -export class MyModule {...} +}); ``` Now that the global ripple options are set to a service we can inject, the service can be used update any global ripple option at runtime. ```ts +import {inject} from '@angular/core'; + @Component(...) export class MyComponent { - constructor(private _appRippleOptions: AppGlobalRippleOptions) {} + private _appRippleOptions = inject(AppGlobalRippleOptions); disableRipples() { this._appRippleOptions.disabled = true; diff --git a/src/material/datepicker/datepicker.md b/src/material/datepicker/datepicker.md index a95f0af9852f..cfa079dd2b25 100644 --- a/src/material/datepicker/datepicker.md +++ b/src/material/datepicker/datepicker.md @@ -408,14 +408,16 @@ bootstrapApplication(MyApp, { ``` Because `DateAdapter` is a generic class, `MatDatepicker` and `MatDatepickerInput` also need to be -made generic. When working with these classes (for example as a `ViewChild`) you should include the -appropriate generic type that corresponds to the `DateAdapter` implementation you are using. For -example: +made generic. When working with these classes (for example as a `viewChild` query) you should +include the appropriate generic type that corresponds to the `DateAdapter` implementation you are +using. For example: ```ts +import {viewChild} from '@angular/core'; + @Component({...}) export class MyComponent { - @ViewChild(MatDatepicker) datepicker: MatDatepicker; + datepicker = viewChild.required>(MatDatepicker); } ``` diff --git a/src/material/menu/menu.md b/src/material/menu/menu.md index c0f5f11170af..c9182101b38c 100644 --- a/src/material/menu/menu.md +++ b/src/material/menu/menu.md @@ -13,11 +13,13 @@ The menu exposes an API to open/close programmatically. Please note that in this `matMenuTriggerFor` directive is still necessary to attach the menu to a trigger element in the DOM. ```ts +import {viewChild} from '@angular/core'; + class MyComponent { - @ViewChild(MatMenuTrigger) trigger: MatMenuTrigger; + trigger = viewChild.required(MatMenuTrigger); someMethod() { - this.trigger.openMenu(); + this.trigger().openMenu(); } } ``` diff --git a/src/material/sidenav/sidenav.md b/src/material/sidenav/sidenav.md index b999760e0c3a..996fd0d5c461 100644 --- a/src/material/sidenav/sidenav.md +++ b/src/material/sidenav/sidenav.md @@ -186,11 +186,15 @@ To react to scrolling inside the ``, you can get a hold o `CdkScrollable` instance through the `MatSidenavContainer`. ```ts -class YourComponent implements AfterViewInit { - @ViewChild(MatSidenavContainer) sidenavContainer: MatSidenavContainer; +import {viewChild} from '@angular/core'; - ngAfterViewInit() { - this.sidenavContainer.scrollable.elementScrolled().subscribe(() => /* react to scrolling */); +class YourComponent { + sidenavContainer = viewChild.required(MatSidenavContainer); + + constructor() { + afterNextRender(() => { + this.sidenavContainer().scrollable.elementScrolled().subscribe(() => /* react to scrolling */); + }); } } ```