refactor: migra a control flow nativo (@if/@for/@switch) y elimina CommonModule

libs/ui/README.md

@@ -22,10 +22,12 @@ Construir: `nx build ui` · Lint: `nx lint ui`
 | NgModules | 41 → 4 (sólo quedan los que aportan providers: `icon-registry`, `loaders`, `router-store`, `scroll-to`) |
 | Componentes | 70, **todos** con `ChangeDetectionStrategy.OnPush` |
 | Decoradores | 0 restantes: 460 `input()`, 6 `model()`, 20 `output()`, 8 `viewChild()`, 2 `viewChildren()`, 17 `contentChild()`, 6 `contentChildren()` |
+| Control flow | `*ngIf`/`*ngFor`/`*ngSwitch` → `@if`/`@for`/`@switch` (110 `@if`, 26 `@for`, 3 `@switch`). Ya no se importa ninguna directiva de `CommonModule` |
 
 Se usaron las migraciones oficiales de Angular (`@angular/core:standalone`,
-`signal-input-migration`, `output-migration`, `signal-queries-migration`) y se
-resolvió a mano lo que no cubren.
+`signal-input-migration`, `output-migration`, `signal-queries-migration`,
+`control-flow-migration`, `cleanup-unused-imports`) y se resolvió a mano lo que
+no cubren.
 
 ## Decisiones que cambian comportamiento
 
@@ -79,6 +81,17 @@ Mantiene el runtime idéntico al original. Se pueden eliminar migrando a
 `truncate : (33 || …)`, así que el fallback nunca se aplicaba. Ahora está
 parentizado como se pretendía.
 
+**8. Los 3 selects se convirtieron a control flow a mano.**
+La migración automática se rindió con ellos: tenían un `*ngIf ... else` que
+apuntaba a un `<ng-template>` con un `[ngSwitch]` dentro. Al reescribirlos hubo
+que renombrar plantillas duplicadas (`#defaultSelected` aparecía dos veces en
+ramas distintas del switch) a `#defaultSelectedFill`/`#defaultSelectedOutline`,
+y en select-period `#defaultOption` → `#defaultMonthOption`/`#defaultYearOption`.
+Los `*ngFor` sin `trackBy` pasaron a `track <item>`, que es lo que hacía `ngFor`
+por defecto. En data-grid y select-carousel la migración generó
+`track trackByFn(i, item)` pero esos `trackByFn` sólo declaran `index`: se
+corrigió la aridad a `track trackByFn(i)`.
+
 ## Colisiones de nombres en el barrel
 
 El origen tiene símbolos duplicados. En `index.ts` gana el primero y el otro se
@@ -104,7 +117,8 @@ omite (queda anotado en el fichero). Siguen siendo accesibles por ruta directa:
 - **`Sector`** vivía en `deale-saas/util/models` (lib de aplicación, fuera de alcance); se trajo la interfaz a `util/models`.
 - **ngrx 21 con Angular 22**: instalado con `--legacy-peer-deps` (aún no declara soporte para 22).
 - **Lint**: `nx lint ui` falla con avisos heredados del código original —
-  `prefer-control-flow` (104: `*ngIf`/`*ngFor` en vez de `@if`/`@for`),
-  `directive-selector` (40), `prefer-inject` (33), a11y y `no-unused-vars`.
-  Nada bloquea el build. Hay migraciones oficiales para los dos primeros grupos:
-  `nx g @angular/core:control-flow-migration` y `nx g @angular/core:inject-migration`.
+  `prefer-inject` (51), `directive-selector` (46), `no-explicit-any` (35),
+  `no-unused-expressions` (33), a11y (`click-events-have-key-events`,
+  `interactive-supports-focus`, `label-has-associated-control`) y
+  `no-unused-vars`. Nada bloquea el build. Para el primer grupo hay migración
+  oficial: `nx g @angular/core:inject-migration`.

libs/ui/src/lib/ui/accordion/accordion/accordion.component.html

@@ -1,131 +1,119 @@
 <!-- HEADER OF THE WHOLE ACCORDION -->
 <ng-content select="pi-accordion-header"></ng-content>
 
-<ng-container *ngIf="direction() === 'default'; else horizontal">
-  <section
-    *ngFor="let item of items(); index as i"
-    [class]="
-      !!item.status() && item.status() === 'disabled'
-        ? 'is-disabled'
-        : '' + setAccordionItemClasses(item, i)
-    "
-    class="pi-accordion-item"
-  >
-    <!-- TOPBAR -->
-    <div
-      *ngIf="item.isConfidential() === true"
-      class="pi-accordion-item-content pi-accordion-item-content__topbar"
-      pi-dynamic-color
-      [color]="isItemExpanded(i) ? 'highlighted' : 'grey'"
-      mode="light"
-    >
-      <pi-text-viewer
-        [label]="'common.confidentialInfo' | translate"
-        icon="lock"
-        [color]="isItemExpanded(i) ? 'highlighted' : 'grey'"
-        [iconColor]="isItemExpanded(i) ? 'highlighted' : 'grey'"
-        iconSize="x-small"
-        iconAppearance="stroke"
-        iconSize="x-small"
-        fontSize="xxs"
-        fontWeight="400"
-      ></pi-text-viewer>
-    </div>
-
-    <!-- HEADER -->
-    <header
-      (click)="toggleState(item, i)"
-      [class]="
-        setAccordionItemClasses(item, i) +
-        ' ' +
-        'pi-accordion-item-content pi-accordion-item-content__header'
-      "
-    >
-      <ng-container
-        [ngTemplateOutlet]="item?.customHeader()?.templateRef || defaultHeader"
-        [ngTemplateOutletContext]="{
-          $implicit: item,
-          index: i,
-          isExpanded: isItemExpanded(i),
-        }"
-      ></ng-container>
-      <aside
-        class="pi-accordion-item-header-content pi-accordion-item-header-content__right"
-      >
-        <pi-chip-status
-          *ngIf="item.status()"
-          [status]="item.status()"
-          [label]="item.statusLabel()"
-          [icon]="item.statusIcon()"
-        ></pi-chip-status>
-        <span *ngIf="item.status()"></span>
-        <ng-container *ngIf="hasForm(); else defaultIcon">
-          <pi-icon-button
-            (execute)="toggleState(item, i)"
-            appearance="ghost"
-            color="black"
-            icon="chevron-forward"
-            size="x-small"
-            [hasPadding]="false"
-            [text]="'common.edit' | translate"
-            [class]="isItemExpanded(i) ? 'is-expanded' : 'is-collapsed'"
-            [disabled]="!!item.status() && item.status() === 'disabled'"
-          ></pi-icon-button>
-        </ng-container>
-        <ng-template #defaultIcon>
-          <pi-icon
-            icon="chevron-forward"
-            [size]="appearance() === 'outline' ? 'x-small' : 'small'"
-            [color]="color() === 'white' ? 'grey' : color()"
-          ></pi-icon>
-        </ng-template>
-      </aside>
-    </header>
-
-    <!-- SUMMARY -->
+@if (direction() === 'default') {
+  @for (item of items(); track item; let i = $index) {
     <section
-      *ngIf="!!item?.summaryContent() && !isItemExpanded(i)"
-      class="pi-accordion-item-content pi-accordion-item-content__summary"
+      [class]="
+        !!item.status() && item.status() === 'disabled'
+          ? 'is-disabled'
+          : '' + setAccordionItemClasses(item, i)
+      "
+      class="pi-accordion-item"
     >
-      <ng-container
-        [ngTemplateOutlet]="item?.summaryContent()?.templateRef"
-        [ngTemplateOutletContext]="{
-          $implicit: item,
-          index: i,
-          isExpanded: isItemExpanded(i),
-        }"
-      ></ng-container>
+      <!-- TOPBAR -->
+      @if (item.isConfidential() === true) {
+        <div
+          class="pi-accordion-item-content pi-accordion-item-content__topbar"
+          pi-dynamic-color
+          [color]="isItemExpanded(i) ? 'highlighted' : 'grey'"
+          mode="light"
+        >
+          <pi-text-viewer
+            [label]="'common.confidentialInfo' | translate"
+            icon="lock"
+            [color]="isItemExpanded(i) ? 'highlighted' : 'grey'"
+            [iconColor]="isItemExpanded(i) ? 'highlighted' : 'grey'"
+            iconSize="x-small"
+            iconAppearance="stroke"
+            iconSize="x-small"
+            fontSize="xxs"
+            fontWeight="400"
+          ></pi-text-viewer>
+        </div>
+      }
+      <!-- HEADER -->
+      <header
+        (click)="toggleState(item, i)"
+        [class]="
+          setAccordionItemClasses(item, i) +
+          ' ' +
+          'pi-accordion-item-content pi-accordion-item-content__header'
+        "
+      >
+        <ng-container
+          [ngTemplateOutlet]="
+            item?.customHeader()?.templateRef || defaultHeader
+          "
+          [ngTemplateOutletContext]="{
+            $implicit: item,
+            index: i,
+            isExpanded: isItemExpanded(i),
+          }"
+        ></ng-container>
+        <aside
+          class="pi-accordion-item-header-content pi-accordion-item-header-content__right"
+        >
+          @if (item.status()) {
+            <pi-chip-status
+              [status]="item.status()"
+              [label]="item.statusLabel()"
+              [icon]="item.statusIcon()"
+            ></pi-chip-status>
+          }
+          @if (item.status()) {
+            <span></span>
+          }
+          @if (hasForm()) {
+            <pi-icon-button
+              (execute)="toggleState(item, i)"
+              appearance="ghost"
+              color="black"
+              icon="chevron-forward"
+              size="x-small"
+              [hasPadding]="false"
+              [text]="'common.edit' | translate"
+              [class]="isItemExpanded(i) ? 'is-expanded' : 'is-collapsed'"
+              [disabled]="!!item.status() && item.status() === 'disabled'"
+            ></pi-icon-button>
+          } @else {
+            <pi-icon
+              icon="chevron-forward"
+              [size]="appearance() === 'outline' ? 'x-small' : 'small'"
+              [color]="color() === 'white' ? 'grey' : color()"
+            ></pi-icon>
+          }
+        </aside>
+      </header>
+      <!-- SUMMARY -->
+      @if (!!item?.summaryContent() && !isItemExpanded(i)) {
+        <section
+          class="pi-accordion-item-content pi-accordion-item-content__summary"
+        >
+          <ng-container
+            [ngTemplateOutlet]="item?.summaryContent()?.templateRef"
+            [ngTemplateOutletContext]="{
+              $implicit: item,
+              index: i,
+              isExpanded: isItemExpanded(i),
+            }"
+          ></ng-container>
+        </section>
+      }
+      <!-- MAIN -->
+      <main
+        class="pi-accordion-item-content pi-accordion-item-content__expandable"
+      >
+        <ng-container
+          *ngTemplateOutlet="item?.content()?.templateRef"
+        ></ng-container>
+      </main>
     </section>
-
-    <!-- MAIN -->
-    <main
-      class="pi-accordion-item-content pi-accordion-item-content__expandable"
-    >
-      <ng-container
-        *ngTemplateOutlet="item?.content()?.templateRef"
-      ></ng-container>
-    </main>
-  </section>
-</ng-container>
-
-<!-- FOOTER OF THE WHOLE ACCORDION -->
-<ng-content select="pi-accordion-footer"></ng-content>
-
-<ng-template #defaultHeader let-item>
-  <pi-text-viewer
-    [label]="item?.title"
-    [value]="item?.subtitle"
-    flexDirection="column"
-    fontWeight="600-300"
-    fontSize="m-xs"
-    [color]="getHeaderTextColor()"
-  ></pi-text-viewer>
-</ng-template>
-
-<ng-template #horizontal>
+  }
+} @else {
   <section class="pi-accordion-item-content pi-accordion-item-content__left">
     <!-- HEADER -->
-    <ng-container *ngFor="let item of items(); index as i">
+    @for (item of items(); track item; let i = $index) {
       <header
         [class]="
           setAccordionItemClasses(item, i) +
@@ -144,35 +132,55 @@
             isExpanded: isItemExpanded(i),
           }"
         ></ng-container>
-        <aside *ngIf="hasChevron()">
-          <pi-chip-status
-            *ngIf="item.status() && !isItemExpanded(i)"
-            [status]="item.status()"
-            icon="exclamation"
-          ></pi-chip-status>
-          <span *ngIf="item.status() && !isItemExpanded(i)"></span>
-          <pi-icon
-            icon="chevron-forward"
-            [size]="appearance() === 'outline' ? 'x-small' : 'small'"
-            [color]="color() === 'white' ? 'grey' : color()"
-          ></pi-icon>
-        </aside>
+        @if (hasChevron()) {
+          <aside>
+            @if (item.status() && !isItemExpanded(i)) {
+              <pi-chip-status
+                [status]="item.status()"
+                icon="exclamation"
+              ></pi-chip-status>
+            }
+            @if (item.status() && !isItemExpanded(i)) {
+              <span></span>
+            }
+            <pi-icon
+              icon="chevron-forward"
+              [size]="appearance() === 'outline' ? 'x-small' : 'small'"
+              [color]="color() === 'white' ? 'grey' : color()"
+            ></pi-icon>
+          </aside>
+        }
       </header>
-    </ng-container>
+    }
   </section>
   <section class="pi-accordion-item-content pi-accordion-item-content__right">
     <!-- MAIN -->
-    <main
-      *ngFor="let item of items(); index as i"
-      [class]="
-        setAccordionItemClasses(item, i) +
-        ' ' +
-        'pi-accordion-item-content pi-accordion-item-content__expandable'
-      "
-    >
-      <ng-container
-        *ngTemplateOutlet="item?.content()?.templateRef"
-      ></ng-container>
-    </main>
+    @for (item of items(); track item; let i = $index) {
+      <main
+        [class]="
+          setAccordionItemClasses(item, i) +
+          ' ' +
+          'pi-accordion-item-content pi-accordion-item-content__expandable'
+        "
+      >
+        <ng-container
+          *ngTemplateOutlet="item?.content()?.templateRef"
+        ></ng-container>
+      </main>
+    }
   </section>
+}
+
+<!-- FOOTER OF THE WHOLE ACCORDION -->
+<ng-content select="pi-accordion-footer"></ng-content>
+
+<ng-template #defaultHeader let-item>
+  <pi-text-viewer
+    [label]="item?.title"
+    [value]="item?.subtitle"
+    flexDirection="column"
+    fontWeight="600-300"
+    fontSize="m-xs"
+    [color]="getHeaderTextColor()"
+  ></pi-text-viewer>
 </ng-template>

libs/ui/src/lib/ui/accordion/accordion/accordion.component.ts

@@ -8,7 +8,7 @@ import {
 } from '@angular/core';
 import { padding, styleType, textColor } from '../../../styles';
 import { PiAccordionItemDirective } from '../directives/accordion-content.directive';
-import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { PiDynamicColorDirective } from '../../../util/color/directives/colors.directive';
 import { PiTextViewerComponent } from '../../text/text-viewer/text-viewer.component';
 import { PiChipStatusComponent } from '../../chip/chip-status/chip-status.component';
@@ -22,8 +22,6 @@ import { TranslatePipe } from '@ngx-translate/core';
   styleUrls: ['../styles/accordion.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    NgIf,
-    NgFor,
     PiDynamicColorDirective,
     PiTextViewerComponent,
     NgTemplateOutlet,

libs/ui/src/lib/ui/banner/banner/banner.component.html

@@ -10,18 +10,21 @@
   <section>
     <header>
       <h3 bold>{{ title() }}</h3>
-      <span *ngIf="message()">{{ message() }}</span>
+      @if (message()) {
+        <span>{{ message() }}</span>
+      }
     </header>
     <!-- Action -->
-    <pi-icon-button
-      *ngIf="buttonText()"
-      (execute)="execute.emit($event)"
-      icon="chevron-forward"
-      iconColor="white"
-      iconSize="small"
-      [appearance]="mode() === 'light' ? 'ghost' : 'fill'"
-      [hasPadding]="false"
-      >{{ buttonText() }}</pi-icon-button
-    >
+    @if (buttonText()) {
+      <pi-icon-button
+        (execute)="execute.emit($event)"
+        icon="chevron-forward"
+        iconColor="white"
+        iconSize="small"
+        [appearance]="mode() === 'light' ? 'ghost' : 'fill'"
+        [hasPadding]="false"
+        >{{ buttonText() }}</pi-icon-button
+      >
+    }
   </section>
 </main>

libs/ui/src/lib/ui/banner/banner/banner.component.ts

@@ -7,7 +7,7 @@ import {
 } from '@angular/core';
 import { PiBackgroundImageDirective } from '../../image/background-image.directive';
 import { PiTextWeightBoldDirective } from '../../text/directives/text-weights.directive';
-import { NgIf } from '@angular/common';
+
 import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
 
 @Component({
@@ -18,7 +18,6 @@ import { PiIconButtonComponent } from '../../button/icon-button/icon-button.comp
   imports: [
     PiBackgroundImageDirective,
     PiTextWeightBoldDirective,
-    NgIf,
     PiIconButtonComponent,
   ],
 })

libs/ui/src/lib/ui/button/action-button/action-button.component.html

@@ -14,23 +14,22 @@
     appearanceClass,
   ]"
 >
-  <span *ngIf="text()">{{ text() }}</span>
+  @if (text()) {
+    <span>{{ text() }}</span>
+  }
 
-  <svg
-    *ngIf="hasIcon()"
-    viewBox="0 0 6 9"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <g>
-      <path
-        d="M1 1C4.5 4 5 4.38484 5 4.5C5 4.61516 4.5 5 1 8"
-        stroke="currentColor"
-        stroke-width="1"
-      />
-    </g>
-    <g>
-      <path d="M4.5 4.5H0" stroke="currentColor" stroke-width="1" />
-    </g>
-  </svg>
+  @if (hasIcon()) {
+    <svg viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <g>
+        <path
+          d="M1 1C4.5 4 5 4.38484 5 4.5C5 4.61516 4.5 5 1 8"
+          stroke="currentColor"
+          stroke-width="1"
+        />
+      </g>
+      <g>
+        <path d="M4.5 4.5H0" stroke="currentColor" stroke-width="1" />
+      </g>
+    </svg>
+  }
 </button>

libs/ui/src/lib/ui/button/action-button/action-button.component.ts

@@ -6,14 +6,13 @@ import {
 } from '@angular/core';
 import { buttonSize, mode } from '../../../styles';
 import { PiBaseButtonComponent } from '../base-button.component';
-import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'pi-action-button',
   templateUrl: './action-button.component.html',
   styleUrls: ['./action-button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf],
+  imports: [],
 })
 export class PiActionButtonComponent extends PiBaseButtonComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/button/icon-button/icon-button.component.html

@@ -1,5 +1,5 @@
-<ng-container *ngIf="iconType() === 'custom'; else defaultIcon"
-  ><button
+@if (iconType() === 'custom') {
+  <button
     #content
     (click)="onClickHandler($event)"
     previous="previous"
@@ -20,13 +20,14 @@
       modeClass,
     ]"
   >
-    <span *ngIf="text()">{{ text() }}</span>
+    @if (text()) {
+      <span>{{ text() }}</span>
+    }
     <ng-content></ng-content>
-    <img src="/assets/icons/{{ icon() }}.svg" /></button
-></ng-container>
-
-<ng-template #defaultIcon
-  ><button
+    <img src="/assets/icons/{{ icon() }}.svg" />
+  </button>
+} @else {
+  <button
     #content
     (click)="onClickHandler($event)"
     previous="previous"
@@ -47,12 +48,15 @@
       modeClass,
     ]"
   >
-    <mat-icon *ngIf="previous()" [svgIcon]="icon()!" alt="icon"></mat-icon>
-    <span *ngIf="text()">{{ text() }}</span>
+    @if (previous()) {
+      <mat-icon [svgIcon]="icon()!" alt="icon"></mat-icon>
+    }
+    @if (text()) {
+      <span>{{ text() }}</span>
+    }
     <ng-content></ng-content>
-    <mat-icon
-      *ngIf="!previous()"
-      [svgIcon]="icon()!"
-      alt="icon"
-    ></mat-icon></button
-></ng-template>
+    @if (!previous()) {
+      <mat-icon [svgIcon]="icon()!" alt="icon"></mat-icon>
+    }
+  </button>
+}

libs/ui/src/lib/ui/button/icon-button/icon-button.component.ts

@@ -8,7 +8,7 @@ import {
 } from '@angular/core';
 import { buttonSize, mode } from '../../../styles';
 import { PiBaseButtonComponent } from '../base-button.component';
-import { NgIf } from '@angular/common';
+
 import { MatIcon } from '@angular/material/icon';
 
 @Component({
@@ -16,7 +16,7 @@ import { MatIcon } from '@angular/material/icon';
   templateUrl: './icon-button.component.html',
   styleUrls: ['./icon-button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, MatIcon],
+  imports: [MatIcon],
 })
 export class PiIconButtonComponent extends PiBaseButtonComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/button/radio-button/radio-button.component.html

@@ -1,13 +1,10 @@
-<span
-  *ngIf="icon() !== 'check'; else checkIconTemplate"
-  (click)="execute.emit($event)"
-></span>
-
-<ng-template #checkIconTemplate
-  ><mat-icon
+@if (icon() !== 'check') {
+  <span (click)="execute.emit($event)"></span>
+} @else {
+  <mat-icon
     size="size"
     svgIcon="check"
     color="color"
     (click)="execute.emit($event)"
-  ></mat-icon
-></ng-template>
+  ></mat-icon>
+}

libs/ui/src/lib/ui/button/radio-button/radio-button.component.ts

@@ -5,7 +5,7 @@ import {
   input,
 } from '@angular/core';
 import { PiBaseButtonComponent } from '../base-button.component';
-import { NgIf } from '@angular/common';
+
 import { MatIcon } from '@angular/material/icon';
 
 @Component({
@@ -13,7 +13,7 @@ import { MatIcon } from '@angular/material/icon';
   templateUrl: './radio-button.component.html',
   styleUrls: ['./radio-button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, MatIcon],
+  imports: [MatIcon],
 })
 export class PiRadioButtonComponent extends PiBaseButtonComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.html

@@ -3,11 +3,15 @@
   [disabled]="isDisabled()"
   class="pi-button__toggle"
 >
-  <mat-icon *ngIf="icon()" [svgIcon]="icon()!" [color]="color()"></mat-icon>
+  @if (icon()) {
+    <mat-icon [svgIcon]="icon()!" [color]="color()"></mat-icon>
+  }
   <span>{{ text() }}</span>
   <ng-content></ng-content>
 </button>
 
-<span *ngIf="amount()"
-  ><small>{{ amount() }}</small></span
->
+@if (amount()) {
+  <span
+    ><small>{{ amount() }}</small></span
+  >
+}

libs/ui/src/lib/ui/button/toggle-button/toggle-button.component.ts

@@ -6,7 +6,7 @@ import {
 } from '@angular/core';
 import { buttonSize } from '../../../styles';
 import { PiBaseButtonComponent } from '../base-button.component';
-import { NgIf } from '@angular/common';
+
 import { MatIcon } from '@angular/material/icon';
 
 @Component({
@@ -14,7 +14,7 @@ import { MatIcon } from '@angular/material/icon';
   templateUrl: './toggle-button.component.html',
   styleUrls: ['./toggle-button.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, MatIcon],
+  imports: [MatIcon],
 })
 export class PiToggleButtonComponent extends PiBaseButtonComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/card/card/card.component.html

@@ -5,9 +5,11 @@
 <ng-content select="pi-card-left-content"> </ng-content>
 <ng-content select="pi-card-right-content"></ng-content>
 
-<span *ngIf="isClickable() && !!linkLabel()" (click)="execute.emit()">
-  <a>
-    {{ linkLabel() }}
-    <pi-icon icon="open-details" color="primary"></pi-icon>
-  </a>
-</span>
+@if (isClickable() && !!linkLabel()) {
+  <span (click)="execute.emit()">
+    <a>
+      {{ linkLabel() }}
+      <pi-icon icon="open-details" color="primary"></pi-icon>
+    </a>
+  </span>
+}

libs/ui/src/lib/ui/card/card/card.component.ts

@@ -3,14 +3,14 @@ import { ChangeDetectionStrategy, Component, HostBinding } from '@angular/core';
 
 // Components
 import { PiBaseCardComponent } from '../base-card.component';
-import { NgIf } from '@angular/common';
+
 import { PiIconComponent } from '../../icon/icon/icon.component';
 
 @Component({
   selector: 'pi-card',
   templateUrl: './card.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, PiIconComponent],
+  imports: [PiIconComponent],
 })
 export class PiCardComponent extends PiBaseCardComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/carousel/carousel/carousel.component.html

@@ -1,33 +1,34 @@
 <main>
-  <pi-icon-button
-    *ngIf="hasOverflow && !hideSwipeButtons()"
-    [icon]="prevIcon"
-    (execute)="prev()"
-    [disabled]="!canSwipePrev"
-    appearance="ghost"
-  ></pi-icon-button>
+  @if (hasOverflow && !hideSwipeButtons()) {
+    <pi-icon-button
+      [icon]="prevIcon"
+      (execute)="prev()"
+      [disabled]="!canSwipePrev"
+      appearance="ghost"
+    ></pi-icon-button>
+  }
   <section [class]="hasOverflow ? 'has-overflow' : ''" #carouselContentWrapper>
-    <ng-container
-      *ngFor="let item of carouselItems(); index as i; trackBy: trackByFn"
-    >
+    @for (item of carouselItems(); track trackByFn(i, item); let i = $index) {
       <section [class]="getItemClass(i)" (click)="selectItem(i)">
         <ng-container *ngTemplateOutlet="item.templateRef"> </ng-container>
       </section>
-    </ng-container>
+    }
   </section>
-  <pi-icon-button
-    *ngIf="hasOverflow && !hideSwipeButtons()"
-    [icon]="nextIcon"
-    (execute)="next()"
-    [disabled]="!canSwipeNext"
-    appearance="ghost"
-  ></pi-icon-button>
+  @if (hasOverflow && !hideSwipeButtons()) {
+    <pi-icon-button
+      [icon]="nextIcon"
+      (execute)="next()"
+      [disabled]="!canSwipeNext"
+      appearance="ghost"
+    ></pi-icon-button>
+  }
 </main>
 
 <!-- Paginator -->
-<footer *ngIf="hasOverflow && !hidePaginator()">
-  <div
-    *ngFor="let i of pages; index as index"
-    [class]="index === currentPageIndex ? 'is-active' : ''"
-  ></div>
-</footer>
+@if (hasOverflow && !hidePaginator()) {
+  <footer>
+    @for (i of pages; track i; let index = $index) {
+      <div [class]="index === currentPageIndex ? 'is-active' : ''"></div>
+    }
+  </footer>
+}

libs/ui/src/lib/ui/carousel/carousel/carousel.component.ts

@@ -23,7 +23,7 @@ import { ComponentFamilyClass, justify, theming } from '../../../styles';
 import { Device, DeviceConfigsFacade } from '../../../util/device-configs';
 import { PiCarouselItemDirective } from '../carousel.directive';
 import { Subject, combineLatest, skip, takeUntil } from 'rxjs';
-import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
 
 @Component({
@@ -31,7 +31,7 @@ import { PiIconButtonComponent } from '../../button/icon-button/icon-button.comp
   templateUrl: './carousel.component.html',
   styleUrls: ['./carousel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, PiIconButtonComponent, NgFor, NgTemplateOutlet],
+  imports: [PiIconButtonComponent, NgTemplateOutlet],
 })
 export class PiCarouselComponent
   implements OnInit, OnChanges, AfterViewInit, AfterViewChecked, OnDestroy

libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.html

@@ -1,4 +1,4 @@
-<ng-container *ngFor="let dataset of datasets(); let index = index">
+@for (dataset of datasets(); track dataset; let index = $index) {
   <section
     [class]="hoveredDatasetIndex() === index ? 'is-hovered' : ''"
     (mouseenter)="triggerDatasetHover.emit(index)"
@@ -14,6 +14,6 @@
       {{ dataset.label | translate }}
     </label>
   </section>
-</ng-container>
+}
 
 <span>{{ 'common.legend' | translate }}</span>

libs/ui/src/lib/ui/chart/chart-legend/chart-legend.component.ts

@@ -6,7 +6,7 @@ import {
   output,
 } from '@angular/core';
 import { Dataset } from '../../../util/models';
-import { NgFor } from '@angular/common';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
@@ -14,7 +14,7 @@ import { TranslatePipe } from '@ngx-translate/core';
   templateUrl: './chart-legend.component.html',
   styleUrls: ['./chart-legend.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgFor, TranslatePipe],
+  imports: [TranslatePipe],
 })
 export class PiChartLegendComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/chip/chip-action/chip-action.component.html

@@ -1,21 +1,27 @@
 <span (click)="execute.emit()">
   <div>
     <span class="pi-chip-label"> {{ label() }}</span>
-    <span class="pi-chip-affix" *ngIf="value() || icon()">
-      <mat-icon
-        *ngIf="icon()"
-        class="pi-chip-affix__icon"
-        [svgIcon]="icon()!"
-        [color]="color()"
-      ></mat-icon>
-      <span *ngIf="value()" class="pi-chip-affix__value">{{ value() }}</span>
-    </span>
+    @if (value() || icon()) {
+      <span class="pi-chip-affix">
+        @if (icon()) {
+          <mat-icon
+            class="pi-chip-affix__icon"
+            [svgIcon]="icon()!"
+            [color]="color()"
+          ></mat-icon>
+        }
+        @if (value()) {
+          <span class="pi-chip-affix__value">{{ value() }}</span>
+        }
+      </span>
+    }
   </div>
 
-  <mat-icon
-    *ngIf="isClosable()"
-    svgIcon="close"
-    [color]="color()"
-    class="pi-chip-close-icon"
-  ></mat-icon>
+  @if (isClosable()) {
+    <mat-icon
+      svgIcon="close"
+      [color]="color()"
+      class="pi-chip-close-icon"
+    ></mat-icon>
+  }
 </span>

libs/ui/src/lib/ui/chip/chip-action/chip-action.component.ts

@@ -8,7 +8,7 @@ import {
 import { ComponentFamilyClass, mode, styleType } from '../../../styles';
 import { PiBaseChipComponent } from '../base-chip.component';
 import { chipColor } from '../entities/chip.model';
-import { NgIf } from '@angular/common';
+
 import { MatIcon } from '@angular/material/icon';
 
 @Component({
@@ -19,7 +19,7 @@ import { MatIcon } from '@angular/material/icon';
     '../styles/base-chip.component.scss',
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, MatIcon],
+  imports: [MatIcon],
 })
 export class PiChipActionComponent extends PiBaseChipComponent {
   @HostBinding('class') get actionClasses(): string {

libs/ui/src/lib/ui/chip/chip-date/chip-date.component.html

@@ -1,7 +1,7 @@
 <span (click)="isClickable() ? click.emit() : null">
-  <span class="pi-chip-date__weekday" *ngIf="size() === 'large'">{{
-    dateValue?.weekDay
-  }}</span>
+  @if (size() === 'large') {
+    <span class="pi-chip-date__weekday">{{ dateValue?.weekDay }}</span>
+  }
   <span class="pi-chip-date__day">{{ dateValue?.day }}</span>
   <span class="pi-chip-date__month">{{ dateValue?.month.toUpperCase() }}</span>
 </span>

libs/ui/src/lib/ui/chip/chip-date/chip-date.component.ts

@@ -11,7 +11,6 @@ import { Date } from '../../../util/models';
 import { PiBaseChipComponent } from '../base-chip.component';
 import { DateTime } from 'luxon';
 import _ from 'lodash';
-import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'pi-chip-date',
@@ -21,7 +20,7 @@ import { NgIf } from '@angular/common';
     '../styles/base-chip.component.scss',
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf],
+  imports: [],
 })
 export class PiChipDateComponent extends PiBaseChipComponent {
   @HostBinding('class') get dateClasses(): string {

libs/ui/src/lib/ui/chip/chip-status/chip-status.component.html

@@ -1,11 +1,14 @@
 <span>
-  <span class="pi-chip-label" *ngIf="label()">{{ label() }}</span>
+  @if (label()) {
+    <span class="pi-chip-label">{{ label() }}</span>
+  }
   <span class="pi-chip-affix">
-    <mat-icon
-      *ngIf="icon()"
-      [svgIcon]="icon()!"
-      [color]="color()"
-      class="pi-chip-affix__icon"
-    ></mat-icon>
+    @if (icon()) {
+      <mat-icon
+        [svgIcon]="icon()!"
+        [color]="color()"
+        class="pi-chip-affix__icon"
+      ></mat-icon>
+    }
   </span>
 </span>

libs/ui/src/lib/ui/chip/chip-status/chip-status.component.ts

@@ -8,7 +8,7 @@ import {
 // Shared
 import { status } from '../../../util/status';
 import { PiBaseChipComponent } from '../base-chip.component';
-import { NgIf } from '@angular/common';
+
 import { MatIcon } from '@angular/material/icon';
 
 @Component({
@@ -19,7 +19,7 @@ import { MatIcon } from '@angular/material/icon';
     '../styles/base-chip.component.scss',
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, MatIcon],
+  imports: [MatIcon],
 })
 export class PiChipStatusComponent extends PiBaseChipComponent {
   @HostBinding('class') get statusClasses(): string {

libs/ui/src/lib/ui/chip/chip-time/chip-time.component.html

@@ -1,33 +1,29 @@
-<span
-  (click)="isClosable() ? execute.emit() : null"
-  *ngIf="time() && date(); else singleContentTemplate"
->
-  <div>
-    <span class="pi-chip-affix">
-      <span class="pi-chip-affix__time"> {{ timeValue }}h </span>
-    </span>
-    <span>{{ dateValue }}</span>
-  </div>
-
-  <mat-icon
-    *ngIf="isClosable()"
-    svgIcon="close"
-    [color]="color()"
-    class="pi-chip-close-icon"
-  ></mat-icon>
-</span>
-
-<ng-template #singleContentTemplate>
+@if (time() && date()) {
   <span (click)="isClosable() ? execute.emit() : null">
     <div>
       <span class="pi-chip-affix">
-        <span *ngIf="time(); else dateTemplate" class="pi-chip-affix__time">
-          {{ timeValue }}h
-        </span>
-        <ng-template #dateTemplate>
+        <span class="pi-chip-affix__time"> {{ timeValue }}h </span>
+      </span>
+      <span>{{ dateValue }}</span>
+    </div>
+    @if (isClosable()) {
+      <mat-icon
+        svgIcon="close"
+        [color]="color()"
+        class="pi-chip-close-icon"
+      ></mat-icon>
+    }
+  </span>
+} @else {
+  <span (click)="isClosable() ? execute.emit() : null">
+    <div>
+      <span class="pi-chip-affix">
+        @if (time()) {
+          <span class="pi-chip-affix__time"> {{ timeValue }}h </span>
+        } @else {
           <span class="pi-chip-affix__date"> {{ dateValue }} </span>
-        </ng-template>
+        }
       </span>
     </div>
   </span>
-</ng-template>
+}

libs/ui/src/lib/ui/chip/chip-time/chip-time.component.ts

@@ -10,7 +10,7 @@ import { ComponentFamilyClass } from '../../../styles';
 import { DateTime } from 'luxon';
 import { PiBaseChipComponent } from '../base-chip.component';
 import { chipThemingColor } from '../entities/chip.model';
-import { NgIf } from '@angular/common';
+
 import { MatIcon } from '@angular/material/icon';
 
 @Component({
@@ -21,7 +21,7 @@ import { MatIcon } from '@angular/material/icon';
     '../styles/base-chip.component.scss',
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, MatIcon],
+  imports: [MatIcon],
 })
 export class PiChipTimeComponent extends PiBaseChipComponent {
   @HostBinding('class') get dateClasses(): string {

libs/ui/src/lib/ui/chip/chip-value/chip-value.component.html

@@ -1,11 +1,15 @@
 <span>
   <!--left -->
-  <label class="pi-chip-label" *ngIf="label()">{{ label() }}</label>
+  @if (label()) {
+    <label class="pi-chip-label">{{ label() }}</label>
+  }
   <!--right -->
   <aside>
     <div class="pi-chip-affix">
       <span class="pi-chip-affix__value">{{ value() ? value() : 'N/A' }}</span>
-      <span *ngIf="!!value()" class="pi-chip-affix__unit">{{ unit() }}</span>
+      @if (!!value()) {
+        <span class="pi-chip-affix__unit">{{ unit() }}</span>
+      }
     </div>
   </aside>
 </span>

libs/ui/src/lib/ui/chip/chip-value/chip-value.component.ts

@@ -6,7 +6,6 @@ import {
 } from '@angular/core';
 import { PiBaseChipComponent } from '../base-chip.component';
 import { unit } from '../../../util/models';
-import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'pi-chip-value',
@@ -16,7 +15,7 @@ import { NgIf } from '@angular/common';
     '../styles/base-chip.component.scss',
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf],
+  imports: [],
 })
 export class PiChipValueComponent extends PiBaseChipComponent {
   @HostBinding('class') get valueClasses(): string {

libs/ui/src/lib/ui/chip/chip/chip.component.html

@@ -1,23 +1,27 @@
 <span>
-  <span class="pi-chip-label" *ngIf="label()">{{ label() }}</span>
+  @if (label()) {
+    <span class="pi-chip-label">{{ label() }}</span>
+  }
 
-  <span class="pi-chip-affix" *ngIf="icon() || value()">
-    <ng-container *ngIf="icon()">
-      <img
-        *ngIf="iconType() === 'custom'; else defaultIcon"
-        src="/assets/icons/{{ icon() }}.svg"
-        class="pi-chip-affix__icon"
-      />
-
-      <ng-template #defaultIcon
-        ><mat-icon
-          [svgIcon]="icon()!"
-          [color]="appearance() !== 'fill' ? color() : ''"
-          class="pi-chip-affix__icon"
-        ></mat-icon
-      ></ng-template>
-    </ng-container>
-
-    <span *ngIf="value()" class="pi-chip-affix__value">{{ value() }}</span>
-  </span>
+  @if (icon() || value()) {
+    <span class="pi-chip-affix">
+      @if (icon()) {
+        @if (iconType() === 'custom') {
+          <img
+            src="/assets/icons/{{ icon() }}.svg"
+            class="pi-chip-affix__icon"
+          />
+        } @else {
+          <mat-icon
+            [svgIcon]="icon()!"
+            [color]="appearance() !== 'fill' ? color() : ''"
+            class="pi-chip-affix__icon"
+          ></mat-icon>
+        }
+      }
+      @if (value()) {
+        <span class="pi-chip-affix__value">{{ value() }}</span>
+      }
+    </span>
+  }
 </span>

libs/ui/src/lib/ui/chip/chip/chip.component.ts

@@ -7,7 +7,7 @@ import {
 import { theming } from '../../../styles';
 import { chipColor } from '../entities/chip.model';
 import { PiBaseChipComponent } from '../base-chip.component';
-import { NgIf } from '@angular/common';
+
 import { MatIcon } from '@angular/material/icon';
 
 @Component({
@@ -15,7 +15,7 @@ import { MatIcon } from '@angular/material/icon';
   templateUrl: './chip.component.html',
   styleUrls: ['./chip.component.scss', '../styles/base-chip.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, MatIcon],
+  imports: [MatIcon],
 })
 export class PiChipComponent extends PiBaseChipComponent {
   @HostBinding('class') get chipClasses(): string {

libs/ui/src/lib/ui/chip/tile/tile.component.html

@@ -1,15 +1,14 @@
 <header>
   <div>
-    <mat-icon
-      *ngIf="icon(); else valueTemplate"
-      [svgIcon]="icon()!"
-      [color]="color()"
-    ></mat-icon>
-    <ng-template #valueTemplate>
+    @if (icon()) {
+      <mat-icon [svgIcon]="icon()!" [color]="color()"></mat-icon>
+    } @else {
       <span>{{ value() }}</span>
-    </ng-template>
+    }
   </div>
-  <span *ngIf="icon() && value()">{{ value() }}</span>
+  @if (icon() && value()) {
+    <span>{{ value() }}</span>
+  }
 </header>
 
 <label>{{ label() }}</label>

libs/ui/src/lib/ui/chip/tile/tile.component.ts

@@ -5,7 +5,7 @@ import {
   input,
 } from '@angular/core';
 import { ComponentFamilyClass, theming } from '../../../styles';
-import { NgIf } from '@angular/common';
+
 import { MatIcon } from '@angular/material/icon';
 
 @Component({
@@ -13,7 +13,7 @@ import { MatIcon } from '@angular/material/icon';
   templateUrl: './tile.component.html',
   styleUrls: ['./tile.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, MatIcon],
+  imports: [MatIcon],
 })
 export class PiTileComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.html

@@ -1,24 +1,20 @@
-<!-- 
-  KEYS:
+<!--
+KEYS:
 -->
-<header
-  *ngIf="keysTemplateRef() && mode() === 'list'"
-  pi-grid-item
-  context="keys"
->
-  <ng-container *ngTemplateOutlet="keysTemplateRef() || defaultErrorTemplate">
-  </ng-container>
-</header>
+@if (keysTemplateRef() && mode() === 'list') {
+  <header pi-grid-item context="keys">
+    <ng-container *ngTemplateOutlet="keysTemplateRef() || defaultErrorTemplate">
+    </ng-container>
+  </header>
+}
 
-<!-- 
-  Data Direction:
-  COLUMN 
+<!--
+Data Direction:
+COLUMN
 -->
-<ng-container
-  *ngIf="dataDirection() === 'column'; else dataDirectionRowTemplate"
->
+@if (dataDirection() === 'column') {
   <!-- DataGrid (each iteration)-->
-  <ng-container *ngFor="let value of data(); index as i; trackBy: trackByFn">
+  @for (value of data(); track trackByFn(i); let i = $index) {
     <div
       pi-grid-item
       #gridItem
@@ -33,7 +29,6 @@
         "
       >
       </ng-container>
-
       <!-- Values -->
       <ng-container
         [ngTemplateOutlet]="valuesTemplateRef() || null"
@@ -41,65 +36,65 @@
       >
       </ng-container>
     </div>
-  </ng-container>
-</ng-container>
-
-<!-- 
-  Data Direction:
-  ROW 
--->
-<ng-template #dataDirectionRowTemplate>
+  }
+} @else {
   <!-- DataGrid (each iteration)-->
   <section class="pi-data-grid__content">
-    <div
-      id="pi-grid-item-{{ i }}"
-      *ngFor="let value of data(); index as i"
-      pi-grid-item
-      #gridItem
-      [class.pi-card]="mode() === 'grid'"
-      (click)="clickItem.emit(value)"
-    >
-      <section class="pi-grid-item__content">
-        <!-- Keys -->
-        <ng-container
-          *ngTemplateOutlet="(mode() === 'grid' && keysTemplateRef()) || null"
-        >
-        </ng-container>
-
-        <!-- Values -->
-        <ng-container
-          [ngTemplateOutlet]="valuesTemplateRef() || null"
-          [ngTemplateOutletContext]="{ $implicit: value, index: i }"
-        >
-        </ng-container>
-      </section>
-      <!-- Expandable Content -->
-      <aside *ngIf="isExpandable()">
-        <!-- Keys -->
-        <header
-          class="pi-grid-item pi-grid-item__expandable-content pi-grid-item__expandable-content--keys-template"
-        >
+    @for (value of data(); track value; let i = $index) {
+      <div
+        id="pi-grid-item-{{ i }}"
+        pi-grid-item
+        #gridItem
+        [class.pi-card]="mode() === 'grid'"
+        (click)="clickItem.emit(value)"
+      >
+        <section class="pi-grid-item__content">
+          <!-- Keys -->
           <ng-container
-            *ngTemplateOutlet="
-              (mode() === 'list' && expandableKeysTemplateRef()) || null
-            "
+            *ngTemplateOutlet="(mode() === 'grid' && keysTemplateRef()) || null"
           >
           </ng-container>
-        </header>
-
-        <div
-          class="pi-grid-item pi-grid-item__expandable-content pi-grid-item__expandable-content--values-template"
-        >
+          <!-- Values -->
           <ng-container
-            [ngTemplateOutlet]="expandableValuesTemplateRef() || null"
+            [ngTemplateOutlet]="valuesTemplateRef() || null"
             [ngTemplateOutletContext]="{ $implicit: value, index: i }"
           >
           </ng-container>
-        </div>
-      </aside>
-    </div>
+        </section>
+        <!-- Expandable Content -->
+        @if (isExpandable()) {
+          <aside>
+            <!-- Keys -->
+            <header
+              class="pi-grid-item pi-grid-item__expandable-content pi-grid-item__expandable-content--keys-template"
+            >
+              <ng-container
+                *ngTemplateOutlet="
+                  (mode() === 'list' && expandableKeysTemplateRef()) || null
+                "
+              >
+              </ng-container>
+            </header>
+            <div
+              class="pi-grid-item pi-grid-item__expandable-content pi-grid-item__expandable-content--values-template"
+            >
+              <ng-container
+                [ngTemplateOutlet]="expandableValuesTemplateRef() || null"
+                [ngTemplateOutletContext]="{ $implicit: value, index: i }"
+              >
+              </ng-container>
+            </div>
+          </aside>
+        }
+      </div>
+    }
   </section>
-</ng-template>
+}
+
+<!--
+Data Direction:
+ROW
+-->
 
 <ng-template #defaultErrorTemplate>
   <!-- Add data grid skeleton template -->

libs/ui/src/lib/ui/data-grid/data-grid/data-grid.component.ts

@@ -17,14 +17,14 @@ import {
   columnsNumber,
   rowsNumber,
 } from '../entities/data-grid.model';
-import { NgIf, NgTemplateOutlet, NgFor } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { PiGridItemDirective } from '../directives/grid-item.directive';
 
 @Component({
   selector: 'pi-data-grid',
   templateUrl: './data-grid.component.html',
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, PiGridItemDirective, NgTemplateOutlet, NgFor],
+  imports: [PiGridItemDirective, NgTemplateOutlet],
 })
 export class PiDataGridComponent<T> {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.html

@@ -1,22 +1,20 @@
-<ng-container [ngSwitch]="type()">
-  <ng-container *ngSwitchCase="'amount'" [ngTemplateOutlet]="amount">
-  </ng-container>
-
-  <ng-container *ngSwitchCase="'text'" [ngTemplateOutlet]="text">
-  </ng-container>
-
-  <ng-container *ngSwitchCase="'date'" [ngTemplateOutlet]="date"></ng-container>
-
-  <ng-container
-    *ngSwitchCase="'input'"
-    [ngTemplateOutlet]="input"
-  ></ng-container>
-
-  <ng-container
-    *ngSwitchCase="'action'"
-    [ngTemplateOutlet]="action"
-  ></ng-container>
-</ng-container>
+@switch (type()) {
+  @case ('amount') {
+    <ng-container [ngTemplateOutlet]="amount"> </ng-container>
+  }
+  @case ('text') {
+    <ng-container [ngTemplateOutlet]="text"> </ng-container>
+  }
+  @case ('date') {
+    <ng-container [ngTemplateOutlet]="date"></ng-container>
+  }
+  @case ('input') {
+    <ng-container [ngTemplateOutlet]="input"></ng-container>
+  }
+  @case ('action') {
+    <ng-container [ngTemplateOutlet]="action"></ng-container>
+  }
+}
 
 <ng-template #amount>
   <span>

libs/ui/src/lib/ui/data-table/cell-type/cell-type.component.ts

@@ -4,8 +4,7 @@ import {
   HostBinding,
   input,
 } from '@angular/core';
-import { NgSwitch, NgSwitchCase, NgTemplateOutlet } from '@angular/common';
-import { PiBaseDataTableComponent } from '../base-data-table/base-data-table.component';
+import { NgTemplateOutlet } from '@angular/common';
 
 export type PiDropdownSelectorTemplateType =
   'text' | 'date' | 'amount' | 'input' | 'action';
@@ -14,7 +13,7 @@ export type PiDropdownSelectorTemplateType =
   templateUrl: './cell-type.component.html',
   styleUrls: ['./cell-type.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgSwitch, NgSwitchCase, NgTemplateOutlet, PiBaseDataTableComponent],
+  imports: [NgTemplateOutlet],
 })
 export class PiCellTypeComponent {
   @HostBinding('class') className = 'pi-cell-type';

libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.html

@@ -1,8 +1,8 @@
 <h4>{{ heading() }}</h4>
 <article #componentItem>
-  <ng-container *ngFor="let value of values(); let i = index">
+  @for (value of values(); track value; let i = $index) {
     <ng-content
       *ngTemplateOutlet="item(); context: { value: value, index: i }"
     ></ng-content>
-  </ng-container>
+  }
 </article>

libs/ui/src/lib/ui/data-table/data-table-item/data-table-item.component.ts

@@ -20,13 +20,13 @@ import {
 
 // RxJS
 import { take } from 'rxjs/operators';
-import { NgFor, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 @Component({
   selector: 'pi-data-table-item',
   templateUrl: './data-table-item.component.html',
   styleUrls: ['./data-table-item.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgFor, NgTemplateOutlet],
+  imports: [NgTemplateOutlet],
 })
 export class PiDataTableItemComponent implements AfterViewInit {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/divider/divider/divider.component.html

@@ -1,15 +1,14 @@
-<ng-container *ngIf="!label(); else labelDividerTemplate">
-  <pi-icon
-    *ngIf="icon()"
-    [icon]="icon()"
-    [appearance]="iconType()"
-    [isStroked]="isStroked()"
-  ></pi-icon>
+@if (!label()) {
+  @if (icon()) {
+    <pi-icon
+      [icon]="icon()"
+      [appearance]="iconType()"
+      [isStroked]="isStroked()"
+    ></pi-icon>
+  }
+  <hr align="center" />
+} @else {
   <hr align="center" />
-</ng-container>
-
-<ng-template #labelDividerTemplate
-  ><hr align="center" />
   <span>{{ label() }}</span>
   <hr align="center" />
-</ng-template>
+}

libs/ui/src/lib/ui/divider/divider/divider.component.ts

@@ -7,7 +7,7 @@ import {
 
 // Shared
 import { alignment, gap, iconSize, textColor } from '../../../styles';
-import { NgIf } from '@angular/common';
+
 import { PiIconComponent } from '../../icon/icon/icon.component';
 
 @Component({
@@ -15,7 +15,7 @@ import { PiIconComponent } from '../../icon/icon/icon.component';
   templateUrl: './divider.component.html',
   styleUrls: ['./divider.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, PiIconComponent],
+  imports: [PiIconComponent],
 })
 export class PiDividerComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/form-field/currency-field/currency-field.component.html

@@ -9,20 +9,23 @@
     <ng-content select="pi-suffix"></ng-content>
   </ng-container>
 
-  <input
-    *ngIf="control"
-    [formControl]="control"
-    [placeholder]="placeholder()!"
-    matInput
-    pi-autofocus
-    [isAutofocusSelected]="isAutofocus()"
-    currencyMask
-    [options]="customCurrencyMaskConfig"
-  />
+  @if (control) {
+    <input
+      [formControl]="control"
+      [placeholder]="placeholder()!"
+      matInput
+      pi-autofocus
+      [isAutofocusSelected]="isAutofocus()"
+      currencyMask
+      [options]="customCurrencyMaskConfig"
+    />
+  }
 
-  <mat-error *ngIf="enableErrorMessage() && control.errors">
-    <ng-container *ngFor="let text of control.errors['message']">
-      {{ text | translate }}
-    </ng-container>
-  </mat-error>
+  @if (enableErrorMessage() && control.errors) {
+    <mat-error>
+      @for (text of control.errors['message']; track text) {
+        {{ text | translate }}
+      }
+    </mat-error>
+  }
 </mat-form-field>

libs/ui/src/lib/ui/form-field/currency-field/currency-field.component.ts

@@ -15,7 +15,7 @@ import {
   MatSuffix,
   MatError,
 } from '@angular/material/form-field';
-import { NgIf, NgFor } from '@angular/common';
+
 import { MatInput } from '@angular/material/input';
 import { PiAutofocusDirective } from '../directives/autofocus.directive';
 
@@ -36,13 +36,11 @@ import { TranslatePipe } from '@ngx-translate/core';
     MatFormField,
     MatLabel,
     MatSuffix,
-    NgIf,
     MatInput,
     NgxCurrencyDirective,
     ReactiveFormsModule,
     PiAutofocusDirective,
     MatError,
-    NgFor,
     forwardRef(() => PiCurrencyFieldComponent),
     TranslatePipe,
   ],

libs/ui/src/lib/ui/form-field/email-field/email-field.component.html

@@ -15,9 +15,11 @@
     [isAutofocusSelected]="isAutofocus()"
   />
 
-  <mat-error *ngIf="control.errors">
-    <ng-container *ngFor="let text of control.errors['message']">
-      {{ text | translate }}
-    </ng-container>
-  </mat-error>
+  @if (control.errors) {
+    <mat-error>
+      @for (text of control.errors['message']; track text) {
+        {{ text | translate }}
+      }
+    </mat-error>
+  }
 </mat-form-field>

libs/ui/src/lib/ui/form-field/email-field/email-field.component.ts

@@ -10,8 +10,7 @@ import {
 import { PiIconComponent } from '../../icon/icon/icon.component';
 import { MatInput } from '@angular/material/input';
 import { PiAutofocusDirective } from '../directives/autofocus.directive';
-import { NgIf, NgFor } from '@angular/common';
-import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
@@ -33,10 +32,7 @@ import { TranslatePipe } from '@ngx-translate/core';
     MatInput,
     ReactiveFormsModule,
     PiAutofocusDirective,
-    NgIf,
     MatError,
-    NgFor,
-    PiCurrencyFieldComponent,
     TranslatePipe,
   ],
 })

libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.html

@@ -17,8 +17,10 @@
     />
   </mat-form-field>
 </section>
-<mat-error *ngIf="control.errors && enableErrorMessage()">
-  <ng-container *ngFor="let text of control.errors['message']">
-    {{ text | translate }}
-  </ng-container>
-</mat-error>
+@if (control.errors && enableErrorMessage()) {
+  <mat-error>
+    @for (text of control.errors['message']; track text) {
+      {{ text | translate }}
+    }
+  </mat-error>
+}

libs/ui/src/lib/ui/form-field/icon-field/icon-field.component.ts

@@ -11,7 +11,7 @@ import { PiIconComponent } from '../../icon/icon/icon.component';
 import { MatFormField, MatLabel, MatError } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { PiAutofocusDirective } from '../directives/autofocus.directive';
-import { NgIf, NgFor } from '@angular/common';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
@@ -33,9 +33,7 @@ import { TranslatePipe } from '@ngx-translate/core';
     MatInput,
     ReactiveFormsModule,
     PiAutofocusDirective,
-    NgIf,
     MatError,
-    NgFor,
     TranslatePipe,
   ],
 })

libs/ui/src/lib/ui/form-field/incremental-number-field/incremental-number-field.component.html

@@ -2,27 +2,29 @@
   <mat-label><ng-content select="pi-label"></ng-content></mat-label>
 
   <pi-prefix [unit]="this.unit() === '$' ? this.unit() : undefined" matPrefix>
-    <pi-icon
-      *ngIf="showIncrementButtons()"
-      (click)="decrementValue()"
-      [class.is-disabled]="isDecrementButtonDisabled()"
-      icon="substract"
-      animation="clickable"
-      size="small"
-      color="primary"
-    ></pi-icon>
+    @if (showIncrementButtons()) {
+      <pi-icon
+        (click)="decrementValue()"
+        [class.is-disabled]="isDecrementButtonDisabled()"
+        icon="substract"
+        animation="clickable"
+        size="small"
+        color="primary"
+      ></pi-icon>
+    }
   </pi-prefix>
 
   <pi-suffix [unit]="this.unit() !== '$' ? this.unit() : undefined" matSuffix>
-    <pi-icon
-      *ngIf="showIncrementButtons()"
-      (click)="incrementValue()"
-      [class.is-disabled]="isIncrementButtonDisabled()"
-      icon="add"
-      animation="clickable"
-      size="small"
-      color="primary"
-    ></pi-icon>
+    @if (showIncrementButtons()) {
+      <pi-icon
+        (click)="incrementValue()"
+        [class.is-disabled]="isIncrementButtonDisabled()"
+        icon="add"
+        animation="clickable"
+        size="small"
+        color="primary"
+      ></pi-icon>
+    }
   </pi-suffix>
 
   <input
@@ -34,9 +36,11 @@
     [isAutofocusSelected]="isAutofocus()"
   />
 
-  <mat-error *ngIf="control.errors">
-    <ng-container *ngFor="let text of control.errors['message']">
-      {{ text | translate }}
-    </ng-container>
-  </mat-error>
+  @if (control.errors) {
+    <mat-error>
+      @for (text of control.errors['message']; track text) {
+        {{ text | translate }}
+      }
+    </mat-error>
+  }
 </mat-form-field>

libs/ui/src/lib/ui/form-field/incremental-number-field/incremental-number-field.component.ts

@@ -19,11 +19,11 @@ import {
   PiPrefixDirective,
   PiSuffixDirective,
 } from '../../../util/affix/affix.directive';
-import { NgIf, NgFor } from '@angular/common';
+
 import { PiIconComponent } from '../../icon/icon/icon.component';
 import { MatInput } from '@angular/material/input';
 import { PiAutofocusDirective } from '../directives/autofocus.directive';
-import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
@@ -42,7 +42,6 @@ import { TranslatePipe } from '@ngx-translate/core';
     MatLabel,
     PiPrefixDirective,
     MatPrefix,
-    NgIf,
     PiIconComponent,
     PiSuffixDirective,
     MatSuffix,
@@ -50,8 +49,6 @@ import { TranslatePipe } from '@ngx-translate/core';
     ReactiveFormsModule,
     PiAutofocusDirective,
     MatError,
-    NgFor,
-    PiCurrencyFieldComponent,
     TranslatePipe,
   ],
 })

libs/ui/src/lib/ui/form-field/incremental-range-field/incremental-range-field.component.html

@@ -30,9 +30,11 @@
     >
     </pi-incremental-number-field>
   </div>
-  <mat-error *ngIf="form.errors && showError()">
-    <ng-container *ngFor="let text of form.errors['message']">
-      {{ text | translate }}
-    </ng-container>
-  </mat-error>
+  @if (form.errors && showError()) {
+    <mat-error>
+      @for (text of form.errors['message']; track text) {
+        {{ text | translate }}
+      }
+    </mat-error>
+  }
 </form>

libs/ui/src/lib/ui/form-field/incremental-range-field/incremental-range-field.component.ts

@@ -13,9 +13,9 @@ import { unit } from '../../../util/models';
 import { PiLabelDirective } from '../directives/label.directive';
 import { PiIncrementalNumberFieldComponent } from '../incremental-number-field/incremental-number-field.component';
 import { PiDividerComponent } from '../../divider/divider/divider.component';
-import { NgIf, NgFor } from '@angular/common';
+
 import { MatError } from '@angular/material/form-field';
-import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
@@ -27,10 +27,7 @@ import { TranslatePipe } from '@ngx-translate/core';
     PiLabelDirective,
     PiIncrementalNumberFieldComponent,
     PiDividerComponent,
-    NgIf,
     MatError,
-    NgFor,
-    PiCurrencyFieldComponent,
     TranslatePipe,
   ],
 })

libs/ui/src/lib/ui/form-field/number-field/number-field.component.html

@@ -18,9 +18,11 @@
     [isAutofocusSelected]="isAutofocus()"
   />
 
-  <mat-error *ngIf="control.errors">
-    <ng-container *ngFor="let text of control.errors['message']">
-      {{ text | translate }}
-    </ng-container>
-  </mat-error>
+  @if (control.errors) {
+    <mat-error>
+      @for (text of control.errors['message']; track text) {
+        {{ text | translate }}
+      }
+    </mat-error>
+  }
 </mat-form-field>

libs/ui/src/lib/ui/form-field/number-field/number-field.component.ts

@@ -15,8 +15,7 @@ import {
 } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { PiAutofocusDirective } from '../directives/autofocus.directive';
-import { NgIf, NgFor } from '@angular/common';
-import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
@@ -38,10 +37,7 @@ import { TranslatePipe } from '@ngx-translate/core';
     MatInput,
     ReactiveFormsModule,
     PiAutofocusDirective,
-    NgIf,
     MatError,
-    NgFor,
-    PiCurrencyFieldComponent,
     TranslatePipe,
   ],
 })

libs/ui/src/lib/ui/form-field/password-field/password-field.component.html

@@ -22,9 +22,11 @@
     [isAutofocusSelected]="isAutofocus()"
   />
 
-  <mat-error *ngIf="control.errors">
-    <ng-container *ngFor="let text of control.errors['message']">
-      {{ text | translate }}
-    </ng-container>
-  </mat-error>
+  @if (control.errors) {
+    <mat-error>
+      @for (text of control.errors['message']; track text) {
+        {{ text | translate }}
+      }
+    </mat-error>
+  }
 </mat-form-field>

libs/ui/src/lib/ui/form-field/password-field/password-field.component.ts

@@ -11,8 +11,7 @@ import { PiSuffixDirective } from '../../../util/affix/affix.directive';
 import { PiIconComponent } from '../../icon/icon/icon.component';
 import { MatInput } from '@angular/material/input';
 import { PiAutofocusDirective } from '../directives/autofocus.directive';
-import { NgIf, NgFor } from '@angular/common';
-import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
@@ -35,10 +34,7 @@ import { TranslatePipe } from '@ngx-translate/core';
     MatInput,
     ReactiveFormsModule,
     PiAutofocusDirective,
-    NgIf,
     MatError,
-    NgFor,
-    PiCurrencyFieldComponent,
     TranslatePipe,
   ],
 })

libs/ui/src/lib/ui/form-field/phone-field/phone-field.component.html

@@ -14,9 +14,11 @@
     [isAutofocusSelected]="isAutofocus()"
   />
 
-  <mat-error *ngIf="control.errors">
-    <ng-container *ngFor="let text of control.errors['message']">
-      {{ text | translate }}
-    </ng-container>
-  </mat-error>
+  @if (control.errors) {
+    <mat-error>
+      @for (text of control.errors['message']; track text) {
+        {{ text | translate }}
+      }
+    </mat-error>
+  }
 </mat-form-field>

libs/ui/src/lib/ui/form-field/phone-field/phone-field.component.ts

@@ -10,8 +10,7 @@ import {
 import { PiIconComponent } from '../../icon/icon/icon.component';
 import { MatInput } from '@angular/material/input';
 import { PiAutofocusDirective } from '../directives/autofocus.directive';
-import { NgIf, NgFor } from '@angular/common';
-import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
@@ -33,10 +32,7 @@ import { TranslatePipe } from '@ngx-translate/core';
     MatInput,
     ReactiveFormsModule,
     PiAutofocusDirective,
-    NgIf,
     MatError,
-    NgFor,
-    PiCurrencyFieldComponent,
     TranslatePipe,
   ],
 })

libs/ui/src/lib/ui/form-field/search-field/search-field.component.html

@@ -14,11 +14,12 @@
     type="search"
   />
 </fieldset>
-<pi-icon
-  *ngIf="isClosable()"
-  (click)="closeField()"
-  icon="close"
-  size="small"
-  color="primary"
-  animation="clickable"
-></pi-icon>
+@if (isClosable()) {
+  <pi-icon
+    (click)="closeField()"
+    icon="close"
+    size="small"
+    color="primary"
+    animation="clickable"
+  ></pi-icon>
+}

libs/ui/src/lib/ui/form-field/search-field/search-field.component.ts

@@ -14,7 +14,6 @@ import { NG_VALUE_ACCESSOR, ReactiveFormsModule } from '@angular/forms';
 import { OnInit } from '@angular/core';
 import { PiBaseFormFieldComponent } from '../base-form-field.component';
 import { PiIconComponent } from '../../icon/icon/icon.component';
-import { NgIf } from '@angular/common';
 
 @Component({
   selector: 'pi-search-field',
@@ -28,7 +27,7 @@ import { NgIf } from '@angular/common';
       multi: true,
     },
   ],
-  imports: [PiIconComponent, ReactiveFormsModule, NgIf],
+  imports: [PiIconComponent, ReactiveFormsModule],
 })
 export class PiSearchFieldComponent
   extends PiBaseFormFieldComponent

libs/ui/src/lib/ui/form-field/text-field/text-field.component.html

@@ -13,9 +13,11 @@
     [isAutofocusSelected]="isAutofocus()"
   />
 
-  <mat-error *ngIf="control.errors">
-    <ng-container *ngFor="let text of control.errors['message']">
-      {{ text | translate }}
-    </ng-container>
-  </mat-error>
+  @if (control.errors) {
+    <mat-error>
+      @for (text of control.errors['message']; track text) {
+        {{ text | translate }}
+      }
+    </mat-error>
+  }
 </mat-form-field>

libs/ui/src/lib/ui/form-field/text-field/text-field.component.ts

@@ -9,8 +9,7 @@ import {
 } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { PiAutofocusDirective } from '../directives/autofocus.directive';
-import { NgIf, NgFor } from '@angular/common';
-import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
@@ -31,10 +30,7 @@ import { TranslatePipe } from '@ngx-translate/core';
     MatInput,
     ReactiveFormsModule,
     PiAutofocusDirective,
-    NgIf,
     MatError,
-    NgFor,
-    PiCurrencyFieldComponent,
     TranslatePipe,
   ],
 })

libs/ui/src/lib/ui/form-field/textarea/textarea.component.html

@@ -15,11 +15,13 @@
     [isAutofocusSelected]="isAutofocus()"
   ></textarea>
 </mat-form-field>
-<mat-error *ngIf="control.errors && enableErrorMessage()">
-  <ng-container *ngFor="let text of control.errors['message']">
-    {{ text | translate }}
-  </ng-container>
-</mat-error>
-<span *ngIf="maxLength() !== 1e6"
-  >{{ control.value?.length || 0 }} / {{ maxLength() }}</span
->
+@if (control.errors && enableErrorMessage()) {
+  <mat-error>
+    @for (text of control.errors['message']; track text) {
+      {{ text | translate }}
+    }
+  </mat-error>
+}
+@if (maxLength() !== 1e6) {
+  <span>{{ control.value?.length || 0 }} / {{ maxLength() }}</span>
+}

libs/ui/src/lib/ui/form-field/textarea/textarea.component.ts

@@ -10,8 +10,7 @@ import { MatFormField, MatLabel, MatError } from '@angular/material/form-field';
 import { MatInput } from '@angular/material/input';
 import { CdkTextareaAutosize } from '@angular/cdk/text-field';
 import { PiAutofocusDirective } from '../directives/autofocus.directive';
-import { NgIf, NgFor } from '@angular/common';
-import { PiCurrencyFieldComponent } from '../currency-field/currency-field.component';
+
 import { TranslatePipe } from '@ngx-translate/core';
 
 @Component({
@@ -32,10 +31,7 @@ import { TranslatePipe } from '@ngx-translate/core';
     CdkTextareaAutosize,
     ReactiveFormsModule,
     PiAutofocusDirective,
-    NgIf,
     MatError,
-    NgFor,
-    PiCurrencyFieldComponent,
     TranslatePipe,
   ],
 })

libs/ui/src/lib/ui/icon/icon/icon.component.html

@@ -1,8 +1,5 @@
-<img
-  *ngIf="type() === 'custom'; else defaultIcon"
-  src="/assets/icons/{{ icon() }}.svg"
-/>
-
-<ng-template #defaultIcon
-  ><mat-icon size="size" [svgIcon]="icon()!" color="color"></mat-icon
-></ng-template>
+@if (type() === 'custom') {
+  <img src="/assets/icons/{{ icon() }}.svg" />
+} @else {
+  <mat-icon size="size" [svgIcon]="icon()!" color="color"></mat-icon>
+}

libs/ui/src/lib/ui/icon/icon/icon.component.ts

@@ -13,7 +13,7 @@ import {
   iconSize,
   styleType,
 } from '../../../styles';
-import { NgIf } from '@angular/common';
+
 import { MatIcon } from '@angular/material/icon';
 
 @Component({
@@ -21,7 +21,7 @@ import { MatIcon } from '@angular/material/icon';
   templateUrl: './icon.component.html',
   styleUrls: ['./icon.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, MatIcon],
+  imports: [MatIcon],
 })
 export class PiIconComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/image/headline/headline.component.html

@@ -1,21 +1,26 @@
 <figure>
-  <a *ngIf="link(); else image" [href]="link()" target="_blank"
-    ><img
-      src="https://d2m4265u67f2xu.cloudfront.net/assets/images/{{ pathImg() }}"
-      [alt]="pathImg()! | sanitizerAltImage"
-      width="100%"
-      height="auto"
-  /></a>
-  <ng-template #image>
+  @if (link()) {
+    <a [href]="link()" target="_blank"
+      ><img
+        src="https://d2m4265u67f2xu.cloudfront.net/assets/images/{{
+          pathImg()
+        }}"
+        [alt]="pathImg()! | sanitizerAltImage"
+        width="100%"
+        height="auto"
+    /></a>
+  } @else {
     <img
       src="https://d2m4265u67f2xu.cloudfront.net/assets/images/{{ pathImg() }}"
       [alt]="pathImg()! | sanitizerAltImage"
       width="100%"
       height="auto"
     />
-  </ng-template>
+  }
 </figure>
-<aside *ngIf="hasContent()">
-  <ng-content select="pi-headline-label-content"></ng-content>
-  <ng-content select="pi-headline-description-content"></ng-content>
-</aside>
+@if (hasContent()) {
+  <aside>
+    <ng-content select="pi-headline-label-content"></ng-content>
+    <ng-content select="pi-headline-description-content"></ng-content>
+  </aside>
+}

libs/ui/src/lib/ui/image/headline/headline.component.ts

@@ -14,7 +14,7 @@ import {
   flexDirection,
   gap,
 } from '../../../styles';
-import { NgIf } from '@angular/common';
+
 import { SanitizerAltImagePipe } from '../../../util/pipes/pipes';
 
 @Directive({
@@ -34,7 +34,7 @@ export class PiHeadlineDescriptionContentDirective {}
   templateUrl: './headline.component.html',
   styleUrls: ['./headline.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [NgIf, SanitizerAltImagePipe],
+  imports: [SanitizerAltImagePipe],
 })
 export class PiHeadlineComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/modal/modal/modal.component.html

@@ -1,17 +1,22 @@
 <header>
   <span>
-    <h3 bold l *ngIf="title">
-      {{ title }}
-      <span pi-primary *ngIf="subtitle">{{ subtitle }}</span>
-    </h3>
+    @if (title) {
+      <h3 bold l>
+        {{ title }}
+        @if (subtitle) {
+          <span pi-primary>{{ subtitle }}</span>
+        }
+      </h3>
+    }
   </span>
 
-  <pi-close-button
-    size="small"
-    [hasLabel]="false"
-    *ngIf="!dialogRef.disableClose"
-    (click)="closeModal()"
-  ></pi-close-button>
+  @if (!dialogRef.disableClose) {
+    <pi-close-button
+      size="small"
+      [hasLabel]="false"
+      (click)="closeModal()"
+    ></pi-close-button>
+  }
 </header>
 
 <ng-container
@@ -23,40 +28,39 @@
   <main class="pi-modal__main-content pi-modal__main-content--dialog-template">
     <!-- Top -->
     <pi-headline [pathImg]="dialogModalData.pathImg">
-      <pi-headline-label-content *ngIf="dialogModalData.label">
-        <span l bold>{{ dialogModalData.label }}</span>
-      </pi-headline-label-content>
-      <pi-headline-description-content *ngIf="dialogModalData.description">{{
-        dialogModalData.description
-      }}</pi-headline-description-content>
+      @if (dialogModalData.label) {
+        <pi-headline-label-content>
+          <span l bold>{{ dialogModalData.label }}</span>
+        </pi-headline-label-content>
+      }
+      @if (dialogModalData.description) {
+        <pi-headline-description-content>{{
+          dialogModalData.description
+        }}</pi-headline-description-content>
+      }
     </pi-headline>
-    <section *ngIf="dialogModalData.template">
-      <ng-container [ngTemplateOutlet]="dialogModalData.template">
-      </ng-container>
-    </section>
+    @if (dialogModalData.template) {
+      <section>
+        <ng-container [ngTemplateOutlet]="dialogModalData.template">
+        </ng-container>
+      </section>
+    }
   </main>
   <!-- Bottom -->
-  <pi-action-wrapper
-    *ngIf="dialogModalData.buttonText"
-    flexDirection="row"
-    gap="s"
-  >
-    <button
-      *ngIf="dialogModalData.buttonText.secondaryAction"
-      (click)="secondaryAction()"
-      [class]="buttonColorClass"
-      pi-ghost
-    >
-      {{ dialogModalData.buttonText.secondaryAction }}
-    </button>
-    <button
-      *ngIf="dialogModalData.buttonText.primaryAction"
-      (click)="primaryAction()"
-      [class]="buttonColorClass"
-    >
-      {{ dialogModalData.buttonText.primaryAction }}
-    </button>
-  </pi-action-wrapper>
+  @if (dialogModalData.buttonText) {
+    <pi-action-wrapper flexDirection="row" gap="s">
+      @if (dialogModalData.buttonText.secondaryAction) {
+        <button (click)="secondaryAction()" [class]="buttonColorClass" pi-ghost>
+          {{ dialogModalData.buttonText.secondaryAction }}
+        </button>
+      }
+      @if (dialogModalData.buttonText.primaryAction) {
+        <button (click)="primaryAction()" [class]="buttonColorClass">
+          {{ dialogModalData.buttonText.primaryAction }}
+        </button>
+      }
+    </pi-action-wrapper>
+  }
 </ng-template>
 
 <ng-template #customTemplate>

libs/ui/src/lib/ui/modal/modal/modal.component.ts

@@ -11,7 +11,7 @@ import {
   ModalStyleType,
   ModalType,
 } from '../entities/modal.model';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { PiTextWeightBoldDirective } from '../../text/directives/text-weights.directive';
 import { PiTextLargeDirective } from '../../text/directives/text-sizes.directive';
 import { PiColorPrimaryDirective } from '../../../util/color/directives/colors.directive';
@@ -30,7 +30,6 @@ import { PiGhostButtonDirective } from '../../button/button.directive';
   styleUrls: ['./modal.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    NgIf,
     PiTextWeightBoldDirective,
     PiTextLargeDirective,
     PiColorPrimaryDirective,

libs/ui/src/lib/ui/note/note/note.component.html

@@ -1,7 +1,11 @@
 <div>
   <mat-icon [svgIcon]="noteStatus?.icon!"></mat-icon>
-  <h5 s *ngIf="title()">{{ title() }}</h5>
-  <small xs *ngIf="text()">{{ text() }}</small>
+  @if (title()) {
+    <h5 s>{{ title() }}</h5>
+  }
+  @if (text()) {
+    <small xs>{{ text() }}</small>
+  }
   <span><ng-content select="pi-note-label-content"></ng-content></span>
 </div>
 <ng-content select="pi-note-action-content"></ng-content>

libs/ui/src/lib/ui/note/note/note.component.ts

@@ -12,7 +12,7 @@ import { NoteStatus } from '../entities/note.model';
 import { status } from '../../../util/status';
 import { gap, alignment } from '../../../styles';
 import { MatIcon } from '@angular/material/icon';
-import { NgIf } from '@angular/common';
+
 import {
   PiTextSmallDirective,
   PiTextXSmallDirective,
@@ -35,7 +35,7 @@ export class PiNoteActionContentDirective {}
   templateUrl: './note.component.html',
   styleUrls: ['./note.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MatIcon, NgIf, PiTextSmallDirective, PiTextXSmallDirective],
+  imports: [MatIcon, PiTextSmallDirective, PiTextXSmallDirective],
 })
 export class PiNoteComponent implements OnInit {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.html

@@ -1,17 +1,15 @@
 <section>
-  <pi-icon
-    *ngIf="icon(); else button"
-    [icon]="icon()"
-    [color]="iconColor"
-    size="large"
-  ></pi-icon>
+  @if (icon()) {
+    <pi-icon [icon]="icon()" [color]="iconColor" size="large"></pi-icon>
+  } @else {
+    <button (click)="dismiss()" pi-ghost>
+      {{ text() }}
+    </button>
+  }
   <div>
     <h5 medium m>{{ message() }}</h5>
-    <span *ngIf="description()" xs>{{ description() }}</span>
+    @if (description()) {
+      <span xs>{{ description() }}</span>
+    }
   </div>
 </section>
-<ng-template #button>
-  <button (click)="dismiss()" pi-ghost>
-    {{ text() }}
-  </button>
-</ng-template>

libs/ui/src/lib/ui/notification/snack-bar/snack-bar.component.ts

@@ -12,7 +12,7 @@ import {
   MAT_SNACK_BAR_DATA,
 } from '@angular/material/snack-bar';
 import { styleType } from '../../../styles';
-import { NgIf } from '@angular/common';
+
 import { PiIconComponent } from '../../icon/icon/icon.component';
 import {
   PiMediumButtonDirective,
@@ -30,7 +30,6 @@ import {
   styleUrls: ['./snack-bar.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    NgIf,
     PiIconComponent,
     PiMediumButtonDirective,
     PiTextWeightMediumDirective,

libs/ui/src/lib/ui/paginator/paginator/paginator.component.html

@@ -21,9 +21,43 @@
 >
 
 <footer>
-  <ng-container
-    *ngIf="totalPages() < 5; then defaultPaginator; else advancedPaginator"
-  ></ng-container>
+  @if (totalPages() < 5) {
+    @for (page of pages; track page; let i = $index) {
+      <span
+        [class.is-active]="page === currentPage()"
+        (click)="paginateTo(page)"
+      >
+        {{ page }}</span
+      >
+    }
+  } @else {
+    @for (page of firstPages; track page; let i = $index) {
+      <div>
+        <span
+          [class.is-active]="page === currentPage()"
+          (click)="paginateTo(page)"
+        >
+          {{ page }}
+        </span>
+      </div>
+    }
+    <!-- when total pages > 6 || the difference is > 6 -->
+    @if (
+      totalPages() > 6 && totalPages() - firstPages[firstPages.length - 1] > 6
+    ) {
+      <pi-icon (click)="movePages()" icon="more"></pi-icon>
+    }
+    @for (page of lastPages; track page; let i = $index) {
+      <div>
+        <span
+          [class.is-active]="page === currentPage()"
+          (click)="paginateTo(page)"
+        >
+          {{ page }}
+        </span>
+      </div>
+    }
+  }
 </footer>
 
 <pi-icon-button
@@ -37,34 +71,3 @@
 >
   Next
 </pi-icon-button>
-
-<ng-template #defaultPaginator>
-  <span
-    *ngFor="let page of pages; let i = index"
-    [class.is-active]="page === currentPage()"
-    (click)="paginateTo(page)"
-  >
-    {{ page }}</span
-  >
-</ng-template>
-
-<ng-template #advancedPaginator>
-  <div *ngFor="let page of firstPages; let i = index">
-    <span [class.is-active]="page === currentPage()" (click)="paginateTo(page)">
-      {{ page }}
-    </span>
-  </div>
-  <!-- when total pages > 6 || the difference is > 6 -->
-  <pi-icon
-    *ngIf="
-      totalPages() > 6 && totalPages() - firstPages[firstPages.length - 1] > 6
-    "
-    (click)="movePages()"
-    icon="more"
-  ></pi-icon>
-  <div *ngFor="let page of lastPages; let i = index">
-    <span [class.is-active]="page === currentPage()" (click)="paginateTo(page)">
-      {{ page }}
-    </span>
-  </div>
-</ng-template>

libs/ui/src/lib/ui/paginator/paginator/paginator.component.ts

@@ -9,7 +9,7 @@ import {
   output,
 } from '@angular/core';
 import { PiIconButtonComponent } from '../../button/icon-button/icon-button.component';
-import { NgIf, NgFor } from '@angular/common';
+
 import { PiIconComponent } from '../../icon/icon/icon.component';
 
 @Component({
@@ -19,8 +19,6 @@ import { PiIconComponent } from '../../icon/icon/icon.component';
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     PiIconButtonComponent,
-    NgIf,
-    NgFor,
     PiIconComponent,
     forwardRef(() => PiPaginatorComponent),
   ],

libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.html

@@ -1,14 +1,15 @@
-<ng-container *ngIf="type() === 'form'; else customPanelTemplate">
+@if (type() === 'form') {
   <form [formGroup]="formGroup()">
     <!-- Top -->
     <header>
       <div>
         <h2 m medium>{{ title() }}</h2>
-        <h4 pi-grey light xs *ngIf="subtitle()">{{ subtitle() }}</h4>
+        @if (subtitle()) {
+          <h4 pi-grey light xs>{{ subtitle() }}</h4>
+        }
       </div>
       <aside>
         <ng-content select="pi-panel-top-content"></ng-content>
-
         <pi-divider
           direction="vertical"
           color="grey"
@@ -27,19 +28,14 @@
         ></pi-icon-button>
       </aside>
     </header>
-
     <!-- Center | Summary -->
     <ng-content select="pi-panel-center-content"></ng-content>
-
     <!-- Bottom & Expansion -->
     <section [class]="isCollapsed() ? 'is-collapsed' : 'is-expanded'">
       <ng-content select="pi-panel-expandable-content"></ng-content>
     </section>
   </form>
-</ng-container>
-
-<!-- Custom Panel -->
-<ng-template #customPanelTemplate>
+} @else {
   <!-- Top -->
   <header class="pi-panel-content pi-panel-content__top">
     <ng-container *ngTemplateOutlet="topContentRef()"></ng-container>
@@ -57,10 +53,8 @@
       ></pi-icon>
     </aside>
   </header>
-
   <!-- Center -->
   <ng-container *ngTemplateOutlet="centerContentRef()"></ng-container>
-
   <!-- Bottom & Expansion -->
   <section
     [class]="isCollapsed() ? 'is-collapsed' : 'is-expanded'"
@@ -68,4 +62,6 @@
   >
     <ng-container *ngTemplateOutlet="expandableContentRef()"> </ng-container>
   </section>
-</ng-template>
+}
+
+<!-- Custom Panel -->

libs/ui/src/lib/ui/panel/expansion-panel/expansion-panel.component.ts

@@ -14,7 +14,7 @@ import {
 import { FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { ComponentFamilyClass } from '../../../styles';
 import { PiBasePanelComponent } from '../base-panel.component';
-import { NgIf, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import {
   PiTextMediumDirective,
   PiTextXSmallDirective,
@@ -36,7 +36,6 @@ import { TranslatePipe } from '@ngx-translate/core';
   styleUrls: ['./expansion-panel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    NgIf,
     ReactiveFormsModule,
     PiTextMediumDirective,
     PiTextWeightMediumDirective,

libs/ui/src/lib/ui/panel/panel/panel.component.html

@@ -1,12 +1,16 @@
 <section>
   <!-- Top -->
-  <header *ngIf="title()">
-    <div>
-      <h2 m medium>{{ title() }}</h2>
-      <h4 pi-grey light xs *ngIf="subtitle()">{{ subtitle() }}</h4>
-    </div>
-    <ng-content select="pi-panel-top-content"></ng-content>
-  </header>
+  @if (title()) {
+    <header>
+      <div>
+        <h2 m medium>{{ title() }}</h2>
+        @if (subtitle()) {
+          <h4 pi-grey light xs>{{ subtitle() }}</h4>
+        }
+      </div>
+      <ng-content select="pi-panel-top-content"></ng-content>
+    </header>
+  }
   <ng-content></ng-content>
   <ng-content select="pi-panel-top-content"></ng-content>
   <!-- Center -->

libs/ui/src/lib/ui/panel/panel/panel.component.ts

@@ -6,7 +6,7 @@ import {
 } from '@angular/core';
 import { ComponentFamilyClass } from '../../../styles';
 import { PiBasePanelComponent } from '../base-panel.component';
-import { NgIf } from '@angular/common';
+
 import {
   PiTextMediumDirective,
   PiTextXSmallDirective,
@@ -24,7 +24,6 @@ import { PiColorGreyDirective } from '../../../util/color/directives/colors.dire
   styleUrls: ['./panel.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    NgIf,
     PiTextMediumDirective,
     PiTextWeightMediumDirective,
     PiMediumButtonDirective,

libs/ui/src/lib/ui/progress/progress-spinner/progress-spinner.component.html

@@ -8,22 +8,22 @@
 </mat-progress-spinner>
 
 <!-- Value  -->
-<span
-  *ngIf="appearance() === 'compact'; else defaultValue"
-  [style.width]="diameter() + 'px'"
-  [style.height]="diameter() + 'px'"
-  [style.margin-top]="-diameter() + 'px'"
-  [style.line-height]="diameter() + 'px'"
->
-  <span>{{ value() }}</span
-  ><span>%</span>
-</span>
-
-<!-- Value -->
-<ng-template #defaultValue>
+@if (appearance() === 'compact') {
+  <span
+    [style.width]="diameter() + 'px'"
+    [style.height]="diameter() + 'px'"
+    [style.margin-top]="-diameter() + 'px'"
+    [style.line-height]="diameter() + 'px'"
+  >
+    <span>{{ value() }}</span
+    ><span>%</span>
+  </span>
+} @else {
   <span>
     <span>{{ value() }}</span
     ><span>%</span>
   </span>
   <span>{{ label() }}</span>
-</ng-template>
+}
+
+<!-- Value -->

libs/ui/src/lib/ui/progress/progress-spinner/progress-spinner.component.ts

@@ -5,14 +5,13 @@ import {
   input,
 } from '@angular/core';
 import { MatProgressSpinner } from '@angular/material/progress-spinner';
-import { NgIf } from '@angular/common';
-import { PiProgressBarComponent } from '../progress-bar/progress-bar.component';
+
 @Component({
   selector: 'pi-progress-spinner',
   templateUrl: './progress-spinner.component.html',
   styleUrls: ['./progress-spinner.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [MatProgressSpinner, NgIf, PiProgressBarComponent],
+  imports: [MatProgressSpinner],
 })
 export class PiProgressSpinnerComponent {
   @HostBinding('class')

libs/ui/src/lib/ui/select/select-carousel/select-carousel.component.html

@@ -12,30 +12,29 @@
   [justify]="justifyCarousel()"
   (itemChanged)="onItemChanged($event)"
 >
-  <ng-template
-    pi-carousel-item
-    *ngFor="let option of options(); index as i; trackBy: trackByFn"
-  >
-    <span class="pi-select__carousel--option">
-      <!-- Default options template menu for static data -->
-      <ng-template #defaultOption>
-        <pi-select-option
-          [id]="option?.[keyIdProperty()] || option?.id"
-          [label]="option?.name | translate"
-          [initials]="option?.initials"
-          [icon]="option?.icon"
-          [isSelected]="option?.id === selectedOption?.id"
-          [isDisabled]="disabled"
-          flexDirection="column"
-          [size]="selectOptionSize"
-        ></pi-select-option>
-      </ng-template>
-      <!-- Default options template menu for server data -->
-      <ng-container
-        [ngTemplateOutlet]="optionTemplateRef() || defaultOption"
-        [ngTemplateOutletContext]="{ $implicit: option, index: i }"
-      >
-      </ng-container>
-    </span>
-  </ng-template>
+  @for (option of options(); track trackByFn(i); let i = $index) {
+    <ng-template pi-carousel-item>
+      <span class="pi-select__carousel--option">
+        <!-- Default options template menu for static data -->
+        <ng-template #defaultOption>
+          <pi-select-option
+            [id]="option?.[keyIdProperty()] || option?.id"
+            [label]="option?.name | translate"
+            [initials]="option?.initials"
+            [icon]="option?.icon"
+            [isSelected]="option?.id === selectedOption?.id"
+            [isDisabled]="disabled"
+            flexDirection="column"
+            [size]="selectOptionSize"
+          ></pi-select-option>
+        </ng-template>
+        <!-- Default options template menu for server data -->
+        <ng-container
+          [ngTemplateOutlet]="optionTemplateRef() || defaultOption"
+          [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+        >
+        </ng-container>
+      </span>
+    </ng-template>
+  }
 </pi-carousel>

libs/ui/src/lib/ui/select/select-carousel/select-carousel.component.ts

@@ -19,7 +19,7 @@ import { PiSelectOptionComponent } from '../select-option/select-option.componen
 import { Device } from '../../../util/device-configs';
 import { justify } from '../../../styles';
 import { PiCarouselComponent } from '../../carousel/carousel/carousel.component';
-import { NgFor, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { PiCarouselItemDirective } from '../../carousel/carousel.directive';
 
 @Component({
@@ -36,7 +36,6 @@ import { PiCarouselItemDirective } from '../../carousel/carousel.directive';
   ],
   imports: [
     PiCarouselComponent,
-    NgFor,
     PiCarouselItemDirective,
     PiSelectOptionComponent,
     NgTemplateOutlet,

libs/ui/src/lib/ui/select/select-multiple/select-multiple.component.html

@@ -1,21 +1,20 @@
 <input hidden [formControl]="control" />
-<ng-container *ngIf="type() === 'dropdown'">
-  <ng-container
-    *ngIf="pickedOptionType() === 'button'; else pickedOptionInputTemplate"
-  >
+@if (type() === 'dropdown') {
+  @if (pickedOptionType() === 'button') {
     <fieldset (click)="onToggleDropdown()" class="pi-select-picked-option">
       <!-- Button -->
       <div>
-        <pi-icon
-          *ngIf="icon()"
-          [icon]="icon()"
-          class="pi-select-picked-option__custom-icon"
-          color="primary"
-          size="medium"
-          animation="clickable"
-          pi-disabled
-          [isDisabled]="disabled"
-        ></pi-icon>
+        @if (icon()) {
+          <pi-icon
+            [icon]="icon()"
+            class="pi-select-picked-option__custom-icon"
+            color="primary"
+            size="medium"
+            animation="clickable"
+            pi-disabled
+            [isDisabled]="disabled"
+          ></pi-icon>
+        }
         <span class="pi-select-picked-option__label">{{
           (selectedOptionsNames?.join(', ') | truncate: 33) ||
             (label() | translate)
@@ -27,11 +26,10 @@
         size="small"
       ></pi-icon>
     </fieldset>
-  </ng-container>
-  <ng-template #pickedOptionInputTemplate>
-    <ng-container [ngSwitch]="appearance()">
+  } @else {
+    @switch (appearance()) {
       <!-- Input Fill Appearance -->
-      <ng-container *ngSwitchCase="'fill'">
+      @case ('fill') {
         <fieldset (click)="onToggleDropdown()" class="pi-select-picked-option">
           <pi-icon
             [icon]="icon()"
@@ -48,14 +46,16 @@
               <label class="pi-select-picked-option__label">{{
                 label() | translate
               }}</label>
-              <ng-template #defaultSelected>
+              <ng-template #defaultSelectedFill>
                 <span class="pi-select-picked-option__placeholder">{{
                   (selectedOptionsNames?.join(', ') | truncate: 33) ||
                     (placeholder() | translate)
                 }}</span>
               </ng-template>
               <ng-container
-                [ngTemplateOutlet]="selectedTemplateRef() || defaultSelected"
+                [ngTemplateOutlet]="
+                  selectedTemplateRef() || defaultSelectedFill
+                "
                 [ngTemplateOutletContext]="{ $implicit: controlValue }"
               >
               </ng-container>
@@ -68,10 +68,10 @@
             ></pi-icon>
           </div>
         </fieldset>
-      </ng-container>
+      }
 
       <!-- Input Outline Appearance -->
-      <ng-container *ngSwitchCase="'outline'">
+      @case ('outline') {
         <fieldset (click)="onToggleDropdown()" class="pi-select-picked-option">
           <!-- Input field -->
           <label class="pi-select-picked-option__label">{{
@@ -79,14 +79,16 @@
           }}</label>
           <div>
             <span>
-              <ng-template #defaultSelected>
+              <ng-template #defaultSelectedOutline>
                 <span class="pi-select-picked-option__placeholder">{{
                   (selectedOptionsNames?.join(', ') | truncate: 33) ||
                     (placeholder() | translate)
                 }}</span>
               </ng-template>
               <ng-container
-                [ngTemplateOutlet]="selectedTemplateRef() || defaultSelected"
+                [ngTemplateOutlet]="
+                  selectedTemplateRef() || defaultSelectedOutline
+                "
                 [ngTemplateOutletContext]="{ $implicit: controlValue }"
               >
               </ng-container>
@@ -99,92 +101,94 @@
             ></pi-icon>
           </div>
         </fieldset>
-      </ng-container>
-    </ng-container>
-  </ng-template>
-</ng-container>
+      }
+    }
+  }
+}
 
 <!-- Options menu -->
 <nav class="pi-select-options-menu">
   <!-- Select All Options -->
-  <fieldset
-    *ngIf="hasSelectAllOptions()"
-    class="pi-select-options-menu__select-all"
-  >
-    <mat-checkbox
-      pi-dynamic-color
-      [color]="color()"
-      [checked]="areAllEnabledOptionsSelected"
-      (change)="onSelectAllOptions($event)"
-    >
-    </mat-checkbox>
-    <label pi-dynamic-color [color]="color()">
-      {{ selectAllLabel() }}
-    </label>
-  </fieldset>
+  @if (hasSelectAllOptions()) {
+    <fieldset class="pi-select-options-menu__select-all">
+      <mat-checkbox
+        pi-dynamic-color
+        [color]="color()"
+        [checked]="areAllEnabledOptionsSelected"
+        (change)="onSelectAllOptions($event)"
+      >
+      </mat-checkbox>
+      <label pi-dynamic-color [color]="color()">
+        {{ selectAllLabel() }}
+      </label>
+    </fieldset>
+  }
 
-  <header
-    *ngIf="pickedOptionType() === 'button'"
-    class="pi-select-options-menu__picked-option"
-  >
-    <!-- Only visible in a header of  Button -->
+  @if (pickedOptionType() === 'button') {
+    <header class="pi-select-options-menu__picked-option">
+      <!-- Only visible in a header of  Button -->
 
-    <pi-icon
-      *ngIf="icon()"
-      [icon]="icon()"
-      class="pi-select-options-menu-picked-option__custom-icon"
-      [color]="color()"
-      size="medium"
-      pi-disabled
-      [isDisabled]="disabled"
-    ></pi-icon>
+      @if (icon()) {
+        <pi-icon
+          [icon]="icon()"
+          class="pi-select-options-menu-picked-option__custom-icon"
+          [color]="color()"
+          size="medium"
+          pi-disabled
+          [isDisabled]="disabled"
+        ></pi-icon>
+      }
 
-    <span class="pi-select-options-menu-picked-option__placeholder">{{
-      (selectedOptionsNames?.join(', ') | truncate: 33) ||
-        (placeholder() | translate)
-    }}</span>
+      <span class="pi-select-options-menu-picked-option__placeholder">{{
+        (selectedOptionsNames?.join(', ') | truncate: 33) ||
+          (placeholder() | translate)
+      }}</span>
 
-    <pi-icon
-      (click)="onToggleDropdown()"
-      class="pi-select-options-menu-picked-option__action-icon"
-      [icon]="actionIcon()"
-      [class.pi-select-options-menu-picked-option__action-icon--chevron]="
-        actionIcon() === 'chevron-forward'
-      "
-      size="small"
-    ></pi-icon>
-  </header>
+      <pi-icon
+        (click)="onToggleDropdown()"
+        class="pi-select-options-menu-picked-option__action-icon"
+        [icon]="actionIcon()"
+        [class.pi-select-options-menu-picked-option__action-icon--chevron]="
+          actionIcon() === 'chevron-forward'
+        "
+        size="small"
+      ></pi-icon>
+    </header>
+  }
   <!-- List of options -->
   <div class="pi-select-options-menu__options">
-    <span
-      *ngFor="let option of options(); index as i"
-      (click)="onSelectOption(option)"
-    >
-      <!-- Default options template menu for static data -->
-      <ng-template #defaultOption>
-        <pi-select-option
-          type="multiple"
-          [id]="option?.id"
-          [label]="option?.name | translate"
-          [initials]="option.initials ? option.initials : ''"
-          [isSelected]="option === selectedOptions.includes(option)"
-          [flexDirection]="flexDirection()"
-          [size]="selectOptionSize"
-        ></pi-select-option>
-      </ng-template>
-      <!-- Default options template menu for server data -->
-      <ng-container
-        [ngTemplateOutlet]="optionTemplateRef() || defaultOption"
-        [ngTemplateOutletContext]="{ $implicit: option, index: i }"
-      >
-      </ng-container>
-    </span>
+    @for (option of options(); track option; let i = $index) {
+      <span (click)="onSelectOption(option)">
+        <!-- Default options template menu for static data -->
+        <ng-template #defaultOption>
+          <pi-select-option
+            type="multiple"
+            [id]="option?.id"
+            [label]="option?.name | translate"
+            [initials]="option.initials ? option.initials : ''"
+            [isSelected]="option === selectedOptions.includes(option)"
+            [flexDirection]="flexDirection()"
+            [size]="selectOptionSize"
+          ></pi-select-option>
+        </ng-template>
+        <!-- Default options template menu for server data -->
+        <ng-container
+          [ngTemplateOutlet]="optionTemplateRef() || defaultOption"
+          [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+        >
+        </ng-container>
+      </span>
+    }
   </div>
 
-  <footer *ngIf="type() === 'dropdown'">
-    <span>
-      <button (click)="onClickReset()" pi-ghost pi-primary w100>Borrar</button>
-      <button (click)="onClickSave()" pi-primary w100>Guardar</button>
-    </span>
-  </footer>
+  @if (type() === 'dropdown') {
+    <footer>
+      <span>
+        <button (click)="onClickReset()" pi-ghost pi-primary w100>
+          Borrar
+        </button>
+        <button (click)="onClickSave()" pi-primary w100>Guardar</button>
+      </span>
+    </footer>
+  }
 </nav>

libs/ui/src/lib/ui/select/select-multiple/select-multiple.component.ts

@@ -19,13 +19,7 @@ import { PiBaseSelectComponent } from '../base-select.component';
 import { PiSelectOptionComponent } from '../select-option/select-option.component';
 import _ from 'lodash';
 import { MatCheckboxChange, MatCheckbox } from '@angular/material/checkbox';
-import {
-  NgIf,
-  NgSwitch,
-  NgSwitchCase,
-  NgTemplateOutlet,
-  NgFor,
-} from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { PiIconComponent } from '../../icon/icon/icon.component';
 import { PiDisabledDirective } from '../../../util/status/directives/status.directive';
 import { PiDisabledDirective as PiDisabledDirective_1 } from '../../text/directives/text-styles.directive';
@@ -53,16 +47,12 @@ import { TruncatePipe } from '../../../util/pipes/pipes';
   ],
   imports: [
     ReactiveFormsModule,
-    NgIf,
     PiIconComponent,
     PiDisabledDirective,
     PiDisabledDirective_1,
-    NgSwitch,
-    NgSwitchCase,
     NgTemplateOutlet,
     MatCheckbox,
     PiDynamicColorDirective,
-    NgFor,
     PiSelectOptionComponent,
     PiGhostButtonDirective,
     PiColorPrimaryDirective,

libs/ui/src/lib/ui/select/select-option/select-option.component.html

@@ -1,33 +1,38 @@
-<ng-container [ngSwitch]="type()">
+@switch (type()) {
   <!-- Column single -->
-  <ng-container *ngSwitchCase="'single'">
+  @case ('single') {
     <div>
-      <pi-radio-button
-        *ngIf="hasRadio()"
-        class="pi-select-option__radio-button"
-        size="x-small"
-        icon="bullet"
-        [isActive]="isSelected()"
-        [color]="color()"
-        [isDisabled]="isDisabled()!"
-      ></pi-radio-button>
+      @if (hasRadio()) {
+        <pi-radio-button
+          class="pi-select-option__radio-button"
+          size="x-small"
+          icon="bullet"
+          [isActive]="isSelected()"
+          [color]="color()"
+          [isDisabled]="isDisabled()!"
+        ></pi-radio-button>
+      }
       <span>
         <span class="pi-select-option__label">{{ label() | translate }}</span>
-        <span class="pi-select-option__description" *ngIf="description()">{{
-          description() | translate
-        }}</span>
+        @if (description()) {
+          <span class="pi-select-option__description">{{
+            description() | translate
+          }}</span>
+        }
       </span>
     </div>
-
     <!-- initials and icon cannot coexist -->
-    <span *ngIf="initials()" class="pi-select-option__initials">{{
-      initials() | translate
-    }}</span>
-    <mat-icon *ngIf="icon()" [svgIcon]="icon()!" [color]="color()"></mat-icon>
-  </ng-container>
-
+    @if (initials()) {
+      <span class="pi-select-option__initials">{{
+        initials() | translate
+      }}</span>
+    }
+    @if (icon()) {
+      <mat-icon [svgIcon]="icon()!" [color]="color()"></mat-icon>
+    }
+  }
   <!-- Column multiple -->
-  <ng-container *ngSwitchCase="'multiple'">
+  @case ('multiple') {
     <div>
       <mat-checkbox
         class="pi-select-option__checkbox"
@@ -36,36 +41,42 @@
       ></mat-checkbox>
       <span class="pi-select-option__label">{{ label() | translate }}</span>
     </div>
-    <span *ngIf="initials()" class="pi-select-option__initials">{{
-      initials() | translate
-    }}</span>
-    <mat-icon
-      class="pi-select-option__icon"
-      *ngIf="icon()"
-      [svgIcon]="icon()!"
-      [color]="color()"
-    ></mat-icon>
-  </ng-container>
-
+    @if (initials()) {
+      <span class="pi-select-option__initials">{{
+        initials() | translate
+      }}</span>
+    }
+    @if (icon()) {
+      <mat-icon
+        class="pi-select-option__icon"
+        [svgIcon]="icon()!"
+        [color]="color()"
+      ></mat-icon>
+    }
+  }
   <!-- Flex wrap (No Picked Option) -->
-  <ng-container *ngSwitchCase="'flex-wrap'">
-    <mat-icon
-      *ngIf="icon()"
-      class="pi-select-option__icon"
-      [svgIcon]="icon()!"
-      [color]="color()"
-    ></mat-icon>
+  @case ('flex-wrap') {
+    @if (icon()) {
+      <mat-icon
+        class="pi-select-option__icon"
+        [svgIcon]="icon()!"
+        [color]="color()"
+      ></mat-icon>
+    }
     <span class="pi-select-option__label">{{ label() | translate }}</span>
-    <span class="pi-select-option__initials" *ngIf="initials()">{{
-      initials() | translate
-    }}</span>
-    <pi-radio-button
-      *ngIf="hasRadio()"
-      class="pi-select-option__radio-button"
-      icon="check"
-      [isActive]="isSelected()"
-      [color]="isSelected() ? color() : 'white'"
-      [isDisabled]="isDisabled()!"
-    ></pi-radio-button>
-  </ng-container>
-</ng-container>
+    @if (initials()) {
+      <span class="pi-select-option__initials">{{
+        initials() | translate
+      }}</span>
+    }
+    @if (hasRadio()) {
+      <pi-radio-button
+        class="pi-select-option__radio-button"
+        icon="check"
+        [isActive]="isSelected()"
+        [color]="isSelected() ? color() : 'white'"
+        [isDisabled]="isDisabled()!"
+      ></pi-radio-button>
+    }
+  }
+}

libs/ui/src/lib/ui/select/select-option/select-option.component.ts

@@ -10,7 +10,7 @@ import {
   SelectOptionFlexDirection,
   actionIcon,
 } from '../entities/select.model';
-import { NgSwitch, NgSwitchCase, NgIf } from '@angular/common';
+
 import { PiRadioButtonComponent } from '../../button/radio-button/radio-button.component';
 import { MatIcon } from '@angular/material/icon';
 import { MatCheckbox } from '@angular/material/checkbox';
@@ -21,15 +21,7 @@ import { TranslatePipe } from '@ngx-translate/core';
   templateUrl: './select-option.component.html',
   styleUrls: ['./select-option.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    NgSwitch,
-    NgSwitchCase,
-    NgIf,
-    PiRadioButtonComponent,
-    MatIcon,
-    MatCheckbox,
-    TranslatePipe,
-  ],
+  imports: [PiRadioButtonComponent, MatIcon, MatCheckbox, TranslatePipe],
 })
 export class PiSelectOptionComponent {
   @HostBinding('class') get classes(): string {

libs/ui/src/lib/ui/select/select-period/select-period.component.html

@@ -1,10 +1,8 @@
 <!-- Picked option -->
 <input hidden [formControl]="control" />
 <!-- Picked option Appearance field template -->
-<ng-container *ngIf="type() === 'dropdown'">
-  <ng-container
-    *ngIf="pickedOptionType() === 'button'; else pickedOptionInputTemplate"
-  >
+@if (type() === 'dropdown') {
+  @if (pickedOptionType() === 'button') {
     <fieldset class="pi-select-picked-option">
       <!-- Input field -->
       <div>
@@ -18,11 +16,10 @@
         size="small"
       ></pi-icon>
     </fieldset>
-  </ng-container>
-  <ng-template #pickedOptionInputTemplate>
-    <ng-container [ngSwitch]="appearance()">
+  } @else {
+    @switch (appearance()) {
       <!-- Fill -->
-      <ng-container *ngSwitchCase="'fill'">
+      @case ('fill') {
         <fieldset class="pi-select-picked-option">
           <pi-icon
             [icon]="icon()"
@@ -38,13 +35,15 @@
               <label class="pi-select-picked-option__label">{{
                 label() | translate
               }}</label>
-              <ng-template #defaultSelected>
+              <ng-template #defaultSelectedFill>
                 <span class="pi-select-picked-option__placeholder">{{
                   selectedOption?.name || placeholder() | translate
                 }}</span>
               </ng-template>
               <ng-container
-                [ngTemplateOutlet]="selectedTemplateRef() || defaultSelected"
+                [ngTemplateOutlet]="
+                  selectedTemplateRef() || defaultSelectedFill
+                "
                 [ngTemplateOutletContext]="{ $implicit: selectedOption }"
               >
               </ng-container>
@@ -57,10 +56,10 @@
             ></pi-icon>
           </div>
         </fieldset>
-      </ng-container>
+      }
 
       <!-- Outline -->
-      <ng-container *ngSwitchCase="'outline'">
+      @case ('outline') {
         <fieldset class="pi-select-picked-option">
           <!-- Input field -->
           <label class="pi-select-picked-option__label">{{
@@ -68,13 +67,15 @@
           }}</label>
           <div>
             <span>
-              <ng-template #defaultSelected>
+              <ng-template #defaultSelectedOutline>
                 <span class="pi-select-picked-option__placeholder">{{
                   selectedOption?.name || placeholder() | translate
                 }}</span>
               </ng-template>
               <ng-container
-                [ngTemplateOutlet]="selectedTemplateRef() || defaultSelected"
+                [ngTemplateOutlet]="
+                  selectedTemplateRef() || defaultSelectedOutline
+                "
                 [ngTemplateOutletContext]="{ $implicit: selectedOption }"
               >
               </ng-container>
@@ -87,96 +88,94 @@
             ></pi-icon>
           </div>
         </fieldset>
-      </ng-container>
-    </ng-container>
-  </ng-template>
-</ng-container>
+      }
+    }
+  }
+}
 
 <!-- Options menu -->
 <nav class="pi-select-options-menu">
-  <header
-    *ngIf="pickedOptionType() === 'button'"
-    class="pi-select-options-menu__picked-option"
-  >
-    <!-- Only visible in a header of  Button -->
-    <pi-icon
-      *ngIf="icon()"
-      [icon]="icon()"
-      class="pi-select-options-menu-picked-option__custom-icon"
-      color="primary"
-      size="medium"
-      pi-disabled
-      [isDisabled]="disabled"
-    ></pi-icon>
+  @if (pickedOptionType() === 'button') {
+    <header class="pi-select-options-menu__picked-option">
+      <!-- Only visible in a header of  Button -->
+      @if (icon()) {
+        <pi-icon
+          [icon]="icon()"
+          class="pi-select-options-menu-picked-option__custom-icon"
+          color="primary"
+          size="medium"
+          pi-disabled
+          [isDisabled]="disabled"
+        ></pi-icon>
+      }
 
-    <span class="pi-select-picked-option__label">{{
-      selectedOption?.name || label() | translate
-    }}</span>
+      <span class="pi-select-picked-option__label">{{
+        selectedOption?.name || label() | translate
+      }}</span>
 
-    <pi-icon
-      class="pi-select-options-menu-picked-option__action-icon"
-      [icon]="actionIcon()"
-      [class.pi-select-options-menu-picked-option__action-icon--chevron]="
-        actionIcon() === 'chevron-forward'
-      "
-      size="small"
-    ></pi-icon>
-  </header>
+      <pi-icon
+        class="pi-select-options-menu-picked-option__action-icon"
+        [icon]="actionIcon()"
+        [class.pi-select-options-menu-picked-option__action-icon--chevron]="
+          actionIcon() === 'chevron-forward'
+        "
+        size="small"
+      ></pi-icon>
+    </header>
+  }
   <!-- Add a tab component with -->
   <!-- TODO: replace for months menu -->
   <div class="pi-select-options-menu__options">
-    <span
-      *ngFor="let option of options(); index as i"
-      (click)="onSelectOption(option)"
-    >
-      <!-- Default options template menu for static data -->
-      <ng-template #defaultOption>
-        <pi-select-option
-          [id]="option?.[keyIdProperty()] || option?.id"
-          [label]="option?.name | translate"
-          [initials]="option?.initials"
-          [description]="option?.description"
-          [icon]="option?.icon"
-          [isSelected]="option?.id === selectedOption?.id"
-          [isDisabled]="disabled"
-          [size]="selectOptionSize"
-        ></pi-select-option>
-      </ng-template>
-      <!-- Default options template menu for server data -->
-      <ng-container
-        [ngTemplateOutlet]="optionTemplateRef() || defaultOption"
-        [ngTemplateOutletContext]="{ $implicit: option, index: i }"
-      >
-      </ng-container>
-    </span>
+    @for (option of options(); track option; let i = $index) {
+      <span (click)="onSelectOption(option)">
+        <!-- Default options template menu for static data -->
+        <ng-template #defaultMonthOption>
+          <pi-select-option
+            [id]="option?.[keyIdProperty()] || option?.id"
+            [label]="option?.name | translate"
+            [initials]="option?.initials"
+            [description]="option?.description"
+            [icon]="option?.icon"
+            [isSelected]="option?.id === selectedOption?.id"
+            [isDisabled]="disabled"
+            [size]="selectOptionSize"
+          ></pi-select-option>
+        </ng-template>
+        <!-- Default options template menu for server data -->
+        <ng-container
+          [ngTemplateOutlet]="optionTemplateRef() || defaultMonthOption"
+          [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+        >
+        </ng-container>
+      </span>
+    }
   </div>
 
   <!-- TODO: replace for years menu -->
   <div class="pi-select-options-menu__options">
-    <span
-      *ngFor="let option of options(); index as i"
-      (click)="onSelectOption(option)"
-    >
-      <!-- Default options template menu for static data -->
-      <ng-template #defaultOption>
-        <pi-select-option
-          [id]="option?.[keyIdProperty()] || option?.id"
-          [label]="option?.name | translate"
-          [initials]="option?.initials"
-          [description]="option?.description"
-          [icon]="option?.icon"
-          [isSelected]="option?.id === selectedOption?.id"
-          [isDisabled]="disabled"
-          [flexDirection]="flexDirection()"
-          [size]="selectOptionSize"
-        ></pi-select-option>
-      </ng-template>
-      <!-- Default options template menu for server data -->
-      <ng-container
-        [ngTemplateOutlet]="optionTemplateRef() || defaultOption"
-        [ngTemplateOutletContext]="{ $implicit: option, index: i }"
-      >
-      </ng-container>
-    </span>
+    @for (option of options(); track option; let i = $index) {
+      <span (click)="onSelectOption(option)">
+        <!-- Default options template menu for static data -->
+        <ng-template #defaultYearOption>
+          <pi-select-option
+            [id]="option?.[keyIdProperty()] || option?.id"
+            [label]="option?.name | translate"
+            [initials]="option?.initials"
+            [description]="option?.description"
+            [icon]="option?.icon"
+            [isSelected]="option?.id === selectedOption?.id"
+            [isDisabled]="disabled"
+            [flexDirection]="flexDirection()"
+            [size]="selectOptionSize"
+          ></pi-select-option>
+        </ng-template>
+        <!-- Default options template menu for server data -->
+        <ng-container
+          [ngTemplateOutlet]="optionTemplateRef() || defaultYearOption"
+          [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+        >
+        </ng-container>
+      </span>
+    }
   </div>
 </nav>

libs/ui/src/lib/ui/select/select-period/select-period.component.ts

@@ -17,17 +17,10 @@ import { merge } from 'rxjs';
 import { PiBaseSelectComponent } from '../base-select.component';
 import { PiSelectOptionComponent } from '../select-option/select-option.component';
 import _ from 'lodash';
-import {
-  NgIf,
-  NgSwitch,
-  NgSwitchCase,
-  NgTemplateOutlet,
-  NgFor,
-} from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { PiIconComponent } from '../../icon/icon/icon.component';
 import { PiDisabledDirective } from '../../../util/status/directives/status.directive';
 import { PiDisabledDirective as PiDisabledDirective_1 } from '../../text/directives/text-styles.directive';
-import { PiSelectComponent } from '../select/select.component';
 
 @Component({
   selector: 'pi-select-period',
@@ -43,16 +36,11 @@ import { PiSelectComponent } from '../select/select.component';
   ],
   imports: [
     ReactiveFormsModule,
-    NgIf,
     PiIconComponent,
-    NgSwitch,
-    NgSwitchCase,
     NgTemplateOutlet,
     PiDisabledDirective,
     PiDisabledDirective_1,
-    NgFor,
     PiSelectOptionComponent,
-    PiSelectComponent,
     TranslatePipe,
   ],
 })

libs/ui/src/lib/ui/select/select/select.component.html

@@ -1,10 +1,8 @@
 <!-- Picked option -->
 <input hidden [formControl]="control" />
 <!-- Picked option Appearance field template -->
-<ng-container *ngIf="type() === 'dropdown'">
-  <ng-container
-    *ngIf="pickedOptionType() === 'button'; else pickedOptionInputTemplate"
-  >
+@if (type() === 'dropdown') {
+  @if (pickedOptionType() === 'button') {
     <fieldset class="pi-select-picked-option">
       <!-- Input field -->
       <div>
@@ -18,11 +16,10 @@
         size="small"
       ></pi-icon>
     </fieldset>
-  </ng-container>
-  <ng-template #pickedOptionInputTemplate>
-    <ng-container [ngSwitch]="appearance()">
+  } @else {
+    @switch (appearance()) {
       <!-- Fill -->
-      <ng-container *ngSwitchCase="'fill'">
+      @case ('fill') {
         <fieldset class="pi-select-picked-option">
           <pi-icon
             [icon]="icon()"
@@ -38,13 +35,15 @@
               <label class="pi-select-picked-option__label">{{
                 label() | translate
               }}</label>
-              <ng-template #defaultSelected>
+              <ng-template #defaultSelectedFill>
                 <span class="pi-select-picked-option__placeholder">{{
                   selectedOption?.name || placeholder() | translate
                 }}</span>
               </ng-template>
               <ng-container
-                [ngTemplateOutlet]="selectedTemplateRef() || defaultSelected"
+                [ngTemplateOutlet]="
+                  selectedTemplateRef() || defaultSelectedFill
+                "
                 [ngTemplateOutletContext]="{ $implicit: selectedOption }"
               >
               </ng-container>
@@ -57,10 +56,10 @@
             ></pi-icon>
           </div>
         </fieldset>
-      </ng-container>
+      }
 
       <!-- Outline -->
-      <ng-container *ngSwitchCase="'outline'">
+      @case ('outline') {
         <fieldset class="pi-select-picked-option">
           <!-- Input field -->
           <label class="pi-select-picked-option__label">{{
@@ -68,13 +67,15 @@
           }}</label>
           <div>
             <span>
-              <ng-template #defaultSelected>
+              <ng-template #defaultSelectedOutline>
                 <span class="pi-select-picked-option__placeholder">{{
                   selectedOption?.name || placeholder() | translate
                 }}</span>
               </ng-template>
               <ng-container
-                [ngTemplateOutlet]="selectedTemplateRef() || defaultSelected"
+                [ngTemplateOutlet]="
+                  selectedTemplateRef() || defaultSelectedOutline
+                "
                 [ngTemplateOutletContext]="{ $implicit: selectedOption }"
               >
               </ng-container>
@@ -87,67 +88,66 @@
             ></pi-icon>
           </div>
         </fieldset>
-      </ng-container>
-    </ng-container>
-  </ng-template>
-</ng-container>
+      }
+    }
+  }
+}
 
 <!-- Options menu -->
 <nav class="pi-select-options-menu">
-  <header
-    *ngIf="pickedOptionType() === 'button'"
-    class="pi-select-options-menu__picked-option"
-  >
-    <!-- Only visible in a header of  Button -->
-    <pi-icon
-      *ngIf="icon()"
-      [icon]="icon()"
-      class="pi-select-options-menu-picked-option__custom-icon"
-      color="primary"
-      size="medium"
-      pi-disabled
-      [isDisabled]="disabled"
-    ></pi-icon>
-
-    <span class="pi-select-options-menu-picked-option__placeholder">{{
-      placeholder() | translate
-    }}</span>
-
-    <pi-icon
-      class="pi-select-options-menu-picked-option__action-icon"
-      [icon]="actionIcon()"
-      [class.pi-select-options-menu-picked-option__action-icon--chevron]="
-        actionIcon() === 'chevron-forward'
-      "
-      size="small"
-    ></pi-icon>
-  </header>
-  <div class="pi-select-options-menu__options">
-    <span
-      *ngFor="let option of options(); index as i"
-      (click)="onSelectOption(option)"
-    >
-      <!-- Default options template menu for static data -->
-      <ng-template #defaultOption>
-        <pi-select-option
-          [hasRadio]="hasRadio()"
-          [id]="option?.[keyIdProperty()] || option?.id"
-          [label]="option?.name | translate"
-          [initials]="option?.initials"
-          [description]="option?.description"
-          [icon]="option?.icon"
-          [isSelected]="option?.id === selectedOption?.id"
+  @if (pickedOptionType() === 'button') {
+    <header class="pi-select-options-menu__picked-option">
+      <!-- Only visible in a header of  Button -->
+      @if (icon()) {
+        <pi-icon
+          [icon]="icon()"
+          class="pi-select-options-menu-picked-option__custom-icon"
+          color="primary"
+          size="medium"
+          pi-disabled
           [isDisabled]="disabled"
-          [flexDirection]="flexDirection()"
-          [size]="selectOptionSize"
-        ></pi-select-option>
-      </ng-template>
-      <!-- Default options template menu for server data -->
-      <ng-container
-        [ngTemplateOutlet]="optionTemplateRef() || defaultOption"
-        [ngTemplateOutletContext]="{ $implicit: option, index: i }"
-      >
-      </ng-container>
-    </span>
+        ></pi-icon>
+      }
+
+      <span class="pi-select-options-menu-picked-option__placeholder">{{
+        placeholder() | translate
+      }}</span>
+
+      <pi-icon
+        class="pi-select-options-menu-picked-option__action-icon"
+        [icon]="actionIcon()"
+        [class.pi-select-options-menu-picked-option__action-icon--chevron]="
+          actionIcon() === 'chevron-forward'
+        "
+        size="small"
+      ></pi-icon>
+    </header>
+  }
+  <div class="pi-select-options-menu__options">
+    @for (option of options(); track option; let i = $index) {
+      <span (click)="onSelectOption(option)">
+        <!-- Default options template menu for static data -->
+        <ng-template #defaultOption>
+          <pi-select-option
+            [hasRadio]="hasRadio()"
+            [id]="option?.[keyIdProperty()] || option?.id"
+            [label]="option?.name | translate"
+            [initials]="option?.initials"
+            [description]="option?.description"
+            [icon]="option?.icon"
+            [isSelected]="option?.id === selectedOption?.id"
+            [isDisabled]="disabled"
+            [flexDirection]="flexDirection()"
+            [size]="selectOptionSize"
+          ></pi-select-option>
+        </ng-template>
+        <!-- Default options template menu for server data -->
+        <ng-container
+          [ngTemplateOutlet]="optionTemplateRef() || defaultOption"
+          [ngTemplateOutletContext]="{ $implicit: option, index: i }"
+        >
+        </ng-container>
+      </span>
+    }
   </div>
 </nav>

libs/ui/src/lib/ui/select/select/select.component.ts

@@ -19,13 +19,7 @@ import { merge } from 'rxjs';
 import { PiBaseSelectComponent } from '../base-select.component';
 import { PiSelectOptionComponent } from '../select-option/select-option.component';
 import _ from 'lodash';
-import {
-  NgIf,
-  NgSwitch,
-  NgSwitchCase,
-  NgTemplateOutlet,
-  NgFor,
-} from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { PiIconComponent } from '../../icon/icon/icon.component';
 import { PiDisabledDirective } from '../../../util/status/directives/status.directive';
 import { PiDisabledDirective as PiDisabledDirective_1 } from '../../text/directives/text-styles.directive';
@@ -44,14 +38,10 @@ import { PiDisabledDirective as PiDisabledDirective_1 } from '../../text/directi
   ],
   imports: [
     ReactiveFormsModule,
-    NgIf,
     PiIconComponent,
-    NgSwitch,
-    NgSwitchCase,
     NgTemplateOutlet,
     PiDisabledDirective,
     PiDisabledDirective_1,
-    NgFor,
     PiSelectOptionComponent,
     forwardRef(() => PiSelectComponent),
     TranslatePipe,

libs/ui/src/lib/ui/slider/slider/slider.component.html

@@ -1,7 +1,9 @@
-<span *ngIf="label()">
-  <label>{{ label() }}</label>
-  <span>{{ control?.value }} {{ unit() }}</span>
-</span>
+@if (label()) {
+  <span>
+    <label>{{ label() }}</label>
+    <span>{{ control?.value }} {{ unit() }}</span>
+  </span>
+}
 <mat-slider
   [min]="minValue()"
   [max]="maxValue()"

libs/ui/src/lib/ui/slider/slider/slider.component.ts

@@ -14,7 +14,7 @@ import {
 
 // Component
 import { PiBaseSliderComponent } from '../base-slider.component';
-import { NgIf } from '@angular/common';
+
 import { MatSlider, MatSliderThumb } from '@angular/material/slider';
 
 @Component({
@@ -29,7 +29,7 @@ import { MatSlider, MatSliderThumb } from '@angular/material/slider';
       multi: true,
     },
   ],
-  imports: [NgIf, MatSlider, MatSliderThumb, ReactiveFormsModule],
+  imports: [MatSlider, MatSliderThumb, ReactiveFormsModule],
 })
 export class PiSliderComponent extends PiBaseSliderComponent implements OnInit {
   readonly formControlName = input<string>();

libs/ui/src/lib/ui/tab/tab/tab.component.html

@@ -1,59 +1,62 @@
 <header>
-  <pi-icon
-    *ngIf="isTabWrapperOverflowing && !isSmallDevice()"
-    (click)="isTabWrapperScrolledToStart ? null : scrollTabWrapper('prev')"
-    icon="chevron-back"
-    [isStroked]="true"
-    appearance="fill"
-    borderRadius="large"
-    size="small"
-    color="primary"
-    animation="clickable"
-    pi-disabled
-    [isDisabled]="isTabWrapperScrolledToStart"
-  ></pi-icon>
+  @if (isTabWrapperOverflowing && !isSmallDevice()) {
+    <pi-icon
+      (click)="isTabWrapperScrolledToStart ? null : scrollTabWrapper('prev')"
+      icon="chevron-back"
+      [isStroked]="true"
+      appearance="fill"
+      borderRadius="large"
+      size="small"
+      color="primary"
+      animation="clickable"
+      pi-disabled
+      [isDisabled]="isTabWrapperScrolledToStart"
+    ></pi-icon>
+  }
   <section #tabWrapper>
-    <ng-container *ngIf="tabButtons(); else customTabElements">
-      <ng-container *ngFor="let tab of tabButtons(); let i = index">
+    @if (tabButtons()) {
+      @for (tab of tabButtons(); track tab; let i = $index) {
         <article
           [class]="getTabElementClass(i, tab)"
           (click)="tab.isDisabled ? null : onTabChange(i)"
           pi-disabled
           [isDisabled]="tab.isDisabled"
         >
-          <pi-icon *ngIf="tab.icon" [icon]="tab.icon" size="large"></pi-icon>
+          @if (tab.icon) {
+            <pi-icon [icon]="tab.icon" size="large"></pi-icon>
+          }
           <span>
             {{ tab.label | translate }}
           </span>
         </article>
-      </ng-container>
-    </ng-container>
+      }
+    } @else {
+      @for (tab of tabElementItems(); track tab; let i = $index) {
+        <article [class]="getTabElementClass(i)" (click)="onTabChange(i)">
+          <ng-container *ngTemplateOutlet="tab.templateRef"> </ng-container>
+        </article>
+      }
+    }
   </section>
-  <ng-template #customTabElements>
-    <ng-container *ngFor="let tab of tabElementItems(); let i = index">
-      <article [class]="getTabElementClass(i)" (click)="onTabChange(i)">
-        <ng-container *ngTemplateOutlet="tab.templateRef"> </ng-container>
-      </article>
-    </ng-container>
-  </ng-template>
-  <pi-icon
-    *ngIf="isTabWrapperOverflowing && !isSmallDevice()"
-    (click)="isTabWrapperScrolledToEnd ? null : scrollTabWrapper('next')"
-    icon="chevron-forward"
-    [isStroked]="true"
-    appearance="fill"
-    borderRadius="large"
-    size="small"
-    color="primary"
-    animation="clickable"
-    pi-disabled
-    [isDisabled]="isTabWrapperScrolledToEnd"
-  ></pi-icon>
+  @if (isTabWrapperOverflowing && !isSmallDevice()) {
+    <pi-icon
+      (click)="isTabWrapperScrolledToEnd ? null : scrollTabWrapper('next')"
+      icon="chevron-forward"
+      [isStroked]="true"
+      appearance="fill"
+      borderRadius="large"
+      size="small"
+      color="primary"
+      animation="clickable"
+      pi-disabled
+      [isDisabled]="isTabWrapperScrolledToEnd"
+    ></pi-icon>
+  }
 </header>
 <main>
-  <ng-container *ngFor="let tab of tabContentItems(); let i = index">
+  @for (tab of tabContentItems(); track tab; let i = $index) {
     <section [class]="getTabContentClass(i)">
       <ng-container *ngTemplateOutlet="tab.templateRef"> </ng-container>
     </section>
-  </ng-container>
+  }
 </main>

libs/ui/src/lib/ui/tab/tab/tab.component.ts

@@ -15,7 +15,7 @@ import {
 } from '@angular/core';
 import { TabButton } from '../entities/tab.model';
 import { PiTabContentDirective, PiTabElementDirective } from '../tab.directive';
-import { NgIf, NgFor, NgTemplateOutlet } from '@angular/common';
+import { NgTemplateOutlet } from '@angular/common';
 import { PiIconComponent } from '../../icon/icon/icon.component';
 import { PiDisabledDirective } from '../../../util/status/directives/status.directive';
 import { PiDisabledDirective as PiDisabledDirective_1 } from '../../text/directives/text-styles.directive';
@@ -27,11 +27,9 @@ import { TranslatePipe } from '@ngx-translate/core';
   styleUrls: ['./tab.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
-    NgIf,
     PiIconComponent,
     PiDisabledDirective,
     PiDisabledDirective_1,
-    NgFor,
     NgTemplateOutlet,
     TranslatePipe,
   ],

libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.html

@@ -1,18 +1,19 @@
 <article>
   <span>
-    {{ isLongText ? (text() | slice: 0 : characterLimit()) : text()
-    }}<span *ngIf="isLongText && isCollapsed">...</span>
+    {{ isLongText ? (text() | slice: 0 : characterLimit()) : text() }}
+    @if (isLongText && isCollapsed) {
+      <span>...</span>
+    }
   </span>
-  <section *ngIf="!isCollapsed">
-    {{ text() | slice: characterLimit() : text()?.length }}
-  </section>
+  @if (!isCollapsed) {
+    <section>
+      {{ text() | slice: characterLimit() : text()?.length }}
+    </section>
+  }
 </article>
 
-<button
-  pi-ghost
-  [hasPadding]="false"
-  *ngIf="isLongText"
-  (click)="alterToggle()"
->
-  {{ isCollapsed ? 'Leer más' : 'Leer menos' }}
-</button>
+@if (isLongText) {
+  <button pi-ghost [hasPadding]="false" (click)="alterToggle()">
+    {{ isCollapsed ? 'Leer más' : 'Leer menos' }}
+  </button>
+}

libs/ui/src/lib/ui/text/text-area-expansion/text-area-expansion.component.ts

@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, input } from '@angular/core';
 import { DURATION, transitionAnimation } from '../../../styles';
-import { NgIf, SlicePipe } from '@angular/common';
+import { SlicePipe } from '@angular/common';
 import { PiGhostButtonDirective } from '../../button/button.directive';
 
 @Component({
@@ -9,7 +9,7 @@ import { PiGhostButtonDirective } from '../../button/button.directive';
   styleUrls: ['./text-area-expansion.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
   animations: transitionAnimation(DURATION.Medium),
-  imports: [NgIf, PiGhostButtonDirective, SlicePipe],
+  imports: [PiGhostButtonDirective, SlicePipe],
 })
 export class PiTextAreaExpansionComponent {
   readonly text = input('');

libs/ui/src/lib/ui/text/text-viewer-link/text-viewer-link.component.html

@@ -1,25 +1,34 @@
-<mat-icon *ngIf="icon()" [svgIcon]="icon()!" alt="icon" size="size"></mat-icon>
+@if (icon()) {
+  <mat-icon [svgIcon]="icon()!" alt="icon" size="size"></mat-icon>
+}
 <article>
-  <label *ngIf="label()">{{ label() }}</label>
-  <ng-container [ngSwitch]="getTemplate()">
+  @if (label()) {
+    <label>{{ label() }}</label>
+  }
+  @switch (getTemplate()) {
     <!-- Route template -->
-    <a
-      *ngSwitchCase="'route'"
-      [routerLink]="route()"
-      [routerLinkActive]="['isActive']"
-      [routerLinkActiveOptions]="{ exact: true }"
-      [target]="target()"
-      [queryParams]="queryParams()"
-    >
-      {{ value() }}
-    </a>
+    @case ('route') {
+      <a
+        [routerLink]="route()"
+        [routerLinkActive]="['isActive']"
+        [routerLinkActiveOptions]="{ exact: true }"
+        [target]="target()"
+        [queryParams]="queryParams()"
+      >
+        {{ value() }}
+      </a>
+    }
     <!-- Link template -->
-    <a *ngSwitchCase="'link'" [href]="link()" [target]="target()">
-      <span>{{ value() }}</span>
-    </a>
+    @case ('link') {
+      <a [href]="link()" [target]="target()">
+        <span>{{ value() }}</span>
+      </a>
+    }
     <!-- OnClick template -->
-    <a *ngSwitchCase="'onClick'">
-      <span>{{ value() }}</span>
-    </a>
-  </ng-container>
+    @case ('onClick') {
+      <a>
+        <span>{{ value() }}</span>
+      </a>
+    }
+  }
 </article>

libs/ui/src/lib/ui/text/text-viewer-link/text-viewer-link.component.ts

@@ -13,7 +13,7 @@ import {
   justify,
 } from '../../../styles';
 import { PiBaseTextViewerComponent } from '../base-text-viewer.component';
-import { NgIf, NgSwitch, NgSwitchCase } from '@angular/common';
+
 import { MatIcon } from '@angular/material/icon';
 
 @Component({
@@ -24,14 +24,7 @@ import { MatIcon } from '@angular/material/icon';
     '../styles/base-text-viewer.component.scss',
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
-  imports: [
-    NgIf,
-    MatIcon,
-    NgSwitch,
-    NgSwitchCase,
-    RouterLink,
-    RouterLinkActive,
-  ],
+  imports: [MatIcon, RouterLink, RouterLinkActive],
 })
 export class PiTextViewerLinkComponent extends PiBaseTextViewerComponent {
   @HostBinding('class') get textViewerLinkClasses(): string {

libs/ui/src/lib/ui/text/text-viewer/text-viewer.component.html

@@ -1,13 +1,16 @@
-<mat-icon
-  *ngIf="icon()"
-  [svgIcon]="icon()!"
-  alt="icon"
-  size="size"
-  [color]="iconColor()"
-></mat-icon>
+@if (icon()) {
+  <mat-icon
+    [svgIcon]="icon()!"
+    alt="icon"
+    size="size"
+    [color]="iconColor()"
+  ></mat-icon>
+}
 <article>
   <label>{{ label() }}</label>
-  <span *ngIf="value()">
-    {{ value() }}
-  </span>
+  @if (value()) {
+    <span>
+      {{ value() }}
+    </span>
+  }
 </article>