Skip to content

Commit 962488c

Browse files
peterpeterparkerpeterpeterparker
authored
feat: migrate Angular templates to control flow (#170)
1 parent 058a989 commit 962488c

12 files changed

Lines changed: 146 additions & 151 deletions

File tree

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

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,6 @@
1-
<ng-container *ngIf="signedIn(); else notSignedIn">
1+
@if (signedIn()) {
22
<ng-content></ng-content>
3-
43
<app-logout />
5-
</ng-container>
6-
7-
<ng-template #notSignedIn>
4+
} @else {
85
<app-login />
9-
</ng-template>
6+
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,11 @@
1-
import { NgIf } from '@angular/common';
21
import { Component, inject } from '@angular/core';
32
import { AuthService } from '../../services/auth.service';
43
import { LoginComponent } from '../login/login.component';
54
import { LogoutComponent } from '../logout/logout.component';
65

76
@Component({
87
selector: 'app-auth',
9-
imports: [LoginComponent, LogoutComponent, NgIf],
8+
imports: [LoginComponent, LogoutComponent],
109
templateUrl: './auth.component.html',
1110
})
1211
export class AuthComponent {

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

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,9 @@
11
<div
22
class="dark:bg-lavender-blue-200/40 fixed inset-0 z-40 flex items-center justify-center bg-white/30 backdrop-blur-xl"
33
>
4-
<div
5-
*ngIf="spinner"
6-
class="border-lavender-blue-600 h-12 w-12 animate-spin rounded-full border-[3px] border-solid border-t-transparent"
7-
></div>
4+
@if (spinner) {
5+
<div
6+
class="border-lavender-blue-600 h-12 w-12 animate-spin rounded-full border-[3px] border-solid border-t-transparent"
7+
></div>
8+
}
89
</div>

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,7 @@
1-
import { NgIf } from '@angular/common';
21
import { Component, Input } from '@angular/core';
32

43
@Component({
54
selector: 'app-backdrop',
6-
imports: [NgIf],
75
templateUrl: './backdrop.component.html',
86
})
97
export class BackdropComponent {

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

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
<div
2-
*ngIf="showBanner"
3-
class="bg-screamin-green-200 fixed top-0 right-0 left-0 px-4 py-0.5 text-sm text-black"
4-
>
5-
<p class="text-center font-medium">
6-
<span>Your project needs a Satellite for local dev.</span>
7-
<a
8-
href="http://localhost:5866"
9-
target="_blank"
10-
class="ml-2 inline-block font-bold underline"
11-
aria-label="Open the Juno Console to create a new Satellite for testing"
12-
>
13-
Create one now!
14-
</a>
15-
</p>
16-
</div>
1+
@if (showBanner) {
2+
<div
3+
class="bg-screamin-green-200 fixed top-0 right-0 left-0 px-4 py-0.5 text-sm text-black"
4+
>
5+
<p class="text-center font-medium">
6+
<span>Your project needs a Satellite for local dev.</span>
7+
<a
8+
href="http://localhost:5866"
9+
target="_blank"
10+
class="ml-2 inline-block font-bold underline"
11+
aria-label="Open the Juno Console to create a new Satellite for testing"
12+
>
13+
Create one now!
14+
</a>
15+
</p>
16+
</div>
17+
}

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

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,8 @@
1-
import { NgIf } from '@angular/common';
21
import { Component, isDevMode } from '@angular/core';
32
import { environment } from '../../../environments/environment';
43

54
@Component({
65
selector: 'app-banner',
7-
imports: [NgIf],
86
templateUrl: './banner.component.html',
97
})
108
export class BannerComponent {

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -31,4 +31,6 @@
3131
</svg>
3232
</button>
3333

34-
<app-backdrop [spinner]="true" *ngIf="progress" />
34+
@if (progress) {
35+
<app-backdrop [spinner]="true" />
36+
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { NgIf } from '@angular/common';
21
import { Component, inject, Input } from '@angular/core';
32
import { deleteAsset, deleteDoc, Doc } from '@junobuild/core';
43
import { DocsService } from '../../services/docs.service';
@@ -7,7 +6,7 @@ import { BackdropComponent } from '../backdrop/backdrop.component';
76

87
@Component({
98
selector: 'app-delete',
10-
imports: [BackdropComponent, NgIf],
9+
imports: [BackdropComponent],
1110
templateUrl: './delete.component.html',
1211
})
1312
export class DeleteComponent {

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

Lines changed: 74 additions & 73 deletions
Original file line numberDiff line numberDiff line change
@@ -11,80 +11,81 @@
1111
</svg>
1212
</app-button>
1313

14-
<div
15-
class="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
16-
role="dialog"
17-
*ngIf="showModal"
18-
>
19-
<form (ngSubmit)="onSubmit()" [formGroup]="diaryForm">
20-
<div class="relative w-full max-w-xl">
21-
<textarea
22-
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"
23-
rows="{7}"
24-
placeholder="Your diary entry"
25-
formControlName="entry"
26-
></textarea>
27-
28-
<div role="toolbar" class="flex items-center justify-between">
29-
<div>
30-
<button
31-
type="button"
32-
aria-label="Attach a file to the entry"
33-
class="hover:text-lavender-blue-600 active:text-lavender-blue-400 flex items-center gap-2"
34-
(click)="openSelectFile()"
35-
>
36-
<svg
37-
width="20"
38-
xmlns="http://www.w3.org/2000/svg"
39-
viewBox="0 0 29 29"
40-
fill="currentColor"
14+
@if (showModal) {
15+
<div
16+
class="animate-fade fixed inset-0 z-50 p-16 md:px-24 md:py-44"
17+
role="dialog"
18+
>
19+
<form (ngSubmit)="onSubmit()" [formGroup]="diaryForm">
20+
<div class="relative w-full max-w-xl">
21+
<textarea
22+
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"
23+
rows="{7}"
24+
placeholder="Your diary entry"
25+
formControlName="entry"
26+
></textarea>
27+
<div role="toolbar" class="flex items-center justify-between">
28+
<div>
29+
<button
30+
type="button"
31+
aria-label="Attach a file to the entry"
32+
class="hover:text-lavender-blue-600 active:text-lavender-blue-400 flex items-center gap-2"
33+
(click)="openSelectFile()"
4134
>
42-
<g>
43-
<rect fill="none" class="opacity-25" width="29" height="29" />
44-
<path
45-
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"
46-
/>
47-
</g>
48-
</svg>
49-
<span class="max-w-48 truncate">
50-
<small>{{
51-
file !== undefined ? file.name : "Attach file"
52-
}}</small>
53-
</span>
54-
</button>
55-
56-
<input
57-
type="file"
58-
class="fixed right-0 -bottom-24 opacity-0"
59-
(change)="onFileChanged($event)"
60-
[disabled]="diaryForm.disabled"
61-
#inputFile
62-
/>
63-
</div>
64-
65-
<div
66-
class="my-8 inline-block h-6 w-6 animate-spin rounded-full border-[3px] border-current border-t-transparent text-indigo-600"
67-
role="status"
68-
aria-label="loading"
69-
*ngIf="diaryForm.disabled"
70-
>
71-
<span class="sr-only">Loading...</span>
72-
</div>
73-
74-
<div class="my-4 flex" *ngIf="!diaryForm.disabled">
75-
<button
76-
class="hover:text-lavender-blue-600 active:text-lavender-blue-400 px-8 py-1"
77-
type="button"
78-
(click)="closeModal()"
79-
>
80-
Close
81-
</button>
82-
83-
<app-button [disabled]="diaryForm.disabled"> Submit </app-button>
35+
<svg
36+
width="20"
37+
xmlns="http://www.w3.org/2000/svg"
38+
viewBox="0 0 29 29"
39+
fill="currentColor"
40+
>
41+
<g>
42+
<rect fill="none" class="opacity-25" width="29" height="29" />
43+
<path
44+
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"
45+
/>
46+
</g>
47+
</svg>
48+
<span class="max-w-48 truncate">
49+
<small>{{
50+
file !== undefined ? file.name : "Attach file"
51+
}}</small>
52+
</span>
53+
</button>
54+
<input
55+
type="file"
56+
class="fixed right-0 -bottom-24 opacity-0"
57+
(change)="onFileChanged($event)"
58+
[disabled]="diaryForm.disabled"
59+
#inputFile
60+
/>
61+
</div>
62+
@if (diaryForm.disabled) {
63+
<div
64+
class="my-8 inline-block h-6 w-6 animate-spin rounded-full border-[3px] border-current border-t-transparent text-indigo-600"
65+
role="status"
66+
aria-label="loading"
67+
>
68+
<span class="sr-only">Loading...</span>
69+
</div>
70+
}
71+
@if (!diaryForm.disabled) {
72+
<div class="my-4 flex">
73+
<button
74+
class="hover:text-lavender-blue-600 active:text-lavender-blue-400 px-8 py-1"
75+
type="button"
76+
(click)="closeModal()"
77+
>
78+
Close
79+
</button>
80+
<app-button [disabled]="diaryForm.disabled"> Submit </app-button>
81+
</div>
82+
}
8483
</div>
8584
</div>
86-
</div>
87-
</form>
88-
</div>
85+
</form>
86+
</div>
87+
}
8988

90-
<app-backdrop *ngIf="showModal" [spinner]="false" />
89+
@if (showModal) {
90+
<app-backdrop [spinner]="false" />
91+
}

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

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { NgIf } from '@angular/common';
21
import { Component, ElementRef, inject, ViewChild } from '@angular/core';
32
import { FormBuilder, ReactiveFormsModule } from '@angular/forms';
43
import { setDoc, uploadFile, User } from '@junobuild/core';
@@ -10,7 +9,7 @@ import { ButtonComponent } from '../button/button.component';
109

1110
@Component({
1211
selector: 'app-modal',
13-
imports: [NgIf, BackdropComponent, ReactiveFormsModule, ButtonComponent],
12+
imports: [BackdropComponent, ReactiveFormsModule, ButtonComponent],
1413
templateUrl: './modal.component.html',
1514
})
1615
export class ModalComponent {

0 commit comments

Comments
 (0)