Skip to content

Commit 328e4d2

Browse files
crisbetocrisbeto
authored
fix(material/schematics): switch to new control flow (#28106)
Reworks our schematics to use the new control from in Angular v17.
1 parent 59c8bb9 commit 328e4d2

File tree

5 files changed

+65
-60
lines changed

5 files changed

+65
-60
lines changed

‎src/cdk/schematics/ng-generate/drag-drop/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,9 @@
33

44
<div cdkDropList #todoList="cdkDropList" [cdkDropListData]="todo"
55
[cdkDropListConnectedTo]="doneList" class="list" (cdkDropListDropped)="drop($event)">
6-
<div class="list-item" *ngFor="let item of todo" cdkDrag>{{item}}</div>
6+
@for (item of todo; track item) {
7+
<div class="list-item" cdkDrag>{{item}}</div>
8+
}
79
</div>
810
</div>
911

@@ -12,6 +14,8 @@
1214

1315
<div cdkDropList #doneList="cdkDropList" [cdkDropListData]="done"
1416
[cdkDropListConnectedTo]="todoList" class="list" (cdkDropListDropped)="drop($event)">
15-
<div class="list-item" *ngFor="let item of done" cdkDrag>{{item}}</div>
17+
@for (item of done; track item) {
18+
<div class="list-item" cdkDrag>{{item}}</div>
19+
}
1620
</div>
1721
</div>

‎src/material/schematics/ng-generate/address-form/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

Lines changed: 28 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -15,63 +15,62 @@
1515
<div class="col">
1616
<mat-form-field class="full-width">
1717
<input matInput placeholder="First name" formControlName="firstName">
18-
<mat-error *ngIf="addressForm.controls['firstName'].hasError('required')">
19-
First name is <strong>required</strong>
20-
</mat-error>
18+
@if (addressForm.controls['firstName'].hasError('required')) {
19+
<mat-error>First name is <strong>required</strong></mat-error>
20+
}
2121
</mat-form-field>
2222
</div>
2323
<div class="col">
2424
<mat-form-field class="full-width">
2525
<input matInput placeholder="Last name" formControlName="lastName">
26-
<mat-error *ngIf="addressForm.controls['lastName'].hasError('required')">
27-
Last name is <strong>required</strong>
28-
</mat-error>
26+
@if (addressForm.controls['lastName'].hasError('required')) {
27+
<mat-error>Last name is <strong>required</strong></mat-error>
28+
}
2929
</mat-form-field>
3030
</div>
3131
</div>
3232
<div class="row">
3333
<div class="col">
3434
<mat-form-field class="full-width">
3535
<textarea matInput placeholder="Address" formControlName="address"></textarea>
36-
<mat-error *ngIf="addressForm.controls['address'].hasError('required')">
37-
Address is <strong>required</strong>
38-
</mat-error>
36+
@if (addressForm.controls['address'].hasError('required')) {
37+
<mat-error>Address is <strong>required</strong></mat-error>
38+
}
3939
</mat-form-field>
4040
</div>
4141
</div>
42-
<div class="row" *ngIf="!hasUnitNumber">
43-
<div class="col">
44-
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
45-
+ Add C/O, Apt, Suite, Unit
46-
</button>
47-
</div>
48-
</div>
49-
<div class="row" *ngIf="hasUnitNumber">
42+
<div class="row">
5043
<div class="col">
51-
<mat-form-field class="full-width">
52-
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
53-
</mat-form-field>
44+
@if (hasUnitNumber) {
45+
<mat-form-field class="full-width">
46+
<textarea matInput placeholder="Address 2" formControlName="address2"></textarea>
47+
</mat-form-field>
48+
} @else {
49+
<button mat-button type="button" (click)="hasUnitNumber = !hasUnitNumber">
50+
+ Add C/O, Apt, Suite, Unit
51+
</button>
52+
}
5453
</div>
5554
</div>
5655
<div class="row">
5756
<div class="col">
5857
<mat-form-field class="full-width">
5958
<input matInput placeholder="City" formControlName="city">
60-
<mat-error *ngIf="addressForm.controls['city'].hasError('required')">
61-
City is <strong>required</strong>
62-
</mat-error>
59+
@if (addressForm.controls['city'].hasError('required')) {
60+
<mat-error>City is <strong>required</strong></mat-error>
61+
}
6362
</mat-form-field>
6463
</div>
6564
<div class="col">
6665
<mat-form-field class="full-width">
6766
<mat-select placeholder="State" formControlName="state">
68-
<mat-option *ngFor="let state of states" [value]="state.abbreviation">
69-
{{ state.name }}
70-
</mat-option>
67+
@for (state of states; track state) {
68+
<mat-option [value]="state.abbreviation">{{ state.name }}</mat-option>
69+
}
7170
</mat-select>
72-
<mat-error *ngIf="addressForm.controls['state'].hasError('required')">
73-
State is <strong>required</strong>
74-
</mat-error>
71+
@if (addressForm.controls['state'].hasError('required')) {
72+
<mat-error>State is <strong>required</strong></mat-error>
73+
}
7574
</mat-form-field>
7675
</div>
7776
</div>

‎src/material/schematics/ng-generate/dashboard/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

Lines changed: 21 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,26 @@
11
<div class="grid-container">
22
<h1 class="mat-h1">Dashboard</h1>
33
<mat-grid-list cols="2" rowHeight="350px">
4-
<mat-grid-tile *ngFor="let card of cards | async" [colspan]="card.cols" [rowspan]="card.rows">
5-
<mat-card class="dashboard-card">
6-
<mat-card-header>
7-
<mat-card-title>
8-
{{card.title}}
9-
<button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
10-
<mat-icon>more_vert</mat-icon>
11-
</button>
12-
<mat-menu #menu="matMenu" xPosition="before">
13-
<button mat-menu-item>Expand</button>
14-
<button mat-menu-item>Remove</button>
15-
</mat-menu>
16-
</mat-card-title>
17-
</mat-card-header>
18-
<mat-card-content class="dashboard-card-content">
19-
<div>Card Content Here</div>
20-
</mat-card-content>
21-
</mat-card>
22-
</mat-grid-tile>
4+
@for (card of cards | async) {
5+
<mat-grid-tile [colspan]="card.cols" [rowspan]="card.rows">
6+
<mat-card class="dashboard-card">
7+
<mat-card-header>
8+
<mat-card-title>
9+
{{card.title}}
10+
<button mat-icon-button class="more-button" [matMenuTriggerFor]="menu" aria-label="Toggle menu">
11+
<mat-icon>more_vert</mat-icon>
12+
</button>
13+
<mat-menu #menu="matMenu" xPosition="before">
14+
<button mat-menu-item>Expand</button>
15+
<button mat-menu-item>Remove</button>
16+
</mat-menu>
17+
</mat-card-title>
18+
</mat-card-header>
19+
<mat-card-content class="dashboard-card-content">
20+
<div>Card Content Here</div>
21+
</mat-card-content>
22+
</mat-card>
23+
</mat-grid-tile>
24+
}
2325
</mat-grid-list>
2426
</div>

‎src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.html.template

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,14 +12,15 @@
1212
</mat-sidenav>
1313
<mat-sidenav-content>
1414
<mat-toolbar color="primary">
15-
<button
16-
type="button"
17-
aria-label="Toggle sidenav"
18-
mat-icon-button
19-
(click)="drawer.toggle()"
20-
*ngIf="isHandset$ | async">
21-
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
22-
</button>
15+
@if (isHandset$ | async) {
16+
<button
17+
type="button"
18+
aria-label="Toggle sidenav"
19+
mat-icon-button
20+
(click)="drawer.toggle()">
21+
<mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
22+
</button>
23+
}
2324
<span><%= project %></span>
2425
</mat-toolbar>
2526
<!-- Add Content Here -->

‎src/material/schematics/ng-generate/navigation/files/__path__/__name@dasherize@if-flat__/__name@dasherize__.component.ts.template

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
import { Component, inject<% if(!!viewEncapsulation) { %>, ViewEncapsulation<% }%><% if(changeDetection !== 'Default') { %>, ChangeDetectionStrategy<% }%> } from '@angular/core';
22
import { BreakpointObserver, Breakpoints } from '@angular/cdk/layout';<% if(standalone) { %>
3+
import { AsyncPipe } from '@angular/common';
34
import { MatToolbarModule } from '@angular/material/toolbar';
45
import { MatButtonModule } from '@angular/material/button';
56
import { MatSidenavModule } from '@angular/material/sidenav';
67
import { MatListModule } from '@angular/material/list';
78
import { MatIconModule } from '@angular/material/icon';<% } %>
89
import { Observable } from 'rxjs';
910
import { map, shareReplay } from 'rxjs/operators';
10-
import { AsyncPipe, NgIf } from '@angular/common';
1111

1212
@Component({
1313
selector: '<%= selector %>',<% if(inlineTemplate) { %>
@@ -29,7 +29,6 @@ import { AsyncPipe, NgIf } from '@angular/common';
2929
MatListModule,
3030
MatIconModule,
3131
AsyncPipe,
32-
NgIf
3332
]<% } %>
3433
})
3534
export class <%= classify(name) %>Component {

0 commit comments

Comments
 (0)