improvement template with blocks if and for

criar-art · Jul 4, 2024 · 5322dbf · 5322dbf
1 parent 40b4dca
commit 5322dbf
Show file tree

Hide file tree

Showing 2 changed files with 35 additions and 33 deletions.
diff --git a/projects/angular-techs-logos/src/lib/angular-techs-logos.component.html b/projects/angular-techs-logos/src/lib/angular-techs-logos.component.html
@@ -1,5 +1,5 @@
 <div class="techs" [ngClass]="class">
-  <ng-container *ngIf="name && getTech(name) && !list">
+  @if (name && getTech(name) && !list) {
     <figure
       class="tech-container"
       [ngClass]="techClass(name)"
@@ -10,19 +10,19 @@
         {{ label ? label : getTech(name)?.name }}
       </figcaption>
     </figure>
-  </ng-container>
-  <ng-container *ngIf="!name && (list || techsList)">
-    <figure
-      class="tech-container"
-      *ngFor="let tech of techsList()"
-      [ngClass]="[tech.name.toLowerCase()]"
-      [style.width]="size ? size : '100px'"
-      [attr.key]="tech.name"
-    >
-      <ng-container *ngComponentOutlet="getIcon(tech.name)" />
-      <figcaption [ngClass]="{ tooltip: hiddenLabel }">
-        {{ tech.name }}
-      </figcaption>
-    </figure>
-  </ng-container>
+  } @else if (!name && (list || techsList())) {
+    @for (tech of techsList(); track tech.name;) {
+      <figure
+        class="tech-container"
+        [ngClass]="[tech.name.toLowerCase()]"
+        [style.width]="size ? size : '100px'"
+        [attr.key]="tech.name"
+      >
+        <ng-container *ngComponentOutlet="getIcon(tech.name)" />
+        <figcaption [ngClass]="{ tooltip: hiddenLabel }">
+          {{ tech.name }}
+        </figcaption>
+      </figure>
+    }
+  }
 </div>
diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -34,23 +34,25 @@ <h2>List of techs</h2>
         (input)="onSearchChange($event)"
       />
       <angular-techs-logos [list]="techsFiltered" />
-      <div class="not-found" [hidden]="techsFiltered.length > 0">
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          fill="none"
-          width="100px"
-          height="100px"
-          viewBox="-20 0 190 190"
-        >
-          <path
-            fill="var(--vtl-background-svg)"
-            fill-rule="evenodd"
-            d="m38.155 140.475 10.833-78.364 43.881 4.946 18.568 23.955-8.041 57.109-65.241-7.646Zm45.858-46.473 4.814-22.195-34.781-3.5-9.854 67.15 54.143 6.627 6.542-45.275-20.864-2.807Zm-24.242 29.593c-.377-.496-3.721-3.296-4.35-4.162 8.899-9.911 30.629-9.788 36.664 3.324-1.005.371-5.495 2.315-6.375 2.81-2.518-7.317-17.265-9.625-25.939-1.972Zm16.732-27.096-3.666 2.76-5.515-6.642-7.507 4.03-3.029-5.07 6.829-3.426-4.526-5.452 5.5-3.68 4.39 6.439 7.819-3.925 2.356 4.73-7.047 3.784 4.396 6.452Z"
-            clip-rule="evenodd"
-          />
-        </svg>
-        <p>No logos found matching your search.</p>
-      </div>
+      @if (techsFiltered.length == 0) {
+        <div class="not-found">
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            fill="none"
+            width="100px"
+            height="100px"
+            viewBox="-20 0 190 190"
+          >
+            <path
+              fill="var(--vtl-background-svg)"
+              fill-rule="evenodd"
+              d="m38.155 140.475 10.833-78.364 43.881 4.946 18.568 23.955-8.041 57.109-65.241-7.646Zm45.858-46.473 4.814-22.195-34.781-3.5-9.854 67.15 54.143 6.627 6.542-45.275-20.864-2.807Zm-24.242 29.593c-.377-.496-3.721-3.296-4.35-4.162 8.899-9.911 30.629-9.788 36.664 3.324-1.005.371-5.495 2.315-6.375 2.81-2.518-7.317-17.265-9.625-25.939-1.972Zm16.732-27.096-3.666 2.76-5.515-6.642-7.507 4.03-3.029-5.07 6.829-3.426-4.526-5.452 5.5-3.68 4.39 6.439 7.819-3.925 2.356 4.73-7.047 3.784 4.396 6.452Z"
+              clip-rule="evenodd"
+            />
+          </svg>
+          <p>No logos found matching your search.</p>
+        </div>
+      }
     </div>
   </main>
   <app-footer></app-footer>