Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

Commit 5cce19c

Browse files
crisbetocrisbeto
committed
fix: use new control flow syntax
Reworks all the templates to use Angular's new control flow syntax.
1 parent 07b5b35 commit 5cce19c

36 files changed

+316
-284
lines changed

‎scenes/src/app/scenes/autocomplete/autocomplete-scene.ts

Lines changed: 0 additions & 2 deletions
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 {

‎scenes/src/app/scenes/grid-list/grid-list-scene.html

Lines changed: 4 additions & 4 deletions
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>

‎scenes/src/app/scenes/grid-list/grid-list-scene.ts

Lines changed: 1 addition & 2 deletions
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 = [

‎scenes/src/app/scenes/sort/sort-scene.html

Lines changed: 6 additions & 4 deletions
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>

‎scenes/src/app/scenes/sort/sort-scene.ts

Lines changed: 1 addition & 2 deletions
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[] = [

‎src/app/pages/component-category-list/component-category-list.html

Lines changed: 21 additions & 17 deletions
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+
}

‎src/app/pages/component-category-list/component-category-list.ts

Lines changed: 3 additions & 3 deletions
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 { }

‎src/app/pages/component-sidenav/component-nav.html

Lines changed: 14 additions & 10 deletions
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>

‎src/app/pages/component-sidenav/component-sidenav.html

Lines changed: 12 additions & 12 deletions
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>

‎src/app/pages/component-sidenav/component-sidenav.ts

Lines changed: 3 additions & 8 deletions
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
})

0 commit comments

Comments
 (0)