feat(): new control flow and default standalone

tomalaforge · tomalaforge · commit 15c5dcc276dc · 2025-06-20T21:20:21.000+02:00
diff --git a/apps/angular/1-projection/src/app/ui/list-item/list-item.component.ts b/apps/angular/1-projection/src/app/ui/list-item/list-item.component.ts
@@ -18,7 +18,6 @@ import { CardType } from '../../model/card.model';
       </button>
     </div>
   `,
-  standalone: true,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class ListItemComponent {
diff --git a/apps/angular/16-master-dependency-injection/src/app/app.component.ts b/apps/angular/16-master-dependency-injection/src/app/app.component.ts
@@ -1,6 +1,6 @@
 import { TableComponent } from '@angular-challenges/shared/ui';
-import { AsyncPipe, NgFor } from '@angular/common';
-import { Component, Directive } from '@angular/core';
+import { AsyncPipe } from '@angular/common';
+import { ChangeDetectionStrategy, Component, Directive } from '@angular/core';
 import { CurrencyPipe } from './currency.pipe';
 import { CurrencyService } from './currency.service';
 import { Product, products } from './product.model';
@@ -11,7 +11,6 @@ interface ProductContext {
 
 @Directive({
   selector: 'ng-template[product]',
-  standalone: true,
 })
 export class ProductDirective {
   static ngTemplateContextGuard(
@@ -23,16 +22,18 @@ export class ProductDirective {
 }
 
 @Component({
-  imports: [TableComponent, CurrencyPipe, AsyncPipe, NgFor, ProductDirective],
+  imports: [TableComponent, CurrencyPipe, AsyncPipe, ProductDirective],
   providers: [CurrencyService],
   selector: 'app-root',
   template: `
     <table [items]="products">
       <ng-template #header>
         <tr>
-          <th *ngFor="let col of displayedColumns">
-            {{ col }}
-          </th>
+          @for (col of displayedColumns; track $index) {
+            <th>
+              {{ col }}
+            </th>
+          }
         </tr>
       </ng-template>
       <ng-template #body product let-product>
@@ -45,6 +46,7 @@ export class ProductDirective {
       </ng-template>
     </table>
   `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class AppComponent {
   products = products;
diff --git a/apps/angular/16-master-dependency-injection/src/app/currency.pipe.ts b/apps/angular/16-master-dependency-injection/src/app/currency.pipe.ts
@@ -4,7 +4,6 @@ import { CurrencyService } from './currency.service';
 
 @Pipe({
   name: 'currency',
-  standalone: true,
 })
 export class CurrencyPipe implements PipeTransform {
   currencyService = inject(CurrencyService);
diff --git a/apps/angular/32-change-detection-bug/src/app/bar.component.ts b/apps/angular/32-change-detection-bug/src/app/bar.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
+
 @Component({
   selector: 'app-bar',
-  standalone: true,
   template: `
     BarComponent
   `,
diff --git a/apps/angular/32-change-detection-bug/src/app/foo.component.ts b/apps/angular/32-change-detection-bug/src/app/foo.component.ts
@@ -1,7 +1,7 @@
 import { Component } from '@angular/core';
+
 @Component({
   selector: 'app-foo',
-  standalone: true,
   template: `
     Foo Component
   `,
diff --git a/apps/angular/39-injection-token/src/app/timer.component.ts b/apps/angular/39-injection-token/src/app/timer.component.ts
@@ -5,7 +5,6 @@ import { DEFAULT_TIMER } from './data';
 
 @Component({
   selector: 'timer',
-  standalone: true,
   template: `
     Timer running {{ timer() }}
   `,
diff --git a/apps/angular/45-react-in-angular/src/app/react/post.component.ts b/apps/angular/45-react-in-angular/src/app/react/post.component.ts
@@ -3,7 +3,6 @@ import { Component, EventEmitter, input, Output } from '@angular/core';
 type Post = { title: string; description: string; pictureLink: string };
 
 @Component({
-  standalone: true,
   selector: 'app-post',
   template: `
     <div></div>
diff --git a/apps/angular/6-structural-directive/src/app/dashboard/manager.component.ts b/apps/angular/6-structural-directive/src/app/dashboard/manager.component.ts
@@ -1,11 +1,8 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
-import { RouterLink } from '@angular/router';
-import { ButtonComponent } from '../button.component';
 
 @Component({
   selector: 'app-dashboard',
-  standalone: true,
-  imports: [RouterLink, ButtonComponent],
+  imports: [],
   template: `
     <p>dashboard for Manager works!</p>
     <button app-button routerLink="/">Logout</button>
diff --git a/apps/forms/41-control-value-accessor/src/app/rating-control/rating-control.component.ts b/apps/forms/41-control-value-accessor/src/app/rating-control/rating-control.component.ts
@@ -1,7 +1,6 @@
 import { Component, EventEmitter, Output } from '@angular/core';
 
 @Component({
-  standalone: true,
   selector: 'app-rating-control',
   templateUrl: 'rating-control.component.html',
   styleUrls: ['rating-control.component.scss'],
diff --git a/apps/forms/48-avoid-losing-form-data/src/app/pages/page.component.ts b/apps/forms/48-avoid-losing-form-data/src/app/pages/page.component.ts
@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 
 @Component({
-  standalone: true,
   template: `
     <section>
       <h1>{{ title() }}</h1>
diff --git a/apps/forms/48-avoid-losing-form-data/src/app/ui/dialog.component.ts b/apps/forms/48-avoid-losing-form-data/src/app/ui/dialog.component.ts
@@ -3,7 +3,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
 // NOTE : this is just the dialog content, you need to implement dialog logic
 
 @Component({
-  standalone: true,
   template: `
     <div role="alert" class="rounded-xl border border-gray-100 bg-white p-5">
       <h3 class="block text-xl font-medium text-red-600">
diff --git a/apps/performance/37-optimize-big-list/src/app/app.component.ts b/apps/performance/37-optimize-big-list/src/app/app.component.ts
@@ -1,4 +1,3 @@
-import { NgIf } from '@angular/common';
 import { Component, signal } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 import { MatFormFieldModule } from '@angular/material/form-field';
@@ -9,7 +8,6 @@ import { PersonListComponent } from './person-list.component';
 
 @Component({
   imports: [
-    NgIf,
     PersonListComponent,
     FormsModule,
     MatFormFieldModule,
@@ -24,10 +22,9 @@ import { PersonListComponent } from './person-list.component';
       Load List
     </button>
 
-    <app-person-list
-      *ngIf="loadList()"
-      class="w-3/4 max-w-2xl"
-      [persons]="persons()" />
+    @if (loadList()) {
+      <app-person-list class="w-3/4 max-w-2xl" [persons]="persons()" />
+    }
   `,
   host: {
     class: 'flex items-center flex-col gap-5',
diff --git a/apps/rxjs/14-race-condition/src/app/app.component.ts b/apps/rxjs/14-race-condition/src/app/app.component.ts
@@ -10,7 +10,6 @@ import { TopicModalComponent } from './topic-dialog.component';
 import { TopicService, TopicType } from './topic.service';
 
 @Component({
-  standalone: true,
   selector: 'app-root',
   template: `
     <button (click)="openTopicModal()">Open Topic</button>
diff --git a/apps/rxjs/14-race-condition/src/app/topic-dialog.component.ts b/apps/rxjs/14-race-condition/src/app/topic-dialog.component.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
@@ -8,16 +7,18 @@ import { MAT_DIALOG_DATA, MatDialogModule } from '@angular/material/dialog';
     <h1 mat-dialog-title>Show all Topics</h1>
     <div mat-dialog-content>
       <ul>
-        <li *ngFor="let topic of data.topics">
-          {{ topic }}
-        </li>
+        @for (topic of data.topics; track $index) {
+          <li>
+            {{ topic }}
+          </li>
+        }
       </ul>
     </div>
     <div mat-dialog-actions>
       <button mat-button mat-dialog-close>Close</button>
     </div>
   `,
-  imports: [MatDialogModule, MatButtonModule, NgFor],
+  imports: [MatDialogModule, MatButtonModule],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export class TopicModalComponent {
diff --git a/apps/signal/54-pipe-observable-to-signal/src/app/currency.pipe.ts b/apps/signal/54-pipe-observable-to-signal/src/app/currency.pipe.ts
@@ -4,7 +4,6 @@ import { CurrencyService } from './currency.service';
 
 @Pipe({
   name: 'currency',
-  standalone: true,
 })
 export class CurrencyPipe implements PipeTransform {
   currencyService = inject(CurrencyService);
diff --git a/apps/testing/17-router/src/app/no-book-search.component.ts b/apps/testing/17-router/src/app/no-book-search.component.ts
@@ -1,7 +1,6 @@
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 
 @Component({
-  standalone: true,
   template: `
     <div>No book found for this search</div>
   `,
diff --git a/apps/testing/17-router/src/app/search.component.ts b/apps/testing/17-router/src/app/search.component.ts
@@ -1,11 +1,10 @@
-import { NgFor, NgIf } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { FormControl, ReactiveFormsModule, Validators } from '@angular/forms';
-import { RouterLink } from '@angular/router';
+import { RouterLink, RouterLinkActive } from '@angular/router';
 import { availableBooks } from './book.model';
 
 @Component({
-  imports: [ReactiveFormsModule, RouterLink, NgFor, NgIf],
+  imports: [ReactiveFormsModule, RouterLink, RouterLinkActive],
   styles: [
     `
       :host {
@@ -38,9 +37,9 @@ import { availableBooks } from './book.model';
         name="bookName"
         [formControl]="searchBook"
         required />
-      <div class="error" *ngIf="searchBook.errors">
-        Search criteria is required!
-      </div>
+      @if (searchBook.errors) {
+        <div class="error">Search criteria is required!</div>
+      }
     </div>
     <button
       data-cy="borrow-btn"
@@ -53,7 +52,9 @@ import { availableBooks } from './book.model';
     <div>
       <h3>List of books available:</h3>
       <ul>
-        <li *ngFor="let book of books">{{ book.name }} by {{ book.author }}</li>
+        @for (book of books; track $index) {
+          <li>{{ book.name }} by {{ book.author }}</li>
+        }
       </ul>
     </div>
   `,
diff --git a/apps/testing/17-router/src/app/shelf.component.ts b/apps/testing/17-router/src/app/shelf.component.ts
@@ -1,20 +1,19 @@
-import { AsyncPipe, JsonPipe, NgFor } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, inject } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { map } from 'rxjs';
 import { availableBooks } from './book.model';
 
 @Component({
   selector: 'app-shelf',
-  imports: [AsyncPipe, JsonPipe, NgFor],
+  imports: [AsyncPipe],
   template: `
     <ul>
-      <li *ngFor="let book of books | async">
-        Borrowed Book: {{ book.name }} by {{ book.author }}
-      </li>
+      @for (book of books | async; track book) {
+        <li>Borrowed Book: {{ book.name }} by {{ book.author }}</li>
+      }
     </ul>
   `,
-  styles: [],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
 export default class ShelfComponent {
diff --git a/apps/testing/18-nested-components/src/app/child.component.ts b/apps/testing/18-nested-components/src/app/child.component.ts
@@ -1,4 +1,3 @@
-import { NgIf } from '@angular/common';
 import {
   ChangeDetectionStrategy,
   Component,
@@ -23,7 +22,6 @@ export class InputComponent {
 
 @Component({
   selector: 'result',
-  standalone: true,
   template: `
     <p>Title is {{ title() }}</p>
   `,
@@ -35,7 +33,6 @@ export class ResultComponent {
 
 @Component({
   selector: 'app-button',
-  standalone: true,
   template: `
     <button (click)="validate.emit()">Validate</button>
   `,
@@ -47,7 +44,6 @@ export class ButtonComponent {
 
 @Component({
   selector: 'app-error',
-  standalone: true,
   template: `
     <p>Title is required !!!</p>
   `,
@@ -57,18 +53,14 @@ export class ErrorComponent {}
 
 @Component({
   selector: 'app-child',
-  imports: [
-    ResultComponent,
-    ButtonComponent,
-    InputComponent,
-    ErrorComponent,
-    NgIf,
-  ],
+  imports: [],
   template: `
-    <app-input #input></app-input>
-    <result [title]="input.title.value"></result>
-    <app-button (validate)="submit(input.title.value)"></app-button>
-    <app-error *ngIf="showError"></app-error>
+    <app-input #input />
+    <result [title]="input.title.value" />
+    <app-button (validate)="submit(input.title.value)" />
+    @if (showError) {
+      <app-error />
+    }
   `,
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
diff --git a/apps/testing/28-checkbox/src/app/app.component.ts b/apps/testing/28-checkbox/src/app/app.component.ts
@@ -1,7 +1,6 @@
 import { Component } from '@angular/core';
 
 @Component({
-  standalone: true,
   selector: 'app-root',
   template: `
     <label for="agree">Agreed</label>
diff --git a/apps/testing/29-real-life-application/src/app/list/ui/add.component.ts b/apps/testing/29-real-life-application/src/app/list/ui/add.component.ts
@@ -1,4 +1,3 @@
-import { NgIf } from '@angular/common';
 import { Component, input, output } from '@angular/core';
 import {
   FormControl,
@@ -17,7 +16,6 @@ import { MatInputModule } from '@angular/material/input';
     MatFormFieldModule,
     MatInputModule,
     MatButtonModule,
-    NgIf,
   ],
   template: `
     <form [formGroup]="form" #ngForm="ngForm" (ngSubmit)="submit()">
@@ -28,10 +26,12 @@ import { MatInputModule } from '@angular/material/input';
           matInput
           formControlName="description"
           placeholder="My new task" />
-        <mat-error *ngIf="form.controls.description.hasError('required')">
-          Description is
-          <strong>required</strong>
-        </mat-error>
+        @if (form.controls.description.hasError('required')) {
+          <mat-error>
+            Description is
+            <strong>required</strong>
+          </mat-error>
+        }
       </mat-form-field>
       <button
         class="ml-4"
diff --git a/apps/testing/29-real-life-application/src/app/list/ui/row.component.ts b/apps/testing/29-real-life-application/src/app/list/ui/row.component.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { Component, input, output } from '@angular/core';
 import { FormControl, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatButtonModule } from '@angular/material/button';
@@ -17,7 +16,6 @@ import { Ticket, TicketUser, User } from '../../backend.service';
     MatInputModule,
     MatButtonModule,
     MatSelectModule,
-    NgFor,
   ],
   template: `
     <li
@@ -52,9 +50,11 @@ import { Ticket, TicketUser, User } from '../../backend.service';
           <mat-form-field appearance="fill">
             <mat-label>Assign to</mat-label>
             <mat-select formControlName="assignee">
-              <mat-option *ngFor="let user of users()" [value]="user.id">
-                {{ user.name }}
-              </mat-option>
+              @for (user of users(); track user.id) {
+                <mat-option [value]="user.id">
+                  {{ user.name }}
+                </mat-option>
+              }
             </mat-select>
           </mat-form-field>
           <button mat-flat-button color="primary" type="submit">Assign</button>
diff --git a/apps/typescript/15-function-overload/src/app/app.component.ts b/apps/typescript/15-function-overload/src/app/app.component.ts
diff --git a/docs/src/content/docs/challenges/nx/26-generator-comp.md b/docs/src/content/docs/challenges/nx/26-generator-comp.md
diff --git a/docs/src/content/docs/es/challenges/angular/3-directive-enhancement.md b/docs/src/content/docs/es/challenges/angular/3-directive-enhancement.md
diff --git a/docs/src/content/docs/pt/challenges/angular/3-directive-enhancement.md b/docs/src/content/docs/pt/challenges/angular/3-directive-enhancement.md
diff --git a/libs/cli/src/generators/challenge/generator.ts b/libs/cli/src/generators/challenge/generator.ts
diff --git a/libs/decoupling/brain/src/lib/button-disabled.directive.ts b/libs/decoupling/brain/src/lib/button-disabled.directive.ts
diff --git a/libs/decoupling/helmet/src/lib/btn-style.directive.ts b/libs/decoupling/helmet/src/lib/btn-style.directive.ts
diff --git a/libs/shared/directives/src/lib/cd-flashing.directive.ts b/libs/shared/directives/src/lib/cd-flashing.directive.ts
