feat: migrate Angular templates to control flow

templates/angular-example/src/app/components/auth/auth.component.html

@@ -1,9 +1,6 @@
-<ng-container *ngIf="signedIn(); else notSignedIn">
+@if (signedIn()) {
   <ng-content></ng-content>
-
   <app-logout />
-</ng-container>
-
-<ng-template #notSignedIn>
+} @else {
   <app-login />
-</ng-template>
+}

templates/angular-example/src/app/components/auth/auth.component.ts

@@ -1,12 +1,11 @@
-import { NgIf } from '@angular/common';
 import { Component, inject } from '@angular/core';
 import { AuthService } from '../../services/auth.service';
 import { LoginComponent } from '../login/login.component';
 import { LogoutComponent } from '../logout/logout.component';
 
 @Component({
   selector: 'app-auth',
-  imports: [LoginComponent, LogoutComponent, NgIf],
+  imports: [LoginComponent, LogoutComponent],
   templateUrl: './auth.component.html',
 })
 export class AuthComponent {

templates/angular-example/src/app/components/backdrop/backdrop.component.html

@@ -1,8 +1,9 @@
 <div
   class="dark:bg-lavender-blue-200/40 fixed inset-0 z-40 flex items-center justify-center bg-white/30 backdrop-blur-xl"
 >
-  <div
-    *ngIf="spinner"
-    class="border-lavender-blue-600 h-12 w-12 animate-spin rounded-full border-[3px] border-solid border-t-transparent"
-  ></div>
+  @if (spinner) {
+    <div
+      class="border-lavender-blue-600 h-12 w-12 animate-spin rounded-full border-[3px] border-solid border-t-transparent"
+    ></div>
+  }
 </div>

templates/angular-example/src/app/components/backdrop/backdrop.component.ts

@@ -1,9 +1,7 @@
-import { NgIf } from '@angular/common';
 import { Component, Input } from '@angular/core';
 
 @Component({
   selector: 'app-backdrop',
-  imports: [NgIf],
   templateUrl: './backdrop.component.html',
 })
 export class BackdropComponent {

templates/angular-example/src/app/components/banner/banner.component.html

@@ -1,16 +1,17 @@
-<div
-  *ngIf="showBanner"
-  class="bg-screamin-green-200 fixed top-0 right-0 left-0 px-4 py-0.5 text-sm text-black"
->
-  <p class="text-center font-medium">
-    <span>Your project needs a Satellite for local dev.</span>
-    <a
-      href="http://localhost:5866"
-      target="_blank"
-      class="ml-2 inline-block font-bold underline"
-      aria-label="Open the Juno Console to create a new Satellite for testing"
-    >
-      Create one now!
-    </a>
-  </p>
-</div>
+@if (showBanner) {
+  <div
+    class="bg-screamin-green-200 fixed top-0 right-0 left-0 px-4 py-0.5 text-sm text-black"
+  >
+    <p class="text-center font-medium">
+      <span>Your project needs a Satellite for local dev.</span>
+      <a
+        href="http://localhost:5866"
+        target="_blank"
+        class="ml-2 inline-block font-bold underline"
+        aria-label="Open the Juno Console to create a new Satellite for testing"
+      >
+        Create one now!
+      </a>
+    </p>
+  </div>
+}

templates/angular-example/src/app/components/banner/banner.component.ts

@@ -1,10 +1,8 @@
-import { NgIf } from '@angular/common';
 import { Component, isDevMode } from '@angular/core';
 import { environment } from '../../../environments/environment';
 
 @Component({
   selector: 'app-banner',
-  imports: [NgIf],
   templateUrl: './banner.component.html',
 })
 export class BannerComponent {

templates/angular-example/src/app/components/delete/delete.component.html

@@ -31,4 +31,6 @@
   </svg>
 </button>
 
-<app-backdrop [spinner]="true" *ngIf="progress" />
+@if (progress) {
+  <app-backdrop [spinner]="true" />
+}

templates/angular-example/src/app/components/delete/delete.component.ts

@@ -1,4 +1,3 @@
-import { NgIf } from '@angular/common';
 import { Component, inject, Input } from '@angular/core';
 import { deleteAsset, deleteDoc, Doc } from '@junobuild/core';
 import { DocsService } from '../../services/docs.service';
@@ -7,7 +6,7 @@ import { BackdropComponent } from '../backdrop/backdrop.component';
 
 @Component({
   selector: 'app-delete',
-  imports: [BackdropComponent, NgIf],
+  imports: [BackdropComponent],
   templateUrl: './delete.component.html',
 })
 export class DeleteComponent {

templates/angular-example/src/app/components/modal/modal.component.html

@@ -11,80 +11,81 @@
   </svg>
 </app-button>
 
-<div
-  class="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
-  role="dialog"
-  *ngIf="showModal"
->
-  <form (ngSubmit)="onSubmit()" [formGroup]="diaryForm">
-    <div class="relative w-full max-w-xl">
-      <textarea
-        class="form-control m-0 block w-full resize-none rounded-xs border-[3px] border-black bg-white px-3 py-1.5 text-base font-normal shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-hidden"
-        rows="{7}"
-        placeholder="Your diary entry"
-        formControlName="entry"
-      ></textarea>
-
-      <div role="toolbar" class="flex items-center justify-between">
-        <div>
-          <button
-            type="button"
-            aria-label="Attach a file to the entry"
-            class="hover:text-lavender-blue-600 active:text-lavender-blue-400 flex items-center gap-2"
-            (click)="openSelectFile()"
-          >
-            <svg
-              width="20"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 29 29"
-              fill="currentColor"
+@if (showModal) {
+  <div
+    class="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
+    role="dialog"
+  >
+    <form (ngSubmit)="onSubmit()" [formGroup]="diaryForm">
+      <div class="relative w-full max-w-xl">
+        <textarea
+          class="form-control m-0 block w-full resize-none rounded-xs border-[3px] border-black bg-white px-3 py-1.5 text-base font-normal shadow-[5px_5px_0px_rgba(0,0,0,1)] focus:outline-hidden"
+          rows="{7}"
+          placeholder="Your diary entry"
+          formControlName="entry"
+        ></textarea>
+        <div role="toolbar" class="flex items-center justify-between">
+          <div>
+            <button
+              type="button"
+              aria-label="Attach a file to the entry"
+              class="hover:text-lavender-blue-600 active:text-lavender-blue-400 flex items-center gap-2"
+              (click)="openSelectFile()"
             >
-              <g>
-                <rect fill="none" class="opacity-25" width="29" height="29" />
-                <path
-                  d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z"
-                />
-              </g>
-            </svg>
-            <span class="max-w-48 truncate">
-              <small>{{
-                file !== undefined ? file.name : "Attach file"
-              }}</small>
-            </span>
-          </button>
-
-          <input
-            type="file"
-            class="fixed right-0 -bottom-24 opacity-0"
-            (change)="onFileChanged($event)"
-            [disabled]="diaryForm.disabled"
-            #inputFile
-          />
-        </div>
-
-        <div
-          class="my-8 inline-block h-6 w-6 animate-spin rounded-full border-[3px] border-current border-t-transparent text-indigo-600"
-          role="status"
-          aria-label="loading"
-          *ngIf="diaryForm.disabled"
-        >
-          <span class="sr-only">Loading...</span>
-        </div>
-
-        <div class="my-4 flex" *ngIf="!diaryForm.disabled">
-          <button
-            class="hover:text-lavender-blue-600 active:text-lavender-blue-400 px-8 py-1"
-            type="button"
-            (click)="closeModal()"
-          >
-            Close
-          </button>
-
-          <app-button [disabled]="diaryForm.disabled"> Submit </app-button>
+              <svg
+                width="20"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 29 29"
+                fill="currentColor"
+              >
+                <g>
+                  <rect fill="none" class="opacity-25" width="29" height="29" />
+                  <path
+                    d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z"
+                  />
+                </g>
+              </svg>
+              <span class="max-w-48 truncate">
+                <small>{{
+                  file !== undefined ? file.name : "Attach file"
+                }}</small>
+              </span>
+            </button>
+            <input
+              type="file"
+              class="fixed right-0 -bottom-24 opacity-0"
+              (change)="onFileChanged($event)"
+              [disabled]="diaryForm.disabled"
+              #inputFile
+            />
+          </div>
+          @if (diaryForm.disabled) {
+            <div
+              class="my-8 inline-block h-6 w-6 animate-spin rounded-full border-[3px] border-current border-t-transparent text-indigo-600"
+              role="status"
+              aria-label="loading"
+            >
+              <span class="sr-only">Loading...</span>
+            </div>
+          }
+          @if (!diaryForm.disabled) {
+            <div class="my-4 flex">
+              <button
+                class="hover:text-lavender-blue-600 active:text-lavender-blue-400 px-8 py-1"
+                type="button"
+                (click)="closeModal()"
+              >
+                Close
+              </button>
+              <app-button [disabled]="diaryForm.disabled"> Submit </app-button>
+            </div>
+          }
         </div>
       </div>
-    </div>
-  </form>
-</div>
+    </form>
+  </div>
+}
 
-<app-backdrop *ngIf="showModal" [spinner]="false" />
+@if (showModal) {
+  <app-backdrop [spinner]="false" />
+}

templates/angular-example/src/app/components/modal/modal.component.ts

@@ -1,4 +1,3 @@
-import { NgIf } from '@angular/common';
 import { Component, ElementRef, inject, ViewChild } from '@angular/core';
 import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
 import { setDoc, uploadFile, User } from '@junobuild/core';
@@ -10,7 +9,7 @@ import { ButtonComponent } from '../button/button.component';
 
 @Component({
   selector: 'app-modal',
-  imports: [NgIf, BackdropComponent, ReactiveFormsModule, ButtonComponent],
+  imports: [BackdropComponent, ReactiveFormsModule, ButtonComponent],
   templateUrl: './modal.component.html',
 })
 export class ModalComponent {

templates/angular-example/src/app/components/table/table.component.html

@@ -4,47 +4,48 @@
   </div>
 
   <div class="py-2" role="rowgroup">
-    <div
-      class="dark:border-lavender-blue-500 mb-4 flex items-center gap-2 rounded-sm border-[3px] border-black bg-white px-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF]"
-      role="row"
-      *ngFor="let item of docs(); index as i"
-    >
-      <span
-        role="cell"
-        aria-rowindex="{index}"
-        class="align-center flex min-w-max p-1"
+    @for (item of docs(); track item; let i = $index) {
+      <div
+        class="dark:border-lavender-blue-500 mb-4 flex items-center gap-2 rounded-sm border-[3px] border-black bg-white px-3 shadow-[8px_8px_0px_rgba(0,0,0,1)] transition-all dark:bg-black dark:text-white dark:shadow-[8px_8px_0px_#7888FF]"
+        role="row"
       >
-        {{ i + 1 }}
-      </span>
-      <div role="cell" class="line-clamp-3 grow overflow-hidden">
-        {{ item.data.text }}
-      </div>
-      <div role="cell" class="flex justify-center gap-2 align-middle">
-        <a
-          aria-label="Open data"
-          rel="noopener noreferrer"
-          [href]="item.data.url"
-          *ngIf="item.data.url !== undefined"
-          target="_blank"
-          class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
+        <span
+          role="cell"
+          aria-rowindex="{index}"
+          class="align-center flex min-w-max p-1"
         >
-          <svg
-            width="16"
-            xmlns="http://www.w3.org/2000/svg"
-            viewBox="0 0 29 29"
-            fill="currentColor"
-          >
-            <g>
-              <rect fill="none" class="opacity-25" width="29" height="29" />
-              <path
-                d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z"
-              />
-            </g>
-          </svg>
-        </a>
-
-        <app-delete [doc]="item" class="contents" />
+          {{ i + 1 }}
+        </span>
+        <div role="cell" class="line-clamp-3 grow overflow-hidden">
+          {{ item.data.text }}
+        </div>
+        <div role="cell" class="flex justify-center gap-2 align-middle">
+          @if (item.data.url !== undefined) {
+            <a
+              aria-label="Open data"
+              rel="noopener noreferrer"
+              [href]="item.data.url"
+              target="_blank"
+              class="hover:text-lavender-blue-500 active:text-lavender-blue-400"
+            >
+              <svg
+                width="16"
+                xmlns="http://www.w3.org/2000/svg"
+                viewBox="0 0 29 29"
+                fill="currentColor"
+              >
+                <g>
+                  <rect fill="none" class="opacity-25" width="29" height="29" />
+                  <path
+                    d="M8.36,26.92c-2,0-3.88-.78-5.29-2.19C.15,21.81.15,17.06,3.06,14.14L12.57,4.64c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41L4.48,15.56c-2.14,2.14-2.14,5.62,0,7.76,1.04,1.04,2.41,1.61,3.88,1.61s2.84-.57,3.88-1.61l12.79-12.79c1.47-1.47,1.47-3.87,0-5.34-1.47-1.47-3.87-1.47-5.34,0l-12.45,12.45c-.73.73-.73,1.91,0,2.64.73.73,1.91.73,2.64,0l9.17-9.17c.39-.39,1.02-.39,1.41,0s.39,1.02,0,1.41l-9.17,9.17c-1.51,1.51-3.96,1.51-5.47,0-1.51-1.51-1.51-3.96,0-5.47L18.26,3.77c2.25-2.25,5.92-2.25,8.17,0s2.25,5.92,0,8.17l-12.79,12.79c-1.41,1.41-3.29,2.19-5.29,2.19Z"
+                  />
+                </g>
+              </svg>
+            </a>
+          }
+          <app-delete [doc]="item" class="contents" />
+        </div>
       </div>
-    </div>
+    }
   </div>
 </div>

templates/angular-example/src/app/components/table/table.component.ts

@@ -1,4 +1,3 @@
-import { NgForOf, NgIf } from '@angular/common';
 import { Component, Signal, inject } from '@angular/core';
 import { Doc } from '@junobuild/core';
 import { DocsService } from '../../services/docs.service';
@@ -7,7 +6,7 @@ import { DeleteComponent } from '../delete/delete.component';
 
 @Component({
   selector: 'app-table',
-  imports: [NgForOf, NgIf, DeleteComponent],
+  imports: [DeleteComponent],
   templateUrl: './table.component.html',
 })
 export class TableComponent {