perf(multiple): switch to built-in control flow (#27987)

Reworks the component internals to use the new built-in control flow instead of `ngIf`, `ngSwitch` and `ngFor`. This has the advantage of not requiring directives to be imported and instantiated. (cherry picked from commit e2d9cfa)
angular · Oct 24, 2023 · a3f9ca1 · a3f9ca1
1 parent 215b92a
commit a3f9ca1
Show file tree

Hide file tree

Showing 49 changed files with 670 additions and 562 deletions.
diff --git a/src/cdk-experimental/selection/selection-column.ts b/src/cdk-experimental/selection/selection-column.ts
@@ -32,12 +32,14 @@ import {CdkSelection} from './selection';
   template: `
     <ng-container cdkColumnDef>
       <th cdkHeaderCell *cdkHeaderCellDef>
-        <input type="checkbox" *ngIf="selection.multiple"
-            cdkSelectAll
-            #allToggler="cdkSelectAll"
-            [checked]="allToggler.checked | async"
-            [indeterminate]="allToggler.indeterminate | async"
-            (click)="allToggler.toggle($event)">
+        @if (selection.multiple) {
+          <input type="checkbox"
+              cdkSelectAll
+              #allToggler="cdkSelectAll"
+              [checked]="allToggler.checked | async"
+              [indeterminate]="allToggler.indeterminate | async"
+              (click)="allToggler.toggle($event)">
+        }
       </th>
       <td cdkCell *cdkCellDef="let row; let i = $index">
         <input type="checkbox"

diff --git a/src/material-experimental/selection/selection-column.ts b/src/material-experimental/selection/selection-column.ts
@@ -32,10 +32,12 @@ import {MatSelection} from './selection';
   template: `
     <ng-container matColumnDef>
       <th mat-header-cell *matHeaderCellDef class="mat-selection-column-header">
-        <mat-checkbox *ngIf="selection.multiple"
-            matSelectAll
-            #allToggler="matSelectAll"
-            [indeterminate]="allToggler.indeterminate | async"></mat-checkbox>
+        @if (selection.multiple) {
+          <mat-checkbox
+              matSelectAll
+              #allToggler="matSelectAll"
+              [indeterminate]="allToggler.indeterminate | async"></mat-checkbox>
+        }
       </th>
       <td mat-cell *matCellDef="let row; let i = $index" class="mat-selection-column-cell">
         <mat-checkbox

diff --git a/src/material/chips/BUILD.bazel b/src/material/chips/BUILD.bazel
@@ -27,7 +27,6 @@ ng_module(
         "//src/material/core",
         "//src/material/form-field",
         "@npm//@angular/animations",
-        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
     ],

diff --git a/src/material/chips/chip-option.html b/src/material/chips/chip-option.html
@@ -9,30 +9,32 @@
     [attr.aria-label]="ariaLabel"
     [attr.aria-describedby]="_ariaDescriptionId"
     role="option">
-    <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic" *ngIf="_hasLeadingGraphic()">
-      <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
-      <span class="mdc-evolution-chip__checkmark">
-        <svg
-          class="mdc-evolution-chip__checkmark-svg"
-          viewBox="-2 -3 30 30"
-          focusable="false"
-          aria-hidden="true">
-          <path class="mdc-evolution-chip__checkmark-path"
-                fill="none" stroke="currentColor" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
-        </svg>
+    @if (_hasLeadingGraphic()) {
+      <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic">
+        <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
+        <span class="mdc-evolution-chip__checkmark">
+          <svg
+            class="mdc-evolution-chip__checkmark-svg"
+            viewBox="-2 -3 30 30"
+            focusable="false"
+            aria-hidden="true">
+            <path class="mdc-evolution-chip__checkmark-path"
+                  fill="none" stroke="currentColor" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
+          </svg>
+        </span>
       </span>
-    </span>
+    }
     <span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label">
       <ng-content></ng-content>
       <span class="mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator"></span>
     </span>
   </button>
 </span>
 
-<span
-  class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing"
-  *ngIf="_hasTrailingIcon()">
-  <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
-</span>
+@if (_hasTrailingIcon()) {
+  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing">
+    <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
+  </span>
+}
 
 <span class="cdk-visually-hidden" [id]="_ariaDescriptionId">{{ariaDescription}}</span>
diff --git a/src/material/chips/chip-row.html b/src/material/chips/chip-row.html
@@ -1,34 +1,40 @@
-<ng-container *ngIf="!_isEditing">
+@if (!_isEditing) {
   <span class="mat-mdc-chip-focus-overlay"></span>
-</ng-container>
+}
 
 <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell"
     matChipAction
     [tabIndex]="tabIndex"
     [disabled]="disabled"
     [attr.aria-label]="ariaLabel"
     [attr.aria-describedby]="_ariaDescriptionId">
-  <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic" *ngIf="leadingIcon">
-    <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
-  </span>
-  <span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label" [ngSwitch]="_isEditing">
-    <ng-container *ngSwitchCase="false"><ng-content></ng-content></ng-container>
+  @if (leadingIcon) {
+    <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic">
+      <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
+    </span>
+  }
 
-    <ng-container *ngSwitchCase="true">
-      <ng-content *ngIf="contentEditInput; else defaultMatChipEditInput"
-                  select="[matChipEditInput]"></ng-content>
-      <ng-template #defaultMatChipEditInput><span matChipEditInput></span></ng-template>
-    </ng-container>
+  <span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label">
+    @if (_isEditing) {
+      @if (contentEditInput) {
+        <ng-content select="[matChipEditInput]"></ng-content>
+      } @else {
+        <span matChipEditInput></span>
+      }
+    } @else {
+      <ng-content></ng-content>
+    }
 
     <span class="mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator" aria-hidden="true"></span>
   </span>
 </span>
 
-<span
-  class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing"
-  role="gridcell"
-  *ngIf="_hasTrailingIcon()">
-  <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
-</span>
+@if (_hasTrailingIcon()) {
+  <span
+    class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing"
+    role="gridcell">
+    <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
+  </span>
+}
 
 <span class="cdk-visually-hidden" [id]="_ariaDescriptionId">{{ariaDescription}}</span>
diff --git a/src/material/chips/chip.html b/src/material/chips/chip.html
@@ -2,18 +2,20 @@
 
 <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary">
   <span matChipAction [isInteractive]="false">
-    <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic" *ngIf="leadingIcon">
-      <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
-    </span>
+    @if (leadingIcon) {
+      <span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic">
+        <ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
+      </span>
+    }
     <span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label">
       <ng-content></ng-content>
       <span class="mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator"></span>
     </span>
   </span>
 </span>
 
-<span
-  class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing"
-  *ngIf="_hasTrailingIcon()">
-  <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
-</span>
+@if (_hasTrailingIcon()) {
+  <span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing">
+    <ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
+  </span>
+}
diff --git a/src/material/chips/module.ts b/src/material/chips/module.ts
@@ -7,7 +7,6 @@
  */
 
 import {ENTER} from '@angular/cdk/keycodes';
-import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {ErrorStateMatcher, MatCommonModule, MatRippleModule} from '@angular/material/core';
 import {MatChip} from './chip';
@@ -37,7 +36,7 @@ const CHIP_DECLARATIONS = [
 ];
 
 @NgModule({
-  imports: [MatCommonModule, CommonModule, MatRippleModule],
+  imports: [MatCommonModule, MatRippleModule],
   exports: [MatCommonModule, CHIP_DECLARATIONS],
   declarations: [MatChipAction, CHIP_DECLARATIONS],
   providers: [

diff --git a/src/material/core/BUILD.bazel b/src/material/core/BUILD.bazel
@@ -33,7 +33,6 @@ ng_module(
         "//src/cdk/keycodes",
         "//src/cdk/platform",
         "@npm//@angular/animations",
-        "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@angular/forms",
         "@npm//@angular/platform-browser",

diff --git a/src/material/core/option/index.ts b/src/material/core/option/index.ts
@@ -7,15 +7,14 @@
  */
 
 import {NgModule} from '@angular/core';
-import {CommonModule} from '@angular/common';
 import {MatRippleModule} from '../ripple/index';
 import {MatPseudoCheckboxModule} from '../selection/index';
 import {MatCommonModule} from '../common-behaviors/common-module';
 import {MatOption} from './option';
 import {MatOptgroup} from './optgroup';
 
 @NgModule({
-  imports: [MatRippleModule, CommonModule, MatCommonModule, MatPseudoCheckboxModule],
+  imports: [MatRippleModule, MatCommonModule, MatPseudoCheckboxModule],
   exports: [MatOption, MatOptgroup],
   declarations: [MatOption, MatOptgroup],
 })

diff --git a/src/material/core/option/option.html b/src/material/core/option/option.html
@@ -2,20 +2,32 @@
  be contributing to issue where sometimes VoiceOver focuses on a TextNode in the a11y tree instead
  of the Option node (#23202). Most assistive technology will generally ignore non-role,
  non-text-content elements. Adding aria-hidden seems to make VoiceOver behave more consistently. -->
-<mat-pseudo-checkbox *ngIf="multiple" class="mat-mdc-option-pseudo-checkbox" [disabled]="disabled"
-    [state]="selected ? 'checked' : 'unchecked'" aria-hidden="true"></mat-pseudo-checkbox>
+@if (multiple) {
+    <mat-pseudo-checkbox
+        class="mat-mdc-option-pseudo-checkbox"
+        [disabled]="disabled"
+        [state]="selected ? 'checked' : 'unchecked'"
+        aria-hidden="true"></mat-pseudo-checkbox>
+}
 
 <ng-content select="mat-icon"></ng-content>
 
 <span class="mdc-list-item__primary-text" #text><ng-content></ng-content></span>
 
 <!-- Render checkmark at the end for single-selection. -->
-<mat-pseudo-checkbox *ngIf="!multiple && selected && !hideSingleSelectionIndicator"
-    class="mat-mdc-option-pseudo-checkbox" [disabled]="disabled" state="checked"
-    aria-hidden="true" appearance="minimal"></mat-pseudo-checkbox>
+@if (!multiple && selected && !hideSingleSelectionIndicator) {
+    <mat-pseudo-checkbox
+        class="mat-mdc-option-pseudo-checkbox"
+        [disabled]="disabled"
+        state="checked"
+        aria-hidden="true"
+        appearance="minimal"></mat-pseudo-checkbox>
+}
 
 <!-- See a11y notes inside optgroup.ts for context behind this element. -->
-<span class="cdk-visually-hidden" *ngIf="group && group._inert">({{ group.label }})</span>
+@if (group && group._inert) {
+    <span class="cdk-visually-hidden">({{ group.label }})</span>
+}
 
 <div class="mat-mdc-option-ripple mat-mdc-focus-indicator" aria-hidden="true" mat-ripple
      [matRippleTrigger]="_getHostElement()" [matRippleDisabled]="disabled || disableRipple">