Skip to content

Commit 06eb0ab

Browse files
crisbetocrisbeto
committedMay 23, 2024
fix: use new control flow syntax
Reworks all the templates to use Angular's new control flow syntax.
·
20.0.0-next.519.1.0-next.3
1 parent dcf45d3 commit 06eb0ab

36 files changed

+316
-284
lines changed
 

‎material.angular.io/scenes/src/app/scenes/autocomplete/autocomplete-scene.ts

-2
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@ import {FormControl, FormsModule, ReactiveFormsModule} from '@angular/forms';
88
import {MatFormFieldModule} from '@angular/material/form-field';
99
import {MatInput, MatInputModule} from '@angular/material/input';
1010
import {MatAutocompleteModule} from '@angular/material/autocomplete';
11-
import {NgFor} from '@angular/common';
1211

1312

1413
@Component({
@@ -22,7 +21,6 @@ import {NgFor} from '@angular/common';
2221
MatFormFieldModule,
2322
MatInputModule,
2423
MatAutocompleteModule,
25-
NgFor,
2624
],
2725
})
2826
export class AutocompleteScene implements AfterViewInit {

‎material.angular.io/scenes/src/app/scenes/grid-list/grid-list-scene.html

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
11
<mat-grid-list cols="4" rowHeight="70px">
2-
<mat-grid-tile
3-
*ngFor="let tile of tiles"
2+
@for (tile of tiles; track tile) {
3+
<mat-grid-tile
44
[colspan]="tile.cols"
55
[rowspan]="tile.rows"
6-
[style.background]="tile.color">
7-
</mat-grid-tile>
6+
[style.background]="tile.color"/>
7+
}
88
</mat-grid-list>

‎material.angular.io/scenes/src/app/scenes/grid-list/grid-list-scene.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import {NgFor} from '@angular/common';
21
import {Component, ViewEncapsulation} from '@angular/core';
32
import {MatGridListModule} from '@angular/material/grid-list';
43

@@ -8,7 +7,7 @@ import {MatGridListModule} from '@angular/material/grid-list';
87
styleUrls: ['./grid-list-scene.scss'],
98
encapsulation: ViewEncapsulation.None,
109
standalone: true,
11-
imports: [MatGridListModule, NgFor],
10+
imports: [MatGridListModule],
1211
})
1312
export class GridListScene {
1413
tiles = [

‎material.angular.io/scenes/src/app/scenes/sort/sort-scene.html

+6-4
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@
44
<th mat-sort-header="calories">Calories</th>
55
</tr>
66

7-
<tr *ngFor="let dessert of desserts">
8-
<td>{{dessert.name}}</td>
9-
<td>{{dessert.calories}}</td>
10-
</tr>
7+
@for (dessert of desserts; track dessert) {
8+
<tr>
9+
<td>{{dessert.name}}</td>
10+
<td>{{dessert.calories}}</td>
11+
</tr>
12+
}
1113
</table>

‎material.angular.io/scenes/src/app/scenes/sort/sort-scene.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import {NgFor} from '@angular/common';
21
import {Component, ViewEncapsulation} from '@angular/core';
32
import {MatSortModule} from '@angular/material/sort';
43

@@ -16,7 +15,7 @@ export interface Dessert {
1615
templateUrl: './sort-scene.html',
1716
styleUrls: ['./sort-scene.scss'],
1817
standalone: true,
19-
imports: [MatSortModule, NgFor]
18+
imports: [MatSortModule]
2019
})
2120
export class SortScene {
2221
desserts: Dessert[] = [

‎material.angular.io/src/app/pages/component-category-list/component-category-list.html

+21-17
Original file line numberDiff line numberDiff line change
@@ -3,20 +3,24 @@
33
focusOnNavigation>
44
<div [innerHTML]="_categoryListSummary"></div>
55
</div>
6-
<div class="docs-component-category-list" *ngIf="(params | async)?.section as section">
7-
<a *ngFor="let component of docItems.getItems(section)"
8-
class="docs-component-category-list-item"
9-
[routerLink]="'/' + section + '/' + component.id">
10-
<div class="docs-component-category-list-card" matRipple>
11-
<img *ngIf="section === 'components'"
12-
class="docs-component-category-list-card-image-wrapper"
13-
[src]="'../../../assets/screenshots/' + component.id + '.scene.png'"
14-
loading="lazy"
15-
alt=""
16-
role="presentation"
17-
aria-hidden="true">
18-
<div class="docs-component-category-list-card-title">{{component.name}}</div>
19-
<div class="docs-component-category-list-card-summary">{{component.summary}}</div>
20-
</div>
21-
</a>
22-
</div>
6+
@if ((params | async)?.section; as section) {
7+
<div class="docs-component-category-list">
8+
@for (component of docItems.getItems(section); track component) {
9+
<a class="docs-component-category-list-item"
10+
[routerLink]="'/' + section + '/' + component.id">
11+
<div class="docs-component-category-list-card" matRipple>
12+
@if (section === 'components') {
13+
<img class="docs-component-category-list-card-image-wrapper"
14+
[src]="'../../../assets/screenshots/' + component.id + '.scene.png'"
15+
loading="lazy"
16+
alt=""
17+
role="presentation"
18+
aria-hidden="true">
19+
}
20+
<div class="docs-component-category-list-card-title">{{component.name}}</div>
21+
<div class="docs-component-category-list-card-summary">{{component.summary}}</div>
22+
</div>
23+
</a>
24+
}
25+
</div>
26+
}

‎material.angular.io/src/app/pages/component-category-list/component-category-list.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
import {CommonModule, NgIf, NgFor, AsyncPipe} from '@angular/common';
1+
import {AsyncPipe} from '@angular/common';
22
import {Component, NgModule, OnDestroy, OnInit} from '@angular/core';
33
import {MatCardModule} from '@angular/material/card';
44
import {ActivatedRoute, Params, RouterModule, RouterLink} from '@angular/router';
@@ -18,7 +18,7 @@ import {ComponentPageTitle} from '../page-title/page-title';
1818
templateUrl: './component-category-list.html',
1919
styleUrls: ['./component-category-list.scss'],
2020
standalone: true,
21-
imports: [NavigationFocus, NgIf, NgFor, RouterLink, AsyncPipe, MatRipple]
21+
imports: [NavigationFocus, RouterLink, AsyncPipe, MatRipple]
2222
})
2323
export class ComponentCategoryList implements OnInit, OnDestroy {
2424
params: Observable<Params> | undefined;
@@ -52,7 +52,7 @@ export class ComponentCategoryList implements OnInit, OnDestroy {
5252
}
5353

5454
@NgModule({
55-
imports: [CommonModule, MatCardModule, RouterModule, ComponentCategoryList],
55+
imports: [MatCardModule, RouterModule, ComponentCategoryList],
5656
exports: [ComponentCategoryList],
5757
})
5858
export class ComponentCategoryListModule { }

‎material.angular.io/src/app/pages/component-sidenav/component-nav.html

+14-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,16 @@
11
<div class="docs-component-viewer-nav">
2-
<div class="docs-component-viewer-nav-content" *ngIf="(params | async)?.section as section">
3-
<mat-nav-list>
4-
<a mat-list-item *ngFor="let component of docItems.getItems(section)"
5-
[routerLink]="'/' + section+ '/' + component.id"
6-
routerLinkActive="docs-component-viewer-sidenav-item-selected"
7-
[attr.aria-current]="currentItemId === component.id ? 'page': 'false'">
8-
{{component.name}}
9-
</a>
10-
</mat-nav-list>
11-
</div>
2+
@if ((params | async)?.section; as section) {
3+
<div class="docs-component-viewer-nav-content">
4+
<mat-nav-list>
5+
@for (component of docItems.getItems(section); track component) {
6+
<a mat-list-item
7+
[routerLink]="'/' + section+ '/' + component.id"
8+
routerLinkActive="docs-component-viewer-sidenav-item-selected"
9+
[attr.aria-current]="currentItemId === component.id ? 'page': 'false'">
10+
{{component.name}}
11+
</a>
12+
}
13+
</mat-nav-list>
14+
</div>
15+
}
1216
</div>

‎material.angular.io/src/app/pages/component-sidenav/component-sidenav.html

+12-12
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,22 @@
11
<mat-sidenav-container class="docs-component-viewer-sidenav-container">
22
<!-- If on small screen, menu resides in drawer -->
3-
<mat-sidenav #sidenav class="docs-component-viewer-sidenav"
4-
*ngIf="(isScreenSmall | async)"
5-
[opened]="(isScreenSmall | async) === false"
6-
[mode]="(isScreenSmall | async) ? 'over' : 'side'"
7-
[fixedInViewport]="(isScreenSmall | async)"
8-
[fixedTopGap]="(isExtraScreenSmall | async) ? 92 : 56">
9-
<app-component-nav [params]="params"></app-component-nav>
10-
</mat-sidenav>
3+
@if (isScreenSmall | async) {
4+
<mat-sidenav #sidenav class="docs-component-viewer-sidenav"
5+
[opened]="(isScreenSmall | async) === false"
6+
[mode]="(isScreenSmall | async) ? 'over' : 'side'"
7+
[fixedInViewport]="(isScreenSmall | async)"
8+
[fixedTopGap]="(isExtraScreenSmall | async) ? 92 : 56">
9+
<app-component-nav [params]="params"></app-component-nav>
10+
</mat-sidenav>
11+
}
1112
<div class="docs-component-sidenav-content">
1213
<component-page-header (toggleSidenav)="toggleSidenav(sidenav)"></component-page-header>
1314
<div class="docs-component-sidenav-inner-content">
1415
<main class="docs-component-sidenav-body-content">
1516
<!-- If on large screen, menu resides to left of content -->
16-
<app-component-nav
17-
*ngIf="(isScreenSmall | async) === false"
18-
[params]="params">
19-
</app-component-nav>
17+
@if ((isScreenSmall | async) === false) {
18+
<app-component-nav [params]="params"/>
19+
}
2020
<router-outlet></router-outlet>
2121
</main>
2222
<app-footer class="docs-component-viewer-footer"></app-footer>

‎material.angular.io/src/app/pages/component-sidenav/component-sidenav.ts

+3-8
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,7 @@ import {Component,
1111
import {animate, state, style, transition, trigger} from '@angular/animations';
1212
import {CdkAccordionModule} from '@angular/cdk/accordion';
1313
import {BreakpointObserver} from '@angular/cdk/layout';
14-
import {CommonModule, NgIf, AsyncPipe, NgFor} from '@angular/common';
15-
import {HttpClientModule} from '@angular/common/http';
14+
import {AsyncPipe} from '@angular/common';
1615
import {FormsModule} from '@angular/forms';
1716
import {MatIconModule} from '@angular/material/icon';
1817
import {MatListModule} from '@angular/material/list';
@@ -74,7 +73,6 @@ const SMALL_WIDTH_BREAKPOINT = 959;
7473
standalone: true,
7574
imports: [
7675
MatSidenavModule,
77-
NgIf,
7876
forwardRef(() => ComponentNav),
7977
ComponentPageHeader,
8078
RouterOutlet,
@@ -137,9 +135,7 @@ export class ComponentSidenav implements OnInit, OnDestroy {
137135
],
138136
standalone: true,
139137
imports: [
140-
NgIf,
141138
MatListModule,
142-
NgFor,
143139
RouterLinkActive,
144140
RouterLink,
145141
AsyncPipe,
@@ -183,16 +179,15 @@ const routes: Routes = [{
183179
MatSidenavModule,
184180
MatListModule,
185181
RouterModule,
186-
CommonModule,
187182
ComponentCategoryListModule,
188183
ComponentViewerModule,
189184
DocViewerModule,
190185
FormsModule,
191-
HttpClientModule,
192186
CdkAccordionModule,
193187
MatIconModule,
194188
RouterModule.forChild(routes),
195-
ComponentSidenav, ComponentNav
189+
ComponentSidenav,
190+
ComponentNav
196191
],
197192
exports: [ComponentSidenav],
198193
})

‎material.angular.io/src/app/pages/component-viewer/component-api.html

+11-10
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
<ng-container *ngIf="componentViewer.componentDocItem | async; let docItem">
1+
@if (componentViewer.componentDocItem | async; as docItem) {
22
<span class="cdk-visually-hidden" tabindex="-1">
33
API for {{docItem.id}}
44
</span>
@@ -14,14 +14,15 @@
1414
(contentRendered)="updateTableOfContents(docItem.name, $event)">
1515
</doc-viewer>
1616

17-
<doc-viewer *ngFor="let additionalApiDoc of docItem.additionalApiDocs; let index = index"
18-
documentUrl="/docs-content/api-docs/{{additionalApiDoc.path}}"
19-
class="docs-component-view-text-content"
20-
(contentRendered)="updateTableOfContents(additionalApiDoc.name, $event, index + 1)">
21-
</doc-viewer>
17+
@for (additionalApiDoc of docItem.additionalApiDocs; track additionalApiDoc) {
18+
<doc-viewer
19+
documentUrl="/docs-content/api-docs/{{additionalApiDoc.path}}"
20+
class="docs-component-view-text-content"
21+
(contentRendered)="updateTableOfContents(additionalApiDoc.name, $event, $index + 1)"/>
22+
}
2223
</div>
2324

24-
<table-of-contents #toc
25-
*ngIf="showToc | async"
26-
container=".mat-drawer-content"></table-of-contents>
27-
</ng-container>
25+
@if (showToc | async) {
26+
<table-of-contents #toc container=".mat-drawer-content"/>
27+
}
28+
}

‎material.angular.io/src/app/pages/component-viewer/component-examples.html

+9-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
1-
<ng-container *ngIf="componentViewer.componentDocItem | async; let docItem">
1+
@if (componentViewer.componentDocItem | async; as docItem) {
22
<span class="cdk-visually-hidden" tabindex="-1">
33
Examples for {{docItem.id}}
44
</span>
5-
<example-viewer
6-
*ngFor="let example of docItem.examples"
7-
[example]="example"
8-
[showCompactToggle]="false"
9-
[view]="'demo'"></example-viewer>
10-
</ng-container>
5+
6+
@for (example of docItem.examples; track example) {
7+
<example-viewer
8+
[example]="example"
9+
[showCompactToggle]="false"
10+
view="demo"/>
11+
}
12+
}

‎material.angular.io/src/app/pages/component-viewer/component-overview.html

+7-3
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
<ng-container *ngIf="componentViewer.componentDocItem | async; let docItem">
1+
@if (componentViewer.componentDocItem | async; as docItem) {
22
<h2 class="cdk-visually-hidden" tabindex="-1">
33
Overview for {{docItem.id}}
44
</h2>
55
<doc-viewer [documentUrl]="getOverviewDocumentUrl(docItem)"
66
class="docs-component-view-text-content docs-component-overview"
77
(contentRendered)="updateTableOfContents('Overview Content', $event)">
88
</doc-viewer>
9-
<table-of-contents #toc container=".mat-drawer-content" *ngIf="showToc | async"></table-of-contents>
10-
</ng-container>
9+
10+
@if (showToc | async) {
11+
<table-of-contents #toc container=".mat-drawer-content"/>
12+
}
13+
}
14+

‎material.angular.io/src/app/pages/component-viewer/component-viewer.html

+6-5
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@
44
id="component-viewer"
55
focusOnNavigation
66
[tabPanel]="panel">
7-
<a mat-tab-link class="docs-component-viewer-section-tab"
8-
*ngFor="let section of sections"
9-
[routerLink]="section.toLowerCase()"
10-
routerLinkActive #rla="routerLinkActive"
11-
[active]="rla.isActive">{{section}}</a>
7+
@for (section of sections; track section) {
8+
<a mat-tab-link class="docs-component-viewer-section-tab"
9+
[routerLink]="section.toLowerCase()"
10+
routerLinkActive #rla="routerLinkActive"
11+
[active]="rla.isActive">{{section}}</a>
12+
}
1213
</nav>
1314

1415
<mat-tab-nav-panel #panel class="docs-component-viewer-content">

‎material.angular.io/src/app/pages/component-viewer/component-viewer.ts

+5-9
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {BreakpointObserver} from '@angular/cdk/layout';
2-
import {CommonModule, NgFor, NgIf, AsyncPipe} from '@angular/common';
2+
import {AsyncPipe} from '@angular/common';
33
import {
44
ChangeDetectorRef,
55
Component,
@@ -42,7 +42,6 @@ import {ExampleViewer} from '../../shared/example-viewer/example-viewer';
4242
imports: [
4343
MatTabsModule,
4444
NavigationFocus,
45-
NgFor,
4645
RouterLinkActive,
4746
RouterLink,
4847
RouterOutlet,
@@ -153,7 +152,6 @@ export class ComponentBaseView implements OnInit, OnDestroy {
153152
encapsulation: ViewEncapsulation.None,
154153
standalone: true,
155154
imports: [
156-
NgIf,
157155
DocViewer,
158156
TableOfContents,
159157
AsyncPipe,
@@ -186,9 +184,7 @@ export class ComponentOverview extends ComponentBaseView {
186184
encapsulation: ViewEncapsulation.None,
187185
standalone: true,
188186
imports: [
189-
NgIf,
190187
DocViewer,
191-
NgFor,
192188
TableOfContents,
193189
AsyncPipe,
194190
],
@@ -214,8 +210,6 @@ export class ComponentApi extends ComponentBaseView {
214210
encapsulation: ViewEncapsulation.None,
215211
standalone: true,
216212
imports: [
217-
NgIf,
218-
NgFor,
219213
ExampleViewer,
220214
AsyncPipe,
221215
],
@@ -235,8 +229,10 @@ export class ComponentExamples extends ComponentBaseView {
235229
MatTabsModule,
236230
RouterModule,
237231
DocViewerModule,
238-
CommonModule,
239-
ComponentViewer, ComponentOverview, ComponentApi, ComponentExamples,
232+
ComponentViewer,
233+
ComponentOverview,
234+
ComponentApi,
235+
ComponentExamples,
240236
],
241237
exports: [ComponentViewer],
242238
})

‎material.angular.io/src/app/pages/guide-list/guide-list.html

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<main focusOnNavigation aria-label="Guide list" id="guide-list" class="docs-guide">
22
<div class="docs-guide-list">
3-
<a class="docs-guide-item" *ngFor="let guide of guideItems.getAllItems()"
4-
routerLink="/guide/{{guide.id}}"
5-
matRipple>
6-
<mat-card class="docs-guide-card" appearance="outlined">
7-
<mat-card-title>{{guide.name}}</mat-card-title>
8-
<mat-card-content class="docs-guide-card-summary">
9-
{{guide.overview}}
10-
</mat-card-content>
11-
</mat-card>
12-
</a>
3+
@for (guide of guideItems.getAllItems(); track guide) {
4+
<a class="docs-guide-item"
5+
routerLink="/guide/{{guide.id}}"
6+
matRipple>
7+
<mat-card class="docs-guide-card" appearance="outlined">
8+
<mat-card-title>{{guide.name}}</mat-card-title>
9+
<mat-card-content class="docs-guide-card-summary">
10+
{{guide.overview}}
11+
</mat-card-content>
12+
</mat-card>
13+
</a>
14+
}
1315
</div>
1416
</main>
1517

‎material.angular.io/src/app/pages/guide-list/guide-list.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,6 @@ import {Component, HostBinding, OnInit} from '@angular/core';
22
import {GuideItems} from '../../shared/guide-items/guide-items';
33
import {RouterLink} from '@angular/router';
44
import {Footer} from '../../shared/footer/footer';
5-
import {NgFor} from '@angular/common';
65
import {NavigationFocus} from '../../shared/navigation-focus/navigation-focus';
76
import {ComponentPageTitle} from '../page-title/page-title';
87
import {MatCardModule} from '@angular/material/card';
@@ -13,7 +12,7 @@ import {MatRipple} from '@angular/material/core';
1312
templateUrl: './guide-list.html',
1413
styleUrls: ['./guide-list.scss'],
1514
standalone: true,
16-
imports: [NavigationFocus, NgFor, RouterLink, MatCardModule, Footer, MatRipple]
15+
imports: [NavigationFocus, RouterLink, MatCardModule, Footer, MatRipple]
1716
})
1817
export class GuideList implements OnInit {
1918
@HostBinding('class.main-content') readonly mainContentClass = true;

‎material.angular.io/src/app/pages/homepage/homepage.html

+19-16
Original file line numberDiff line numberDiff line change
@@ -53,13 +53,15 @@ <h2>Featured components</h2>
5353
</a>
5454
</div>
5555
<app-carousel [aria-label]="'Featured components'">
56-
<a *ngFor="let comp of getTopComponents()" carousel-item class="carousel-item docs-featured-components-carousel-item"
57-
routerLink="/components/{{comp}}">
58-
<div class="docs-homepage-img-container">
59-
<img alt="" src="../../../assets/screenshots/{{comp}}.scene.png" role="presentation">
60-
</div>
61-
{{(comp[0].toUpperCase() + comp.slice(1)).replace('-', ' ')}}
62-
</a>
56+
@for (comp of getTopComponents(); track comp) {
57+
<a carousel-item class="carousel-item docs-featured-components-carousel-item"
58+
routerLink="/components/{{comp}}">
59+
<div class="docs-homepage-img-container">
60+
<img alt="" src="../../../assets/screenshots/{{comp}}.scene.png" role="presentation">
61+
</div>
62+
{{(comp[0].toUpperCase() + comp.slice(1)).replace('-', ' ')}}
63+
</a>
64+
}
6365
</app-carousel>
6466
</div>
6567

@@ -75,15 +77,16 @@ <h2>Guides</h2>
7577
</a>
7678
</div>
7779
<app-carousel aria-label="Guides">
78-
<a carousel-item class="carousel-item docs-homepage-guides-carousel-item"
79-
*ngFor="let guide of guideItems.getAllItems()"
80-
routerLink="/guide/{{guide.id}}"
81-
matRipple>
82-
<mat-card class="docs-homepage-guides-card" appearance="outlined">
83-
<mat-card-title>{{guide.name}}</mat-card-title>
84-
<mat-card-content class="docs-component-category-list-card-summary">{{guide.overview}}</mat-card-content>
85-
</mat-card>
86-
</a>
80+
@for (guide of guideItems.getAllItems(); track guide) {
81+
<a carousel-item class="carousel-item docs-homepage-guides-carousel-item"
82+
routerLink="/guide/{{guide.id}}"
83+
matRipple>
84+
<mat-card class="docs-homepage-guides-card" appearance="outlined">
85+
<mat-card-title>{{guide.name}}</mat-card-title>
86+
<mat-card-content class="docs-component-category-list-card-summary">{{guide.overview}}</mat-card-content>
87+
</mat-card>
88+
</a>
89+
}
8790
</app-carousel>
8891
</div>
8992

‎material.angular.io/src/app/pages/homepage/homepage.ts

-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {MatIconModule} from '@angular/material/icon';
1111
import {MatDividerModule} from '@angular/material/divider';
1212
import {MatCardModule} from '@angular/material/card';
1313
import {GuideItems} from '../../shared/guide-items/guide-items';
14-
import {NgFor} from '@angular/common';
1514

1615
import {Support} from '../../shared/support/support';
1716
import {Carousel, CarouselItem} from '../../shared/carousel/carousel';
@@ -31,7 +30,6 @@ const TOP_COMPONENTS = ['datepicker', 'input', 'slide-toggle', 'slider', 'button
3130
MatDividerModule,
3231
MatIconModule,
3332
Carousel,
34-
NgFor,
3533
CarouselItem,
3634
MatCardModule,
3735
Support,

‎material.angular.io/src/app/shared/carousel/carousel.html

+12-8
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
<button (click)="previous()" *ngIf="this.showPrevArrow" aria-hidden="true" tabindex="-1"
2-
class="docs-carousel-nav docs-carousel-nav-prev" mat-icon-button aria-label="previous">
3-
<mat-icon>navigate_before</mat-icon>
4-
</button>
1+
@if (showPrevArrow) {
2+
<button (click)="previous()" aria-hidden="true" tabindex="-1"
3+
class="docs-carousel-nav docs-carousel-nav-prev" mat-icon-button aria-label="previous">
4+
<mat-icon>navigate_before</mat-icon>
5+
</button>
6+
}
57

68
<div #contentWrapper (keyup)="onKeydown($event)"
79
class="docs-carousel-content-wrapper" role="region">
@@ -10,7 +12,9 @@
1012
</div>
1113
</div>
1214

13-
<button (click)="next()" *ngIf="this.showNextArrow" aria-hidden="true" tabindex="-1"
14-
class="docs-carousel-nav docs-carousel-nav-next" mat-icon-button aria-label="next">
15-
<mat-icon>navigate_next</mat-icon>
16-
</button>
15+
@if (showNextArrow) {
16+
<button (click)="next()" aria-hidden="true" tabindex="-1"
17+
class="docs-carousel-nav docs-carousel-nav-next" mat-icon-button aria-label="next">
18+
<mat-icon>navigate_next</mat-icon>
19+
</button>
20+
}

‎material.angular.io/src/app/shared/carousel/carousel.spec.ts

+11-5
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,4 @@
11
import {Component, ViewChild} from '@angular/core';
2-
import {NgFor} from '@angular/common';
32
import {waitForAsync, ComponentFixture, fakeAsync, flush, TestBed} from '@angular/core/testing';
43
import {DocsAppTestingModule} from '../../testing/testing-module';
54
import {Carousel, CarouselItem} from './carousel';
@@ -54,8 +53,9 @@ describe('HorizontalCarousel', () => {
5453
selector: 'test-carousel',
5554
template: `
5655
<app-carousel>
57-
<div carousel-item class="docs-carousel-item-container"
58-
*ngFor="let i of [].constructor(numberOfItems) "></div>
56+
@for (i of items; track i) {
57+
<div carousel-item class="docs-carousel-item-container"></div>
58+
}
5959
</app-carousel>`,
6060
styles: [`
6161
.docs-carousel-item-container {
@@ -64,9 +64,15 @@ describe('HorizontalCarousel', () => {
6464
}
6565
`],
6666
standalone: true,
67-
imports: [Carousel, CarouselItem, NgFor, DocsAppTestingModule]
67+
imports: [Carousel, CarouselItem, DocsAppTestingModule]
6868
})
6969
class CarouselTestComponent {
70-
numberOfItems = 6;
7170
@ViewChild(Carousel) carousel!: Carousel;
71+
items: number[] = [];
72+
73+
constructor() {
74+
for (let i = 0; i < 6; i++) {
75+
this.items.push(i);
76+
}
77+
}
7278
}

‎material.angular.io/src/app/shared/carousel/carousel.ts

+1-6
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,6 @@ import {LEFT_ARROW, RIGHT_ARROW, TAB} from '@angular/cdk/keycodes';
1717
import {ANIMATION_MODULE_TYPE} from '@angular/platform-browser/animations';
1818
import {MatIconModule} from '@angular/material/icon';
1919
import {MatButtonModule} from '@angular/material/button';
20-
import {NgIf} from '@angular/common';
2120

2221
@Directive({
2322
selector: '[carousel-item]',
@@ -40,11 +39,7 @@ export class CarouselItem implements FocusableOption {
4039
styleUrls: ['./carousel.scss'],
4140
encapsulation: ViewEncapsulation.None,
4241
standalone: true,
43-
imports: [
44-
NgIf,
45-
MatButtonModule,
46-
MatIconModule,
47-
],
42+
imports: [MatButtonModule, MatIconModule],
4843
})
4944
export class Carousel implements AfterContentInit {
5045
@Input('aria-label') ariaLabel: string | undefined;

‎material.angular.io/src/app/shared/cookie-popup/cookie-popup.html

+12-10
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,14 @@
1-
<div class="popup" *ngIf="!hasAccepted">
2-
This site uses cookies from Google to deliver its services and to analyze traffic.
1+
@if (!hasAccepted) {
2+
<div class="popup">
3+
This site uses cookies from Google to deliver its services and to analyze traffic.
34

4-
<div class="buttons">
5-
<a
6-
href="https://policies.google.com/technologies/cookies"
7-
mat-button
8-
target="_blank"
9-
rel="noopener">More details</a>
10-
<button mat-button color="primary" (click)="accept()">Ok, Got it</button>
5+
<div class="buttons">
6+
<a
7+
href="https://policies.google.com/technologies/cookies"
8+
mat-button
9+
target="_blank"
10+
rel="noopener">More details</a>
11+
<button mat-button color="primary" (click)="accept()">Okay, got it</button>
12+
</div>
1113
</div>
12-
</div>
14+
}

‎material.angular.io/src/app/shared/cookie-popup/cookie-popup.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import {ChangeDetectionStrategy, Component} from '@angular/core';
22
import {MatButtonModule} from '@angular/material/button';
3-
import {NgIf} from '@angular/common';
43

54
const STORAGE_KEY = 'docs-cookies';
65

@@ -10,7 +9,7 @@ const STORAGE_KEY = 'docs-cookies';
109
styleUrls: ['./cookie-popup.scss'],
1110
changeDetection: ChangeDetectionStrategy.OnPush,
1211
standalone: true,
13-
imports: [NgIf, MatButtonModule]
12+
imports: [MatButtonModule]
1413
})
1514
export class CookiePopup {
1615
/** Whether the user has accepted the cookie disclaimer. */

‎material.angular.io/src/app/shared/doc-viewer/doc-viewer-module.ts

-2
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ import {MatSnackBarModule} from '@angular/material/snack-bar';
66
import {MatTabsModule} from '@angular/material/tabs';
77
import {MatTooltipModule} from '@angular/material/tooltip';
88
import {PortalModule} from '@angular/cdk/portal';
9-
import {CommonModule} from '@angular/common';
109
import {NgModule} from '@angular/core';
1110
import {HeaderLink} from './header-link';
1211
import {CodeSnippet} from '../example-viewer/code-snippet';
@@ -15,7 +14,6 @@ import {CodeSnippet} from '../example-viewer/code-snippet';
1514
// ExampleViewer is included in the DocViewerModule because they have a circular dependency.
1615
@NgModule({
1716
imports: [
18-
CommonModule,
1917
MatButtonModule,
2018
MatIconModule,
2119
MatTooltipModule,

‎material.angular.io/src/app/shared/example-viewer/example-viewer.html

+82-63
Original file line numberDiff line numberDiff line change
@@ -1,74 +1,93 @@
11
<div class="docs-example-viewer-wrapper">
2-
<div class="docs-example-viewer-title" *ngIf="view !== 'snippet'">
3-
<div class="docs-example-viewer-title-spacer">{{exampleData?.title}}</div>
2+
@switch (view) {
3+
@case ('full') {
4+
<div class="docs-example-viewer-source">
5+
<mat-tab-group animationDuration="0ms" [(selectedIndex)]="selectedTab" mat-stretch-tabs="false">
6+
@for (tabName of _getExampleTabNames(); track tabName) {
7+
<mat-tab [label]="tabName">
8+
<div class="button-bar">
9+
<button mat-icon-button type="button" (click)="copySource(snippet, selectedTab)"
10+
class="docs-example-source-copy docs-example-button" matTooltip="Copy example source"
11+
title="Copy example source" aria-label="Copy example source to clipboard">
12+
<mat-icon>content_copy</mat-icon>
13+
</button>
14+
</div>
15+
<code-snippet [source]="exampleTabs[tabName]"></code-snippet>
16+
</mat-tab>
17+
}
18+
</mat-tab-group>
19+
</div>
20+
}
421

5-
<button
6-
mat-icon-button
7-
type="button"
8-
[attr.aria-label]="'Copy link to ' + exampleData?.title + ' example to the clipboard'"
9-
matTooltip="Copy link to example"
10-
(click)="_copyLink()">
11-
<mat-icon>link</mat-icon>
12-
</button>
13-
14-
<button mat-icon-button type="button" (click)="toggleCompactView()" matTooltip="View snippet only"
15-
aria-label="View less" *ngIf="showCompactToggle">
16-
<mat-icon>
17-
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
18-
<path
19-
d="M15.41,10H20v2h-8V4h2v4.59L20.59,2L22,3.41L15.41,10z M4,12v2h4.59L2,20.59L3.41,22L10,15.41V20h2v-8H4z"/>
20-
</svg>
21-
</mat-icon>
22-
</button>
23-
24-
<button mat-icon-button type="button" (click)="toggleSourceView()"
25-
[matTooltip]="view === 'demo' ? 'View code' : 'Hide code'" aria-label="View source">
26-
<mat-icon>code</mat-icon>
27-
</button>
28-
29-
<stack-blitz-button [example]="example"></stack-blitz-button>
30-
</div>
31-
32-
<div class="docs-example-viewer-source" *ngIf="view === 'full'">
33-
<mat-tab-group animationDuration="0ms" [(selectedIndex)]="selectedTab" mat-stretch-tabs="false">
34-
<mat-tab *ngFor="let tabName of _getExampleTabNames()" [label]="tabName">
22+
@case ('snippet') {
23+
<div class="docs-example-viewer-source-compact">
3524
<div class="button-bar">
36-
<button mat-icon-button type="button" (click)="copySource(snippet, selectedTab)"
37-
class="docs-example-source-copy docs-example-button" matTooltip="Copy example source"
25+
<button mat-icon-button type="button" (click)="copySource(snippet)"
26+
class="docs-example-source-copy docs-example-button" matTooltip="Copy snippet"
3827
title="Copy example source" aria-label="Copy example source to clipboard">
3928
<mat-icon>content_copy</mat-icon>
4029
</button>
30+
<button mat-icon-button type="button" (click)="toggleCompactView()"
31+
class="docs-example-compact-toggle docs-example-button" matTooltip="View full example"
32+
aria-label="View less">
33+
<mat-icon>
34+
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
35+
<polygon points="13,3 13,5 17.59,5 5,17.59 5,13 3,13 3,21 11,21 11,19 6.41,19 19,6.41 19,11 21,11 21,3"/>
36+
</svg>
37+
</mat-icon>
38+
</button>
4139
</div>
42-
<code-snippet [source]="exampleTabs[tabName]"></code-snippet>
43-
</mat-tab>
44-
</mat-tab-group>
45-
</div>
4640

47-
<div class="docs-example-viewer-source-compact" *ngIf="view === 'snippet'">
48-
<div class="button-bar">
49-
<button mat-icon-button type="button" (click)="copySource(snippet)"
50-
class="docs-example-source-copy docs-example-button" matTooltip="Copy snippet"
51-
title="Copy example source" aria-label="Copy example source to clipboard">
52-
<mat-icon>content_copy</mat-icon>
53-
</button>
54-
<button mat-icon-button type="button" (click)="toggleCompactView()"
55-
class="docs-example-compact-toggle docs-example-button" matTooltip="View full example"
56-
aria-label="View less">
57-
<mat-icon>
58-
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
59-
<polygon points="13,3 13,5 17.59,5 5,17.59 5,13 3,13 3,21 11,21 11,19 6.41,19 19,6.41 19,11 21,11 21,3"/>
60-
</svg>
61-
</mat-icon>
62-
</button>
63-
</div>
64-
<code-snippet *ngIf="fileUrl" [source]="fileUrl"></code-snippet>
65-
</div>
41+
@if (fileUrl) {
42+
<code-snippet [source]="fileUrl"/>
43+
}
44+
</div>
45+
}
46+
47+
@default {
48+
<div class="docs-example-viewer-title">
49+
<div class="docs-example-viewer-title-spacer">{{exampleData?.title}}</div>
50+
51+
<button
52+
mat-icon-button
53+
type="button"
54+
[attr.aria-label]="'Copy link to ' + exampleData?.title + ' example to the clipboard'"
55+
matTooltip="Copy link to example"
56+
(click)="_copyLink()">
57+
<mat-icon>link</mat-icon>
58+
</button>
59+
60+
@if (showCompactToggle) {
61+
<button mat-icon-button
62+
(click)="toggleCompactView()"
63+
matTooltip="View snippet only"
64+
aria-label="View less">
65+
<mat-icon>
66+
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" focusable="false">
67+
<path
68+
d="M15.41,10H20v2h-8V4h2v4.59L20.59,2L22,3.41L15.41,10z M4,12v2h4.59L2,20.59L3.41,22L10,15.41V20h2v-8H4z"/>
69+
</svg>
70+
</mat-icon>
71+
</button>
72+
}
73+
74+
<button mat-icon-button type="button" (click)="toggleSourceView()"
75+
[matTooltip]="view === 'demo' ? 'View code' : 'Hide code'" aria-label="View source">
76+
<mat-icon>code</mat-icon>
77+
</button>
78+
79+
<stack-blitz-button [example]="example"></stack-blitz-button>
80+
</div>
81+
}
82+
}
6683

67-
<div class="docs-example-viewer-body" *ngIf="view !== 'snippet'">
68-
<ng-template *ngIf="_exampleComponentType && !example?.includes('harness')"
69-
[ngComponentOutlet]="_exampleComponentType"></ng-template>
70-
<div *ngIf="example?.includes('harness')">
71-
This example contains tests. Open in Stackblitz to run the tests.
84+
@if (view !== 'snippet') {
85+
<div class="docs-example-viewer-body">
86+
@if (_exampleComponentType && !example?.includes('harness')) {
87+
<ng-template [ngComponentOutlet]="_exampleComponentType"/>
88+
} @else {
89+
<div>This example contains tests. Open in Stackblitz to run the tests.</div>
90+
}
7291
</div>
73-
</div>
92+
}
7493
</div>

‎material.angular.io/src/app/shared/example-viewer/example-viewer.spec.ts

-2
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import {CommonModule} from '@angular/common';
21
import {HttpTestingController} from '@angular/common/http/testing';
32
import {NgModule} from '@angular/core';
43
import {waitForAsync, ComponentFixture, inject, TestBed} from '@angular/core/testing';
@@ -240,7 +239,6 @@ describe('ExampleViewer', () => {
240239
MatAutocompleteModule,
241240
MatSlideToggleModule,
242241
FormsModule,
243-
CommonModule,
244242
ReactiveFormsModule,
245243
NoopAnimationsModule,
246244
AutocompleteOverviewExample,

‎material.angular.io/src/app/shared/example-viewer/example-viewer.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ import {StackBlitzButton} from '../stack-blitz/stack-blitz-button';
1919
import {MatIconModule} from '@angular/material/icon';
2020
import {MatTooltipModule} from '@angular/material/tooltip';
2121
import {MatButtonModule} from '@angular/material/button';
22-
import {NgIf, NgFor, NgComponentOutlet} from '@angular/common';
22+
import {NgComponentOutlet} from '@angular/common';
2323

2424
export type Views = 'snippet' | 'full' | 'demo';
2525

@@ -35,13 +35,11 @@ const preferredExampleFileOrder = ['HTML', 'TS', 'CSS'];
3535
styleUrls: ['./example-viewer.scss'],
3636
standalone: true,
3737
imports: [
38-
NgIf,
3938
MatButtonModule,
4039
MatTooltipModule,
4140
MatIconModule,
4241
StackBlitzButton,
4342
MatTabsModule,
44-
NgFor,
4543
CodeSnippet,
4644
NgComponentOutlet,
4745
],

‎material.angular.io/src/app/shared/navbar/navbar.html

+17-12
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,12 @@
11
<!-- TODO: figure out if the <nav> should go inside of a <header> element. -->
22
<nav class="docs-navbar-header" aria-label="Top Toolbar">
3-
<div class="skip-link-wrapper" [class.cdk-visually-hidden]="skipLinkHidden" *ngIf="skipLinkHref">
4-
<a mat-raised-button [href]="skipLinkHref" (focus)="skipLinkHidden = false" (blur)="skipLinkHidden = true" color="accent">
5-
Skip to main content
6-
</a>
7-
</div>
3+
@if (skipLinkHidden) {
4+
<div class="skip-link-wrapper" [class.cdk-visually-hidden]="skipLinkHidden">
5+
<a mat-raised-button [href]="skipLinkHref" (focus)="skipLinkHidden = false" (blur)="skipLinkHidden = true" color="accent">
6+
Skip to main content
7+
</a>
8+
</div>
9+
}
810
<a mat-button routerLink="/" aria-label="Angular Material">
911
<app-logo matButtonIcon/>
1012
Material
@@ -13,10 +15,12 @@
1315
pre-release ⚠️
1416
}
1517
</a>
16-
<a mat-button class="docs-navbar-hide-small"
17-
*ngFor="let key of sectionKeys"
18-
[routerLink]="key"
19-
routerLinkActive="docs-navbar-header-item-selected">{{sections[key].name}}</a>
18+
19+
@for (key of sectionKeys; track key) {
20+
<a mat-button class="docs-navbar-hide-small"
21+
[routerLink]="key"
22+
routerLinkActive="docs-navbar-header-item-selected">{{sections[key].name}}</a>
23+
}
2024
<a mat-button class="docs-navbar-hide-small" routerLink="guides" routerLinkActive="docs-navbar-header-item-selected">Guides</a>
2125
<div class="flex-spacer"></div>
2226
<version-picker></version-picker>
@@ -32,9 +36,10 @@
3236
</a>
3337
</nav>
3438
<nav class="docs-navbar docs-navbar-show-small" aria-label="Section Nav Bar">
35-
<a mat-button class="docs-navbar-link"
36-
*ngFor="let key of sectionKeys"
37-
[routerLink]="key">{{sections[key].name}}</a>
39+
@for (key of sectionKeys; track key) {
40+
<a mat-button class="docs-navbar-link"
41+
[routerLink]="key">{{sections[key].name}}</a>
42+
}
3843
<a mat-button class="docs-navbar-link" routerLink="guides">Guides</a>
3944
</nav>
4045

‎material.angular.io/src/app/shared/navbar/navbar.ts

+1-3
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import {Component, OnDestroy} from '@angular/core';
2-
import {NgIf, NgFor, NgTemplateOutlet} from '@angular/common';
2+
import {NgTemplateOutlet} from '@angular/common';
33
import {MatButtonModule} from '@angular/material/button';
44
import {RouterLink, RouterLinkActive} from '@angular/router';
55

@@ -18,10 +18,8 @@ const SECTIONS_KEYS = Object.keys(SECTIONS);
1818
styleUrls: ['./navbar.scss'],
1919
standalone: true,
2020
imports: [
21-
NgIf,
2221
MatButtonModule,
2322
RouterLink,
24-
NgFor,
2523
RouterLinkActive,
2624
VersionPicker,
2725
ThemePicker,

‎material.angular.io/src/app/shared/table-of-contents/table-of-contents.html

+15-11
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,15 @@
1-
<div *ngFor="let linkSection of _linkSections" class="docs-toc-container">
2-
<div class="docs-toc-heading">{{linkSection?.name}}</div>
3-
<nav [attr.aria-label]="linkSection?.name + ' Table of Contents'">
4-
<a [href]="_rootUrl + '#' + link.id"
5-
*ngFor="let link of linkSection?.links; let i = index"
6-
class="docs-level-{{link.type}} docs-link"
7-
[class.docs-active]="link.active">
8-
{{link.name}}
9-
</a>
10-
</nav>
11-
</div>
1+
2+
@for (linkSection of _linkSections; track linkSection) {
3+
<div class="docs-toc-container">
4+
<div class="docs-toc-heading">{{linkSection?.name}}</div>
5+
<nav [attr.aria-label]="linkSection?.name + ' Table of Contents'">
6+
@for (link of linkSection?.links; track link) {
7+
<a [href]="_rootUrl + '#' + link.id"
8+
class="docs-level-{{link.type}} docs-link"
9+
[class.docs-active]="link.active">
10+
{{link.name}}
11+
</a>
12+
}
13+
</nav>
14+
</div>
15+
}

‎material.angular.io/src/app/shared/table-of-contents/table-of-contents.ts

+2-3
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ import {
99
NgZone,
1010
ChangeDetectorRef,
1111
} from '@angular/core';
12-
import {DOCUMENT, NgFor} from '@angular/common';
12+
import {DOCUMENT} from '@angular/common';
1313
import {ActivatedRoute, Router} from '@angular/router';
1414
import {fromEvent, Subscription} from 'rxjs';
1515
import {debounceTime} from 'rxjs/operators';
@@ -41,8 +41,7 @@ interface Link {
4141
selector: 'table-of-contents',
4242
styleUrls: ['./table-of-contents.scss'],
4343
templateUrl: './table-of-contents.html',
44-
standalone: true,
45-
imports: [NgFor]
44+
standalone: true
4645
})
4746
export class TableOfContents implements OnInit, AfterViewInit, OnDestroy {
4847
@Input() container: string | undefined;

‎material.angular.io/src/app/shared/theme-picker/theme-picker.html

+20-18
Original file line numberDiff line numberDiff line change
@@ -4,22 +4,24 @@
44
</button>
55

66
<mat-menu #themeMenu="matMenu" xPosition="before" class="docs-theme-picker-menu">
7-
<button mat-menu-item *ngFor="let theme of themes" (click)="selectTheme(theme.name)">
8-
<mat-icon [class.docs-theme-selected-icon]="currentTheme === theme"
9-
[color]="currentTheme === theme ? 'accent' : undefined">
10-
{{currentTheme === theme ? 'radio_button_checked' : 'radio_button_unchecked'}}
11-
</mat-icon>
12-
<span>{{theme.displayName}}</span>
13-
<svg matMenuItemIcon class="theme-example-icon" width="80" height="80" viewBox="0 0 80 80">
14-
<path
15-
[attr.fill]="theme.background"
16-
d="M77.87 0C79.05 0 80 .95 80 2.13v75.74c0 1.17-.95 2.13-2.13 2.13H2.13C.96 80 0 79.04 0 77.87V2.13C0 .95.96 0 2.13 0h75.74z"/>
17-
<path
18-
[attr.fill]="theme.color"
19-
d="M54 40c3.32 0 6 2.69 6 6 0 1.2 0-1.2 0 0 0 3.31-2.68 6-6 6H26c-3.31 0-6-2.69-6-6 0-1.2 0 1.2 0 0 0-3.31 2.69-6 6-6h28z"/>
20-
<path
21-
[attr.fill]="theme.color"
22-
d="M0 0h80v17.24H0V0z"/>
23-
</svg>
24-
</button>
7+
@for (theme of themes; track theme) {
8+
<button mat-menu-item (click)="selectTheme(theme.name)">
9+
<mat-icon [class.docs-theme-selected-icon]="currentTheme === theme"
10+
[color]="currentTheme === theme ? 'accent' : undefined">
11+
{{currentTheme === theme ? 'radio_button_checked' : 'radio_button_unchecked'}}
12+
</mat-icon>
13+
<span>{{theme.displayName}}</span>
14+
<svg matMenuItemIcon class="theme-example-icon" width="80" height="80" viewBox="0 0 80 80">
15+
<path
16+
[attr.fill]="theme.background"
17+
d="M77.87 0C79.05 0 80 .95 80 2.13v75.74c0 1.17-.95 2.13-2.13 2.13H2.13C.96 80 0 79.04 0 77.87V2.13C0 .95.96 0 2.13 0h75.74z"/>
18+
<path
19+
[attr.fill]="theme.color"
20+
d="M54 40c3.32 0 6 2.69 6 6 0 1.2 0-1.2 0 0 0 3.31-2.68 6-6 6H26c-3.31 0-6-2.69-6-6 0-1.2 0 1.2 0 0 0-3.31 2.69-6 6-6h28z"/>
21+
<path
22+
[attr.fill]="theme.color"
23+
d="M0 0h80v17.24H0V0z"/>
24+
</svg>
25+
</button>
26+
}
2527
</mat-menu>

‎material.angular.io/src/app/shared/theme-picker/theme-picker.ts

+1-2
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,6 @@ import {MatButtonModule} from '@angular/material/button';
1111
import {MatIconModule} from '@angular/material/icon';
1212
import {MatMenuModule} from '@angular/material/menu';
1313
import {MatTooltipModule} from '@angular/material/tooltip';
14-
import {NgFor} from '@angular/common';
1514
import {ActivatedRoute, ParamMap} from '@angular/router';
1615
import {Subscription} from 'rxjs';
1716
import {map} from 'rxjs/operators';
@@ -24,7 +23,7 @@ import {LiveAnnouncer} from '@angular/cdk/a11y';
2423
changeDetection: ChangeDetectionStrategy.OnPush,
2524
encapsulation: ViewEncapsulation.None,
2625
standalone: true,
27-
imports: [MatButtonModule, MatTooltipModule, MatMenuModule, MatIconModule, NgFor]
26+
imports: [MatButtonModule, MatTooltipModule, MatMenuModule, MatIconModule]
2827
})
2928
export class ThemePicker implements OnInit, OnDestroy {
3029
private _queryParamSubscription = Subscription.EMPTY;

‎material.angular.io/src/app/shared/version-picker/version-picker.html

+3-4
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,7 @@
44
<mat-icon>arrow_drop_down</mat-icon>
55
</button>
66
<mat-menu #versionPicker="matMenu" xPosition="before" class="docs-version-picker-menu">
7-
<button mat-menu-item *ngFor="let version of docVersions | async"
8-
(click)="onVersionChanged(version)">
9-
{{version.title}}
10-
</button>
7+
@for (version of docVersions | async; track version) {
8+
<button mat-menu-item (click)="onVersionChanged(version)">{{version.title}}</button>
9+
}
1110
</mat-menu>

‎material.angular.io/src/app/shared/version-picker/version-picker.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import {Component, ViewEncapsulation} from '@angular/core';
22
import {HttpClient} from '@angular/common/http';
3-
import {NgFor, AsyncPipe} from '@angular/common';
3+
import {AsyncPipe} from '@angular/common';
44
import {MatButtonModule} from '@angular/material/button';
55
import {MatIconModule} from '@angular/material/icon';
66
import {MatMenuModule} from '@angular/material/menu';
@@ -20,7 +20,7 @@ interface VersionInfo {
2020
templateUrl: './version-picker.html',
2121
styleUrls: ['./version-picker.scss'],
2222
standalone: true,
23-
imports: [MatButtonModule, MatTooltipModule, MatMenuModule, MatIconModule, NgFor, AsyncPipe],
23+
imports: [MatButtonModule, MatTooltipModule, MatMenuModule, MatIconModule, AsyncPipe],
2424
encapsulation: ViewEncapsulation.None,
2525
})
2626
export class VersionPicker {

0 commit comments

Comments
 (0)
Please sign in to comment.