From c185c539feee247f66767492c24e42fd0042138c Mon Sep 17 00:00:00 2001
From: Miles Malerba <mmalerba@google.com>
Date: Sun, 23 Jun 2024 21:29:18 -0700
Subject: [PATCH] docs: Fix usage of `effect` in examples (#29305)

Ensure that `effect` code that emits on public rxjs streams is run as
untracked.
---
 .../form-field-custom-control-example.ts               | 10 ++++++----
 1 file changed, 6 insertions(+), 4 deletions(-)

diff --git a/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts b/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts
index 2c0f4bc39674..c1348bf549ce 100644
--- a/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts
+++ b/src/components-examples/material/form-field/form-field-custom-control/form-field-custom-control-example.ts
@@ -13,6 +13,7 @@ import {
   input,
   model,
   signal,
+  untracked,
   viewChild,
 } from '@angular/core';
 import {takeUntilDestroyed} from '@angular/core/rxjs-interop';
@@ -175,19 +176,20 @@ export class MyTelInput implements ControlValueAccessor, MatFormFieldControl<MyT
       this._required();
       this._disabled();
       // Propagate state changes.
-      this.stateChanges.next();
+      untracked(() => this.stateChanges.next());
     });
 
     effect(() => {
       if (this._disabled()) {
-        this.parts.disable();
+        untracked(() => this.parts.disable());
       } else {
-        this.parts.enable();
+        untracked(() => this.parts.enable());
       }
     });
 
     effect(() => {
-      this.parts.setValue(this._value() || new MyTel('', '', ''));
+      const value = this._value() || new MyTel('', '', '');
+      untracked(() => this.parts.setValue(value));
     });
 
     this.parts.statusChanges.pipe(takeUntilDestroyed()).subscribe(() => {