docs(material/chips): clean up forms examples

Cleans up the examples showing how to use chips with the forms module so that they have a single source of truth and better match our coding standards.

Fixes #33179.

Author: crisbeto

src/components-examples/material/chips/chips-reactive-form/chips-reactive-form-example.html

@@ -3,8 +3,8 @@ <h4>Chips inside of a Reactive form</h4>
   <mat-form-field class="example-form-field">
     <mat-label>Video keywords</mat-label>
     <mat-chip-grid #reactiveChipGrid aria-label="Enter reactive form keywords" [formControl]="formControl">
-    @for (keyword of reactiveKeywords(); track keyword) {
-      <mat-chip-row (removed)="removeReactiveKeyword(keyword)">
+    @for (keyword of formControl.value; track keyword) {
+      <mat-chip-row (removed)="removeKeyword(keyword)">
         {{keyword}}
       <button matChipRemove [attr.aria-label]="'remove reactive form' + keyword">
         <mat-icon>cancel</mat-icon>
@@ -15,7 +15,7 @@ <h4>Chips inside of a Reactive form</h4>
     <input
       placeholder="New keyword..."
       [matChipInputFor]="reactiveChipGrid"
-      (matChipInputTokenEnd)="addReactiveKeyword($event)"
+      (matChipInputTokenEnd)="addKeyword($event)"
     />
   </mat-form-field>
 </section>

src/components-examples/material/chips/chips-reactive-form/chips-reactive-form-example.ts

@@ -1,5 +1,5 @@
 import {LiveAnnouncer} from '@angular/cdk/a11y';
-import {ChangeDetectionStrategy, Component, inject, signal} from '@angular/core';
+import {ChangeDetectionStrategy, Component, inject} from '@angular/core';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {MatButtonModule} from '@angular/material/button';
 import {MatChipInputEvent, MatChipsModule} from '@angular/material/chips';
@@ -23,34 +23,31 @@ import {MatIconModule} from '@angular/material/icon';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChipsReactiveFormExample {
-  readonly reactiveKeywords = signal(['angular', 'how-to', 'tutorial', 'accessibility']);
-  readonly formControl = new FormControl(['angular']);
+  private _announcer = inject(LiveAnnouncer);
 
-  announcer = inject(LiveAnnouncer);
+  readonly formControl = new FormControl(['angular', 'how-to', 'tutorial', 'accessibility'], {
+    nonNullable: true,
+  });
 
-  removeReactiveKeyword(keyword: string) {
-    this.reactiveKeywords.update(keywords => {
-      const index = keywords.indexOf(keyword);
-      if (index < 0) {
-        return keywords;
-      }
-
-      keywords.splice(index, 1);
-      this.announcer.announce(`removed ${keyword} from reactive form`);
-      return [...keywords];
-    });
-  }
-
-  addReactiveKeyword(event: MatChipInputEvent): void {
+  addKeyword(event: MatChipInputEvent): void {
     const value = (event.value || '').trim();
 
-    // Add our keyword
     if (value) {
-      this.reactiveKeywords.update(keywords => [...keywords, value]);
-      this.announcer.announce(`added ${value} to reactive form`);
+      this.formControl.setValue([...this.formControl.value, value]);
+      this._announcer.announce(`added ${value} to reactive form`);
     }
 
-    // Clear the input value
-    event.chipInput!.clear();
+    event.chipInput.clear();
+  }
+
+  removeKeyword(keyword: string) {
+    const keywords = this.formControl.value;
+    const index = keywords.lastIndexOf(keyword);
+
+    if (index > -1) {
+      keywords.splice(index, 1);
+      this.formControl.setValue([...keywords]);
+      this._announcer.announce(`removed ${keyword} from reactive form`);
+    }
   }
 }

src/components-examples/material/chips/chips-template-form/chips-template-form-example.html

@@ -2,9 +2,9 @@
   <h4>Chips inside of a Template-driven form</h4>
   <mat-form-field class="example-form-field">
     <mat-label>Video keywords</mat-label>
-    <mat-chip-grid #templateChipGrid aria-label="Enter template form keywords" [(ngModel)]="templateKeywords">
-    @for (keyword of templateKeywords(); track keyword) {
-      <mat-chip-row (removed)="removeTemplateKeyword(keyword)">
+    <mat-chip-grid #templateChipGrid aria-label="Enter template form keywords" [(ngModel)]="keywords">
+    @for (keyword of keywords(); track keyword) {
+      <mat-chip-row (removed)="removeKeyword(keyword)">
         {{keyword}}
       <button matChipRemove [attr.aria-label]="'remove template form' + keyword">
         <mat-icon>cancel</mat-icon>
@@ -15,7 +15,7 @@ <h4>Chips inside of a Template-driven form</h4>
     <input
       placeholder="New keyword..."
       [matChipInputFor]="templateChipGrid"
-      (matChipInputTokenEnd)="addTemplateKeyword($event)"
+      (matChipInputTokenEnd)="addKeyword($event)"
     />
   </mat-form-field>
 </section>

src/components-examples/material/chips/chips-template-form/chips-template-form-example.ts

@@ -17,33 +17,30 @@ import {MatIconModule} from '@angular/material/icon';
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ChipsTemplateFormExample {
-  readonly templateKeywords = signal(['angular', 'how-to', 'tutorial', 'accessibility']);
+  private _announcer = inject(LiveAnnouncer);
+  readonly keywords = signal(['angular', 'how-to', 'tutorial', 'accessibility']);
 
-  announcer = inject(LiveAnnouncer);
+  addKeyword(event: MatChipInputEvent): void {
+    const value = (event.value || '').trim();
+
+    if (value) {
+      this.keywords.update(keywords => [...keywords, value]);
+      this._announcer.announce(`added ${value} to template form`);
+    }
 
-  removeTemplateKeyword(keyword: string) {
-    this.templateKeywords.update(keywords => {
+    event.chipInput.clear();
+  }
+
+  removeKeyword(keyword: string) {
+    this.keywords.update(keywords => {
       const index = keywords.indexOf(keyword);
       if (index < 0) {
         return keywords;
       }
 
       keywords.splice(index, 1);
-      this.announcer.announce(`removed ${keyword} from template form`);
+      this._announcer.announce(`removed ${keyword} from template form`);
       return [...keywords];
     });
   }
-
-  addTemplateKeyword(event: MatChipInputEvent): void {
-    const value = (event.value || '').trim();
-
-    // Add our keyword
-    if (value) {
-      this.templateKeywords.update(keywords => [...keywords, value]);
-      this.announcer.announce(`added ${value} to template form`);
-    }
-
-    // Clear the input value
-    event.chipInput!.clear();
-  }
 }

src/material/tooltip/tooltip.spec.ts

@@ -602,20 +602,6 @@ describe('MatTooltip', () => {
       expect(buttonElement.getAttribute('aria-describedby')).toBeTruthy();
     });
 
-    it('should not try to dispose the tooltip when destroyed and done hiding', async () => {
-      tooltipDirective.show();
-      fixture.detectChanges();
-      finishCurrentTooltipAnimation(overlayContainerElement, true);
-
-      const tooltipDelay = 1000;
-      tooltipDirective.hide();
-      await wait(tooltipDelay); // Change the tooltip state to hidden and trigger animation stat
-
-      fixture.componentInstance.showButton = false;
-      fixture.changeDetectorRef.markForCheck();
-      fixture.detectChanges();
-    });
-
     it('should complete the afterHidden stream when tooltip is destroyed', async () => {
       tooltipDirective.show();
       fixture.detectChanges();
@@ -1547,21 +1533,19 @@ describe('MatTooltip', () => {
 
 @Component({
   template: `
-    @if (showButton) {
-      <button #button
-        [matTooltip]="message"
-        [matTooltipPosition]="position"
-        [matTooltipClass]="{'custom-one': showTooltipClass, 'custom-two': showTooltipClass}"
-        [matTooltipTouchGestures]="touchGestures"
-        [matTooltipDisabled]="tooltipDisabled">Button</button>
-    }`,
+    <button #button
+      [matTooltip]="message"
+      [matTooltipPosition]="position"
+      [matTooltipClass]="{'custom-one': showTooltipClass, 'custom-two': showTooltipClass}"
+      [matTooltipTouchGestures]="touchGestures"
+      [matTooltipDisabled]="tooltipDisabled">Button</button>
+  `,
   imports: [MatTooltipModule, OverlayModule],
   changeDetection: ChangeDetectionStrategy.Eager,
 })
 class BasicTooltipDemo {
   position: TooltipPosition = 'below';
   message: string | number = initialTooltipMessage;
-  showButton = true;
   showTooltipClass = false;
   tooltipDisabled = false;
   touchGestures: TooltipTouchGestures = 'auto';