From 67c054fd038b171772676dd9b0283f091bf39735 Mon Sep 17 00:00:00 2001 From: Michael Small Date: Thu, 25 Jun 2026 22:17:04 -0500 Subject: [PATCH] docs: add `ChangeDetectionStrategy.Eager` to Autocomplete examples --- .../autocomplete-auto-active-first-option-example.ts | 3 ++- .../autocomplete-display/autocomplete-display-example.ts | 3 ++- .../autocomplete-filter/autocomplete-filter-example.ts | 3 ++- .../autocomplete-harness/autocomplete-harness-example.ts | 3 ++- .../autocomplete-optgroup/autocomplete-optgroup-example.ts | 3 ++- .../autocomplete-overview/autocomplete-overview-example.ts | 3 ++- .../autocomplete-plain-input-example.ts | 3 ++- .../autocomplete-require-selection-example.ts | 3 ++- .../autocomplete-simple/autocomplete-simple-example.ts | 3 ++- 9 files changed, 18 insertions(+), 9 deletions(-) diff --git a/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts b/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts index 26e0d259d0b1..3e6ef8c52e98 100644 --- a/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts +++ b/src/components-examples/material/autocomplete/autocomplete-auto-active-first-option/autocomplete-auto-active-first-option-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {Observable} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; @@ -22,6 +22,7 @@ import {MatFormFieldModule} from '@angular/material/form-field'; ReactiveFormsModule, AsyncPipe, ], + changeDetection: ChangeDetectionStrategy.Eager, }) export class AutocompleteAutoActiveFirstOptionExample { myControl = new FormControl(''); diff --git a/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts b/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts index b711580e27bf..8cea2f77c71e 100644 --- a/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts +++ b/src/components-examples/material/autocomplete/autocomplete-display/autocomplete-display-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {Observable} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; @@ -26,6 +26,7 @@ export interface User { ReactiveFormsModule, AsyncPipe, ], + changeDetection: ChangeDetectionStrategy.Eager, }) export class AutocompleteDisplayExample { myControl = new FormControl(''); diff --git a/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts b/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts index 45c462c7608b..e0c4aafd8d7a 100644 --- a/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts +++ b/src/components-examples/material/autocomplete/autocomplete-filter/autocomplete-filter-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {Observable} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; @@ -22,6 +22,7 @@ import {MatFormFieldModule} from '@angular/material/form-field'; ReactiveFormsModule, AsyncPipe, ], + changeDetection: ChangeDetectionStrategy.Eager, }) export class AutocompleteFilterExample { myControl = new FormControl(''); diff --git a/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.ts b/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.ts index 321ad2f433eb..1135e16e6fe6 100644 --- a/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.ts +++ b/src/components-examples/material/autocomplete/autocomplete-harness/autocomplete-harness-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; /** @@ -8,6 +8,7 @@ import {MatAutocompleteModule} from '@angular/material/autocomplete'; selector: 'autocomplete-harness-example', templateUrl: 'autocomplete-harness-example.html', imports: [MatAutocompleteModule], + changeDetection: ChangeDetectionStrategy.Eager, }) export class AutocompleteHarnessExample { states = [ diff --git a/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts b/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts index 28da1f125f07..f977a47e40d7 100644 --- a/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts +++ b/src/components-examples/material/autocomplete/autocomplete-optgroup/autocomplete-optgroup-example.ts @@ -1,4 +1,4 @@ -import {Component, inject} from '@angular/core'; +import {ChangeDetectionStrategy, Component, inject} from '@angular/core'; import {FormBuilder, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {Observable} from 'rxjs'; import {startWith, map} from 'rxjs/operators'; @@ -32,6 +32,7 @@ export const _filter = (opt: string[], value: string): string[] => { MatAutocompleteModule, AsyncPipe, ], + changeDetection: ChangeDetectionStrategy.Eager, }) export class AutocompleteOptgroupExample { private _formBuilder = inject(FormBuilder); diff --git a/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts b/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts index c45f505b4b71..ee1ed11e8f8b 100644 --- a/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts +++ b/src/components-examples/material/autocomplete/autocomplete-overview/autocomplete-overview-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {Observable} from 'rxjs'; import {map, startWith} from 'rxjs/operators'; @@ -30,6 +30,7 @@ export interface State { MatSlideToggleModule, AsyncPipe, ], + changeDetection: ChangeDetectionStrategy.Eager, }) export class AutocompleteOverviewExample { stateCtrl = new FormControl(''); diff --git a/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts b/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts index 7d1bccb63356..0c7a7df3676e 100644 --- a/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts +++ b/src/components-examples/material/autocomplete/autocomplete-plain-input/autocomplete-plain-input-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {Observable} from 'rxjs'; import {startWith, map} from 'rxjs/operators'; @@ -13,6 +13,7 @@ import {MatAutocompleteModule} from '@angular/material/autocomplete'; templateUrl: 'autocomplete-plain-input-example.html', styleUrl: 'autocomplete-plain-input-example.css', imports: [FormsModule, MatAutocompleteModule, ReactiveFormsModule, AsyncPipe], + changeDetection: ChangeDetectionStrategy.Eager, }) export class AutocompletePlainInputExample { control = new FormControl(''); diff --git a/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts b/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts index cdbea070ebea..8da10303e45a 100644 --- a/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts +++ b/src/components-examples/material/autocomplete/autocomplete-require-selection/autocomplete-require-selection-example.ts @@ -1,4 +1,4 @@ -import {Component, ElementRef, ViewChild} from '@angular/core'; +import {ChangeDetectionStrategy, Component, ElementRef, ViewChild} from '@angular/core'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; import {MatInputModule} from '@angular/material/input'; @@ -18,6 +18,7 @@ import {MatFormFieldModule} from '@angular/material/form-field'; MatAutocompleteModule, ReactiveFormsModule, ], + changeDetection: ChangeDetectionStrategy.Eager, }) export class AutocompleteRequireSelectionExample { @ViewChild('input') input!: ElementRef; diff --git a/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts b/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts index 95c341580394..1906c77de02d 100644 --- a/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts +++ b/src/components-examples/material/autocomplete/autocomplete-simple/autocomplete-simple-example.ts @@ -1,4 +1,4 @@ -import {Component} from '@angular/core'; +import {ChangeDetectionStrategy, Component} from '@angular/core'; import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms'; import {MatAutocompleteModule} from '@angular/material/autocomplete'; import {MatInputModule} from '@angular/material/input'; @@ -18,6 +18,7 @@ import {MatFormFieldModule} from '@angular/material/form-field'; MatAutocompleteModule, ReactiveFormsModule, ], + changeDetection: ChangeDetectionStrategy.Eager, }) export class AutocompleteSimpleExample { myControl = new FormControl('');