Skip to content

Commit e2d9cfa

Browse files
crisbetocrisbeto
authored
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.
1 parent 382cc50 commit e2d9cfa

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

49 files changed

+670
-562
lines changed

‎src/cdk-experimental/selection/selection-column.ts

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -32,12 +32,14 @@ import {CdkSelection} from './selection';
3232
template: `
3333
<ng-container cdkColumnDef>
3434
<th cdkHeaderCell *cdkHeaderCellDef>
35-
<input type="checkbox" *ngIf="selection.multiple"
36-
cdkSelectAll
37-
#allToggler="cdkSelectAll"
38-
[checked]="allToggler.checked | async"
39-
[indeterminate]="allToggler.indeterminate | async"
40-
(click)="allToggler.toggle($event)">
35+
@if (selection.multiple) {
36+
<input type="checkbox"
37+
cdkSelectAll
38+
#allToggler="cdkSelectAll"
39+
[checked]="allToggler.checked | async"
40+
[indeterminate]="allToggler.indeterminate | async"
41+
(click)="allToggler.toggle($event)">
42+
}
4143
</th>
4244
<td cdkCell *cdkCellDef="let row; let i = $index">
4345
<input type="checkbox"

‎src/material-experimental/selection/selection-column.ts

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -32,10 +32,12 @@ import {MatSelection} from './selection';
3232
template: `
3333
<ng-container matColumnDef>
3434
<th mat-header-cell *matHeaderCellDef class="mat-selection-column-header">
35-
<mat-checkbox *ngIf="selection.multiple"
36-
matSelectAll
37-
#allToggler="matSelectAll"
38-
[indeterminate]="allToggler.indeterminate | async"></mat-checkbox>
35+
@if (selection.multiple) {
36+
<mat-checkbox
37+
matSelectAll
38+
#allToggler="matSelectAll"
39+
[indeterminate]="allToggler.indeterminate | async"></mat-checkbox>
40+
}
3941
</th>
4042
<td mat-cell *matCellDef="let row; let i = $index" class="mat-selection-column-cell">
4143
<mat-checkbox

‎src/material/chips/BUILD.bazel

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,6 @@ ng_module(
2727
"//src/material/core",
2828
"//src/material/form-field",
2929
"@npm//@angular/animations",
30-
"@npm//@angular/common",
3130
"@npm//@angular/core",
3231
"@npm//@angular/forms",
3332
],

‎src/material/chips/chip-option.html

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -9,30 +9,32 @@
99
[attr.aria-label]="ariaLabel"
1010
[attr.aria-describedby]="_ariaDescriptionId"
1111
role="option">
12-
<span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic" *ngIf="_hasLeadingGraphic()">
13-
<ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
14-
<span class="mdc-evolution-chip__checkmark">
15-
<svg
16-
class="mdc-evolution-chip__checkmark-svg"
17-
viewBox="-2 -3 30 30"
18-
focusable="false"
19-
aria-hidden="true">
20-
<path class="mdc-evolution-chip__checkmark-path"
21-
fill="none" stroke="currentColor" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
22-
</svg>
12+
@if (_hasLeadingGraphic()) {
13+
<span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic">
14+
<ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
15+
<span class="mdc-evolution-chip__checkmark">
16+
<svg
17+
class="mdc-evolution-chip__checkmark-svg"
18+
viewBox="-2 -3 30 30"
19+
focusable="false"
20+
aria-hidden="true">
21+
<path class="mdc-evolution-chip__checkmark-path"
22+
fill="none" stroke="currentColor" d="M1.73,12.91 8.1,19.28 22.79,4.59" />
23+
</svg>
24+
</span>
2325
</span>
24-
</span>
26+
}
2527
<span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label">
2628
<ng-content></ng-content>
2729
<span class="mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator"></span>
2830
</span>
2931
</button>
3032
</span>
3133

32-
<span
33-
class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing"
34-
*ngIf="_hasTrailingIcon()">
35-
<ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
36-
</span>
34+
@if (_hasTrailingIcon()) {
35+
<span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing">
36+
<ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
37+
</span>
38+
}
3739

3840
<span class="cdk-visually-hidden" [id]="_ariaDescriptionId">{{ariaDescription}}</span>

‎src/material/chips/chip-row.html

Lines changed: 24 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -1,34 +1,40 @@
1-
<ng-container *ngIf="!_isEditing">
1+
@if (!_isEditing) {
22
<span class="mat-mdc-chip-focus-overlay"></span>
3-
</ng-container>
3+
}
44

55
<span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary" role="gridcell"
66
matChipAction
77
[tabIndex]="tabIndex"
88
[disabled]="disabled"
99
[attr.aria-label]="ariaLabel"
1010
[attr.aria-describedby]="_ariaDescriptionId">
11-
<span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic" *ngIf="leadingIcon">
12-
<ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
13-
</span>
14-
<span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label" [ngSwitch]="_isEditing">
15-
<ng-container *ngSwitchCase="false"><ng-content></ng-content></ng-container>
11+
@if (leadingIcon) {
12+
<span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic">
13+
<ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
14+
</span>
15+
}
1616

17-
<ng-container *ngSwitchCase="true">
18-
<ng-content *ngIf="contentEditInput; else defaultMatChipEditInput"
19-
select="[matChipEditInput]"></ng-content>
20-
<ng-template #defaultMatChipEditInput><span matChipEditInput></span></ng-template>
21-
</ng-container>
17+
<span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label">
18+
@if (_isEditing) {
19+
@if (contentEditInput) {
20+
<ng-content select="[matChipEditInput]"></ng-content>
21+
} @else {
22+
<span matChipEditInput></span>
23+
}
24+
} @else {
25+
<ng-content></ng-content>
26+
}
2227

2328
<span class="mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator" aria-hidden="true"></span>
2429
</span>
2530
</span>
2631

27-
<span
28-
class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing"
29-
role="gridcell"
30-
*ngIf="_hasTrailingIcon()">
31-
<ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
32-
</span>
32+
@if (_hasTrailingIcon()) {
33+
<span
34+
class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing"
35+
role="gridcell">
36+
<ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
37+
</span>
38+
}
3339

3440
<span class="cdk-visually-hidden" [id]="_ariaDescriptionId">{{ariaDescription}}</span>

‎src/material/chips/chip.html

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -2,18 +2,20 @@
22

33
<span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--primary">
44
<span matChipAction [isInteractive]="false">
5-
<span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic" *ngIf="leadingIcon">
6-
<ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
7-
</span>
5+
@if (leadingIcon) {
6+
<span class="mdc-evolution-chip__graphic mat-mdc-chip-graphic">
7+
<ng-content select="mat-chip-avatar, [matChipAvatar]"></ng-content>
8+
</span>
9+
}
810
<span class="mdc-evolution-chip__text-label mat-mdc-chip-action-label">
911
<ng-content></ng-content>
1012
<span class="mat-mdc-chip-primary-focus-indicator mat-mdc-focus-indicator"></span>
1113
</span>
1214
</span>
1315
</span>
1416

15-
<span
16-
class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing"
17-
*ngIf="_hasTrailingIcon()">
18-
<ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
19-
</span>
17+
@if (_hasTrailingIcon()) {
18+
<span class="mdc-evolution-chip__cell mdc-evolution-chip__cell--trailing">
19+
<ng-content select="mat-chip-trailing-icon,[matChipRemove],[matChipTrailingIcon]"></ng-content>
20+
</span>
21+
}

‎src/material/chips/module.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@
77
*/
88

99
import {ENTER} from '@angular/cdk/keycodes';
10-
import {CommonModule} from '@angular/common';
1110
import {NgModule} from '@angular/core';
1211
import {ErrorStateMatcher, MatCommonModule, MatRippleModule} from '@angular/material/core';
1312
import {MatChip} from './chip';
@@ -37,7 +36,7 @@ const CHIP_DECLARATIONS = [
3736
];
3837

3938
@NgModule({
40-
imports: [MatCommonModule, CommonModule, MatRippleModule],
39+
imports: [MatCommonModule, MatRippleModule],
4140
exports: [MatCommonModule, CHIP_DECLARATIONS],
4241
declarations: [MatChipAction, CHIP_DECLARATIONS],
4342
providers: [

‎src/material/core/BUILD.bazel

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -33,7 +33,6 @@ ng_module(
3333
"//src/cdk/keycodes",
3434
"//src/cdk/platform",
3535
"@npm//@angular/animations",
36-
"@npm//@angular/common",
3736
"@npm//@angular/core",
3837
"@npm//@angular/forms",
3938
"@npm//@angular/platform-browser",

‎src/material/core/option/index.ts

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,15 +7,14 @@
77
*/
88

99
import {NgModule} from '@angular/core';
10-
import {CommonModule} from '@angular/common';
1110
import {MatRippleModule} from '../ripple/index';
1211
import {MatPseudoCheckboxModule} from '../selection/index';
1312
import {MatCommonModule} from '../common-behaviors/common-module';
1413
import {MatOption} from './option';
1514
import {MatOptgroup} from './optgroup';
1615

1716
@NgModule({
18-
imports: [MatRippleModule, CommonModule, MatCommonModule, MatPseudoCheckboxModule],
17+
imports: [MatRippleModule, MatCommonModule, MatPseudoCheckboxModule],
1918
exports: [MatOption, MatOptgroup],
2019
declarations: [MatOption, MatOptgroup],
2120
})

‎src/material/core/option/option.html

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,20 +2,32 @@
22
be contributing to issue where sometimes VoiceOver focuses on a TextNode in the a11y tree instead
33
of the Option node (#23202). Most assistive technology will generally ignore non-role,
44
non-text-content elements. Adding aria-hidden seems to make VoiceOver behave more consistently. -->
5-
<mat-pseudo-checkbox *ngIf="multiple" class="mat-mdc-option-pseudo-checkbox" [disabled]="disabled"
6-
[state]="selected ? 'checked' : 'unchecked'" aria-hidden="true"></mat-pseudo-checkbox>
5+
@if (multiple) {
6+
<mat-pseudo-checkbox
7+
class="mat-mdc-option-pseudo-checkbox"
8+
[disabled]="disabled"
9+
[state]="selected ? 'checked' : 'unchecked'"
10+
aria-hidden="true"></mat-pseudo-checkbox>
11+
}
712

813
<ng-content select="mat-icon"></ng-content>
914

1015
<span class="mdc-list-item__primary-text" #text><ng-content></ng-content></span>
1116

1217
<!-- Render checkmark at the end for single-selection. -->
13-
<mat-pseudo-checkbox *ngIf="!multiple && selected && !hideSingleSelectionIndicator"
14-
class="mat-mdc-option-pseudo-checkbox" [disabled]="disabled" state="checked"
15-
aria-hidden="true" appearance="minimal"></mat-pseudo-checkbox>
18+
@if (!multiple && selected && !hideSingleSelectionIndicator) {
19+
<mat-pseudo-checkbox
20+
class="mat-mdc-option-pseudo-checkbox"
21+
[disabled]="disabled"
22+
state="checked"
23+
aria-hidden="true"
24+
appearance="minimal"></mat-pseudo-checkbox>
25+
}
1626

1727
<!-- See a11y notes inside optgroup.ts for context behind this element. -->
18-
<span class="cdk-visually-hidden" *ngIf="group && group._inert">({{ group.label }})</span>
28+
@if (group && group._inert) {
29+
<span class="cdk-visually-hidden">({{ group.label }})</span>
30+
}
1931

2032
<div class="mat-mdc-option-ripple mat-mdc-focus-indicator" aria-hidden="true" mat-ripple
2133
[matRippleTrigger]="_getHostElement()" [matRippleDisabled]="disabled || disableRipple">

0 commit comments

Comments
 (0)