migrated to new control flow

nkonko · Mar 26, 2024 · f8c336d · f8c336d
1 parent 83c855f
commit f8c336d
Show file tree

Hide file tree

Showing 9 changed files with 197 additions and 151 deletions.
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1,17 +1,21 @@
-<div *ngIf="loading">
-  <app-splash></app-splash>
-</div>
+@if (loading) {
+  <div>
+    <app-splash></app-splash>
+  </div>
+}
 
-<div *ngIf="!loading">
-  <app-navbar class="mb-2"></app-navbar>
-  <section class='section is-medium'>
-    <router-outlet></router-outlet>
-  </section>
-  <ng-container *ngIf="hideComponents">
-    <app-footer></app-footer>
-    <a (click)="toggleActivation()" class="fab button is-floating is-link shadow">
-      <i class="fas fa-envelope"></i>
-    </a>
-    <app-modal [isActive]="modalActive" (reset)="modalActive = false"></app-modal>
-  </ng-container>
-</div>
+@if (!loading) {
+  <div>
+    <app-navbar class="mb-2"></app-navbar>
+    <section class='section is-medium'>
+      <router-outlet></router-outlet>
+    </section>
+    @if (hideComponents) {
+      <app-footer></app-footer>
+      <a (click)="toggleActivation()" class="fab button is-floating is-link shadow">
+        <i class="fas fa-envelope"></i>
+      </a>
+      <app-modal [isActive]="modalActive" (reset)="modalActive = false"></app-modal>
+    }
+  </div>
+}
diff --git a/src/app/modules/about/components/about/about.component.html b/src/app/modules/about/components/about/about.component.html
@@ -9,9 +9,9 @@ <h1 class="title mt-5 is-1">Meet me</h1>
             {{presentation}}
           </div>
         </article>
-        <ng-container *ngFor="let item of paragraphs">
+        @for (item of paragraphs; track item) {
           <app-collapse-message [paragraph]="item.paragraph" [title]="item.title"></app-collapse-message>
-        </ng-container>
+        }
       </div>
     </div>
   </div>

diff --git a/src/app/modules/contact/components/contact/contact.component.html b/src/app/modules/contact/components/contact/contact.component.html
@@ -5,84 +5,104 @@
       <input formControlName="name" class="input is-medium"
         [class.is-danger]="!this.contactForm.get('name')?.pristine && this.contactForm.get('name')?.invalid && !(this.contactForm.get('name')?.value === '')"
         type="text" placeholder="Alex Smith">
+      </div>
+      @if (!this.contactForm.get('name')?.pristine && this.contactForm.get('name')?.invalid && this.contactForm.get('name')?.errors!['required'] && !(this.contactForm.get('name')?.value === '')) {
+        <p class="help is-danger"
+          >
+        Name is required</p>
+      }
+      @if (!this.contactForm.get('name')?.pristine && this.contactForm.get('name')?.invalid && this.contactForm.get('name')?.errors!['minlength']) {
+        <p class="help is-danger"
+          >
+        Name must be at least 3 characters</p>
+      }
     </div>
-    <p class="help is-danger"
-      *ngIf="!this.contactForm.get('name')?.pristine && this.contactForm.get('name')?.invalid && this.contactForm.get('name')?.errors!['required'] && !(this.contactForm.get('name')?.value === '')">
-      Name is required</p>
-    <p class="help is-danger"
-      *ngIf="!this.contactForm.get('name')?.pristine && this.contactForm.get('name')?.invalid && this.contactForm.get('name')?.errors!['minlength']">
-      Name must be at least 3 characters</p>
-  </div>
-  <div class="field">
-    <label class="label">Email</label>
-    <p class="control has-icons-left has-icons-right">
-      <input formControlName="email" class="input is-medium"
-        [class.is-danger]="!this.contactForm.get('email')?.pristine && this.contactForm.get('email')?.invalid && !(this.contactForm.get('email')?.value === '')"
-        type="email" placeholder="[email protected]" (focus)="animateEnvelope = true"
-        (blur)="animateEnvelope = false">
-      <span class="icon is-small is-left">
-        <i class="fas fa-envelope" [class.fa-bounce]="animateEnvelope"></i>
-      </span>
-      <span class="icon is-small is-right"
-        *ngIf="!this.contactForm.get('email')?.pristine && !this.contactForm.get('email')?.invalid">
-        <i class="fas fa-check has-text-success"></i>
-      </span>
-      <span class="icon is-small is-right"
-        *ngIf="!this.contactForm.get('email')?.pristine && this.contactForm.get('email')?.invalid ">
-        <i class="fas fa-exclamation-triangle has-text-danger"></i>
-      </span>
-    </p>
-    <p class="help is-danger"
-      *ngIf="!this.contactForm.get('email')?.pristine && this.contactForm.get('email')?.invalid && this.contactForm.get('email')?.errors!['required'] && !(this.contactForm.get('email')?.value === '')">
-      Email is required</p>
-    <p class="help is-danger"
-      *ngIf="!this.contactForm.get('email')?.pristine && this.contactForm.get('email')?.invalid && !(this.contactForm.get('email')?.value === '')">
-      This email is invalid</p>
-  </div>
-  <div class="field">
-    <label class="label">Phone</label>
-    <p class="control has-icons-left has-icons-right">
-      <input formControlName="phone" class="input is-medium"
-        [class.is-danger]="!this.contactForm.get('phone')?.pristine && this.contactForm.get('phone')?.invalid"
-        type="tel" placeholder="5555-5555" (focus)="animatePhone = true" (blur)="animatePhone = false">
-      <span class="icon is-small is-left">
-        <i class="fa-solid fa-mobile-screen" [class.fa-shake]="animatePhone"></i>
-      </span>
+    <div class="field">
+      <label class="label">Email</label>
+      <p class="control has-icons-left has-icons-right">
+        <input formControlName="email" class="input is-medium"
+          [class.is-danger]="!this.contactForm.get('email')?.pristine && this.contactForm.get('email')?.invalid && !(this.contactForm.get('email')?.value === '')"
+          type="email" placeholder="[email protected]" (focus)="animateEnvelope = true"
+          (blur)="animateEnvelope = false">
+          <span class="icon is-small is-left">
+            <i class="fas fa-envelope" [class.fa-bounce]="animateEnvelope"></i>
+          </span>
+          @if (!this.contactForm.get('email')?.pristine && !this.contactForm.get('email')?.invalid) {
+            <span class="icon is-small is-right"
+              >
+              <i class="fas fa-check has-text-success"></i>
+            </span>
+          }
+          @if (!this.contactForm.get('email')?.pristine && this.contactForm.get('email')?.invalid ) {
+            <span class="icon is-small is-right"
+              >
+              <i class="fas fa-exclamation-triangle has-text-danger"></i>
+            </span>
+          }
+        </p>
+        @if (!this.contactForm.get('email')?.pristine && this.contactForm.get('email')?.invalid && this.contactForm.get('email')?.errors!['required'] && !(this.contactForm.get('email')?.value === '')) {
+          <p class="help is-danger"
+            >
+          Email is required</p>
+        }
+        @if (!this.contactForm.get('email')?.pristine && this.contactForm.get('email')?.invalid && !(this.contactForm.get('email')?.value === '')) {
+          <p class="help is-danger"
+            >
+          This email is invalid</p>
+        }
+      </div>
+      <div class="field">
+        <label class="label">Phone</label>
+        <p class="control has-icons-left has-icons-right">
+          <input formControlName="phone" class="input is-medium"
+            [class.is-danger]="!this.contactForm.get('phone')?.pristine && this.contactForm.get('phone')?.invalid"
+            type="tel" placeholder="5555-5555" (focus)="animatePhone = true" (blur)="animatePhone = false">
+            <span class="icon is-small is-left">
+              <i class="fa-solid fa-mobile-screen" [class.fa-shake]="animatePhone"></i>
+            </span>
 
-      <span class="icon is-small is-right"
-        *ngIf="!this.contactForm.get('phone')?.pristine && !this.contactForm.get('phone')?.invalid && !(this.contactForm.get('phone')?.value === '')">
-        <i class="fas fa-check has-text-success"></i>
-      </span>
-      <span class="icon is-small is-right"
-        *ngIf="!this.contactForm.get('phone')?.pristine && this.contactForm.get('phone')?.invalid">
-        <i class="fas fa-exclamation-triangle has-text-danger"></i>
-      </span>
-    </p>
-    <p class="help is-danger"
-      *ngIf="!this.contactForm.get('phone')?.pristine && this.contactForm.get('phone')?.invalid && this.contactForm.get('phone')?.errors!['minlength']">
-      Phone must be at least 3 characters</p>
-  </div>
+            @if (!this.contactForm.get('phone')?.pristine && !this.contactForm.get('phone')?.invalid && !(this.contactForm.get('phone')?.value === '')) {
+              <span class="icon is-small is-right"
+                >
+                <i class="fas fa-check has-text-success"></i>
+              </span>
+            }
+            @if (!this.contactForm.get('phone')?.pristine && this.contactForm.get('phone')?.invalid) {
+              <span class="icon is-small is-right"
+                >
+                <i class="fas fa-exclamation-triangle has-text-danger"></i>
+              </span>
+            }
+          </p>
+          @if (!this.contactForm.get('phone')?.pristine && this.contactForm.get('phone')?.invalid && this.contactForm.get('phone')?.errors!['minlength']) {
+            <p class="help is-danger"
+              >
+            Phone must be at least 3 characters</p>
+          }
+        </div>
 
-  <div class="field">
-    <label class="label">Message</label>
-    <div class="control">
-      <textarea formControlName="message" class="textarea"
-        [class.is-danger]="!this.contactForm.get('message')?.pristine && this.contactForm.get('message')?.invalid"
-        placeholder="Message..."></textarea>
-    </div>
-    <p class="help is-danger"
-      *ngIf="!this.contactForm.get('message')?.pristine && this.contactForm.get('message')?.invalid && this.contactForm.get('message')?.errors!['minlength']">
-      Message must be at least 8 characters</p>
-  </div>
+        <div class="field">
+          <label class="label">Message</label>
+          <div class="control">
+            <textarea formControlName="message" class="textarea"
+              [class.is-danger]="!this.contactForm.get('message')?.pristine && this.contactForm.get('message')?.invalid"
+            placeholder="Message..."></textarea>
+          </div>
+          @if (!this.contactForm.get('message')?.pristine && this.contactForm.get('message')?.invalid && this.contactForm.get('message')?.errors!['minlength']) {
+            <p class="help is-danger"
+              >
+            Message must be at least 8 characters</p>
+          }
+        </div>
 
 
-  <div class="field is-grouped is-grouped-centered">
-    <p class="control">
-      <button type="submit" class="button is-link is-outlined is-medium"
-        [disabled]="contactForm.pristine || contactForm.invalid">
-        SEND
-      </button>
-    </p>
-  </div>
+        <div class="field is-grouped is-grouped-centered">
+          <p class="control">
+            <button type="submit" class="button is-link is-outlined is-medium"
+              [disabled]="contactForm.pristine || contactForm.invalid">
+              SEND
+            </button>
+          </p>
+        </div>
 
-</form>
+      </form>
diff --git a/src/app/modules/experience/components/experience/experience.component.html b/src/app/modules/experience/components/experience/experience.component.html
@@ -5,32 +5,34 @@
         <header class="timeline-header ml-5">
           <span class="tag is-medium is-primary">Present</span>
         </header>
-        <div class="timeline-item"
-        (mouseover)="hoverTimelineMarker(true, work.id)"
-        (mouseout)="hoverTimelineMarker(false, work.id)"
-        (click)="selectWork(work.id)"
-        *ngFor="let work of works">
-          <div class="timeline-marker"
+        @for (work of works; track work) {
+          <div class="timeline-item"
+            (mouseover)="hoverTimelineMarker(true, work.id)"
+            (mouseout)="hoverTimelineMarker(false, work.id)"
+            (click)="selectWork(work.id)"
+            >
+            <div class="timeline-marker"
           [ngClass]="{'is-primary': selectedWork.id !== work.id,
                     'is-link': selectedWork.id === work.id}"
-          ></div>
-          <div id="{{work.id}}" class="timeline-content">
-            <p class="heading" [class.selected]="selectedWork.id === work.id"><b>{{work.startDate | date: 'MMMM YYYY'}} </b> TO <b>{{work.isCurrentRole ? 'Present' :
-                work.endDate | date: 'MMMM YYYY'}} </b></p>
+            ></div>
+            <div id="{{work.id}}" class="timeline-content">
+              <p class="heading" [class.selected]="selectedWork.id === work.id"><b>{{work.startDate | date: 'MMMM YYYY'}} </b> TO <b>{{work.isCurrentRole ? 'Present' :
+            work.endDate | date: 'MMMM YYYY'}} </b></p>
             <p class="heading">Company: <a href="{{work.website}}"><strong class="shadow has-tooltip-arrow has-tooltip-bottom" data-tooltip="Open LinkedIn">
-              {{work.company}}</strong></a></p>
+            {{work.company}}</strong></a></p>
             <span class="heading is-flex">Position: <p class="title is-6 ml-2">{{work.position}}</p></span>
           </div>
         </div>
-        <div class="timeline-header ml-5">
-          <span class="tag is-medium is-primary">Begining</span>
-        </div>
+      }
+      <div class="timeline-header ml-5">
+        <span class="tag is-medium is-primary">Begining</span>
       </div>
     </div>
+  </div>
 
-    <div class="column is-8" id="summary">
-      <div class="box" [innerHTML]="selectedWork.summary"></div>
-    </div>
-
+  <div class="column is-8" id="summary">
+    <div class="box" [innerHTML]="selectedWork.summary"></div>
   </div>
+
+</div>
 </div>
diff --git a/src/app/modules/home/components/home/home.component.html b/src/app/modules/home/components/home/home.component.html
@@ -17,27 +17,31 @@ <h4 class="word-carousel">
               with technologies like:
             </span>
             <br>
-            <br>
+              <br>
 
-            <div class="box">
-              <div class="marquee">
-                <ul class="marquee__content">
-                  <li class="marquee__item pl-4" *ngFor="let skill of completeSkills">
-                    <span class="icon-text" *ngIf="skill.icon">
-                      <span class="icon">
-                        <i class="{{skill.icon}}" style="font-size: x-large;"></i>
-                      </span>
-                    </span>
-                    <span>
-                      {{skill.name}}
-                    </span>
-                  </li>
-                </ul>
-              </div>
+                <div class="box">
+                  <div class="marquee">
+                    <ul class="marquee__content">
+                      @for (skill of completeSkills; track skill) {
+                        <li class="marquee__item pl-4">
+                          @if (skill.icon) {
+                            <span class="icon-text">
+                              <span class="icon">
+                                <i class="{{skill.icon}}" style="font-size: x-large;"></i>
+                              </span>
+                            </span>
+                          }
+                          <span>
+                            {{skill.name}}
+                          </span>
+                        </li>
+                      }
+                    </ul>
+                  </div>
+                </div>
+              </h4>
             </div>
-          </h4>
+          </div>
         </div>
       </div>
-    </div>
-  </div>
-</section>
+    </section>
diff --git a/src/app/shared/layout/footer/component/footer/footer.component.html b/src/app/shared/layout/footer/component/footer/footer.component.html
@@ -6,11 +6,13 @@
         <a href="https://bulma.io"><img src="https://bulma.io/images/made-with-bulma--dark.png" alt="Made with Bulma" width="163" height="31"></a>
       </div>
       <div class="social-icons">
-        <a (click)="goToLink(social.url)" class="is-link" *ngFor="let social of socials$ | async">
-          <span class="icon is-medium pl-4">
-            <i class="{{social.icon}} fa-lg"></i>
-          </span>
-        </a>
+        @for (social of socials$ | async; track social) {
+          <a (click)="goToLink(social.url)" class="is-link">
+            <span class="icon is-medium pl-4">
+              <i class="{{social.icon}} fa-lg"></i>
+            </span>
+          </a>
+        }
       </div>
     </div>
   </div>

diff --git a/src/app/shared/skill-box/component/skill-box.component.html b/src/app/shared/skill-box/component/skill-box.component.html
@@ -4,10 +4,20 @@ <h2 class="title is-4">{{skill.name}}
     </h2>
     <i class="{{skill.icon}}" style="font-size: xx-large;"></i>
   </div>
-  <progress *ngIf="skill.level === ''" class="progress is-primary" value="5" max="100">5%</progress>
-  <progress *ngIf="skill.level === 'Beginner'" class="progress is-primary" value="25" max="100">25%</progress>
-  <progress *ngIf="skill.level === 'Intermediate'" class="progress is-primary" value="50" max="100">50%</progress>
-  <progress *ngIf="skill.level === 'Advanced'" class="progress is-primary" value="75" max="100">75%</progress>
-  <progress *ngIf="skill.level === 'Expert'" class="progress is-primary" value="90" max="100">90%</progress>
+  @if (skill.level === '') {
+    <progress class="progress is-primary" value="5" max="100">5%</progress>
+  }
+  @if (skill.level === 'Beginner') {
+    <progress class="progress is-primary" value="25" max="100">25%</progress>
+  }
+  @if (skill.level === 'Intermediate') {
+    <progress class="progress is-primary" value="50" max="100">50%</progress>
+  }
+  @if (skill.level === 'Advanced') {
+    <progress class="progress is-primary" value="75" max="100">75%</progress>
+  }
+  @if (skill.level === 'Expert') {
+    <progress class="progress is-primary" value="90" max="100">90%</progress>
+  }
   <p>Experience: {{skill.yearsOfExperience}} years.</p>
 </div>
diff --git a/src/app/shared/skill-boxes/component/skill-boxes.component.html b/src/app/shared/skill-boxes/component/skill-boxes.component.html
@@ -1,5 +1,7 @@
 <div class="container">
   <div class="columns is-flex-desktop-only is-flex-wrap-wrap">
-    <app-skill-box class="column is-one-quarter animated" [skill]="skill" *ngFor="let skill of skills"></app-skill-box>
+    @for (skill of skills; track skill) {
+      <app-skill-box class="column is-one-quarter animated" [skill]="skill"></app-skill-box>
+    }
   </div>
 </div>