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
+`signal-input-migration`, `output-migration`, `signal-queries-migration`,
-resolvió a mano lo que no cubren.
+`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`),
+  `prefer-inject` (51), `directive-selector` (46), `no-explicit-any` (35),
-  `directive-selector` (40), `prefer-inject` (33), a11y y `no-unused-vars`.
+  `no-unused-expressions` (33), a11y (`click-events-have-key-events`,
-  Nada bloquea el build. Hay migraciones oficiales para los dos primeros grupos:
+  `interactive-supports-focus`, `label-has-associated-control`) y
-  `nx g @angular/core:control-flow-migration` y `nx g @angular/core:inject-migration`.
+  `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,9 +1,9 @@
 <!-- HEADER OF THE WHOLE ACCORDION -->
 <ng-content select="pi-accordion-header"></ng-content>
 
-<ng-container *ngIf="direction() === 'default'; else horizontal">
+@if (direction() === 'default') {
+  @for (item of items(); track item; let i = $index) {
     <section
-    *ngFor="let item of items(); index as i"
       [class]="
         !!item.status() && item.status() === 'disabled'
           ? 'is-disabled'
@@ -12,8 +12,8 @@
       class="pi-accordion-item"
     >
       <!-- TOPBAR -->
+      @if (item.isConfidential() === true) {
         <div
-      *ngIf="item.isConfidential() === true"
           class="pi-accordion-item-content pi-accordion-item-content__topbar"
           pi-dynamic-color
           [color]="isItemExpanded(i) ? 'highlighted' : 'grey'"
@@ -31,7 +31,7 @@
             fontWeight="400"
           ></pi-text-viewer>
         </div>
-
+      }
       <!-- HEADER -->
       <header
         (click)="toggleState(item, i)"
@@ -42,7 +42,9 @@
         "
       >
         <ng-container
-        [ngTemplateOutlet]="item?.customHeader()?.templateRef || defaultHeader"
+          [ngTemplateOutlet]="
+            item?.customHeader()?.templateRef || defaultHeader
+          "
           [ngTemplateOutletContext]="{
             $implicit: item,
             index: i,
@@ -52,14 +54,17 @@
         <aside
           class="pi-accordion-item-header-content pi-accordion-item-header-content__right"
         >
+          @if (item.status()) {
             <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">
+          @if (item.status()) {
+            <span></span>
+          }
+          @if (hasForm()) {
             <pi-icon-button
               (execute)="toggleState(item, i)"
               appearance="ghost"
@@ -71,20 +76,18 @@
               [class]="isItemExpanded(i) ? 'is-expanded' : 'is-collapsed'"
               [disabled]="!!item.status() && item.status() === 'disabled'"
             ></pi-icon-button>
-        </ng-container>
+          } @else {
-        <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 (!!item?.summaryContent() && !isItemExpanded(i)) {
         <section
-      *ngIf="!!item?.summaryContent() && !isItemExpanded(i)"
           class="pi-accordion-item-content pi-accordion-item-content__summary"
         >
           <ng-container
@@ -96,7 +99,7 @@
             }"
           ></ng-container>
         </section>
-
+      }
       <!-- MAIN -->
       <main
         class="pi-accordion-item-content pi-accordion-item-content__expandable"
@@ -106,26 +109,11 @@
         ></ng-container>
       </main>
     </section>
-</ng-container>
+  }
-
+} @else {
-<!-- 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>
   <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,26 +132,31 @@
             isExpanded: isItemExpanded(i),
           }"
         ></ng-container>
-        <aside *ngIf="hasChevron()">
+        @if (hasChevron()) {
+          <aside>
+            @if (item.status() && !isItemExpanded(i)) {
               <pi-chip-status
-            *ngIf="item.status() && !isItemExpanded(i)"
                 [status]="item.status()"
                 icon="exclamation"
               ></pi-chip-status>
-          <span *ngIf="item.status() && !isItemExpanded(i)"></span>
+            }
+            @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 -->
+    @for (item of items(); track item; let i = $index) {
       <main
-      *ngFor="let item of items(); index as i"
         [class]="
           setAccordionItemClasses(item, i) +
           ' ' +
@@ -174,5 +167,20 @@
           *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,11 +10,13 @@
   <section>
     <header>
       <h3 bold>{{ title() }}</h3>
-      <span *ngIf="message()">{{ message() }}</span>
+      @if (message()) {
+        <span>{{ message() }}</span>
+      }
     </header>
     <!-- Action -->
+    @if (buttonText()) {
       <pi-icon-button
-      *ngIf="buttonText()"
         (execute)="execute.emit($event)"
         icon="chevron-forward"
         iconColor="white"
@@ -23,5 +25,6 @@
         [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,14 +14,12 @@
     appearanceClass,
   ]"
 >
-  <span *ngIf="text()">{{ text() }}</span>
+  @if (text()) {
+    <span>{{ text() }}</span>
+  }
 
-  <svg
+  @if (hasIcon()) {
-    *ngIf="hasIcon()"
+    <svg viewBox="0 0 6 9" fill="none" xmlns="http://www.w3.org/2000/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"
@@ -33,4 +31,5 @@
         <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"
+@if (iconType() === 'custom') {
-  ><button
+  <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
+    <img src="/assets/icons/{{ icon() }}.svg" />
-></ng-container>
+  </button>
-
+} @else {
-<ng-template #defaultIcon
+  <button
-  ><button
     #content
     (click)="onClickHandler($event)"
     previous="previous"
@@ -47,12 +48,15 @@
       modeClass,
     ]"
   >
-    <mat-icon *ngIf="previous()" [svgIcon]="icon()!" alt="icon"></mat-icon>
+    @if (previous()) {
-    <span *ngIf="text()">{{ text() }}</span>
+      <mat-icon [svgIcon]="icon()!" alt="icon"></mat-icon>
+    }
+    @if (text()) {
+      <span>{{ text() }}</span>
+    }
     <ng-content></ng-content>
-    <mat-icon
+    @if (!previous()) {
-      *ngIf="!previous()"
+      <mat-icon [svgIcon]="icon()!" alt="icon"></mat-icon>
-      [svgIcon]="icon()!"
+    }
-      alt="icon"
+  </button>
-    ></mat-icon></button
+}
-></ng-template>

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

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()"
+@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()">
+@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>
+  @if (hasOverflow && !hideSwipeButtons()) {
     <pi-icon-button
-    *ngIf="hasOverflow && !hideSwipeButtons()"
       [icon]="prevIcon"
       (execute)="prev()"
       [disabled]="!canSwipePrev"
       appearance="ghost"
     ></pi-icon-button>
+  }
   <section [class]="hasOverflow ? 'has-overflow' : ''" #carouselContentWrapper>
-    <ng-container
+    @for (item of carouselItems(); track trackByFn(i, item); let i = $index) {
-      *ngFor="let item of carouselItems(); index as i; trackBy: trackByFn"
-    >
       <section [class]="getItemClass(i)" (click)="selectItem(i)">
         <ng-container *ngTemplateOutlet="item.templateRef"> </ng-container>
       </section>
-    </ng-container>
+    }
   </section>
+  @if (hasOverflow && !hideSwipeButtons()) {
     <pi-icon-button
-    *ngIf="hasOverflow && !hideSwipeButtons()"
       [icon]="nextIcon"
       (execute)="next()"
       [disabled]="!canSwipeNext"
       appearance="ghost"
     ></pi-icon-button>
+  }
 </main>
 
 <!-- Paginator -->
-<footer *ngIf="hasOverflow && !hidePaginator()">
+@if (hasOverflow && !hidePaginator()) {
-  <div
+  <footer>
-    *ngFor="let i of pages; index as index"
+    @for (i of pages; track i; let index = $index) {
-    [class]="index === currentPageIndex ? 'is-active' : ''"
+      <div [class]="index === currentPageIndex ? 'is-active' : ''"></div>
-  ></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()">
+    @if (value() || icon()) {
+      <span class="pi-chip-affix">
+        @if (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>
+        }
+        @if (value()) {
+          <span class="pi-chip-affix__value">{{ value() }}</span>
+        }
       </span>
+    }
   </div>
 
+  @if (isClosable()) {
     <mat-icon
-    *ngIf="isClosable()"
       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'">{{
+  @if (size() === 'large') {
-    dateValue?.weekDay
+    <span class="pi-chip-date__weekday">{{ dateValue?.weekDay }}</span>
-  }}</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">
+    @if (icon()) {
       <mat-icon
-      *ngIf="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
+@if (time() && date()) {
-  (click)="isClosable() ? execute.emit() : null"
+  <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>
-
+    @if (isClosable()) {
       <mat-icon
-    *ngIf="isClosable()"
         svgIcon="close"
         [color]="color()"
         class="pi-chip-close-icon"
       ></mat-icon>
+    }
   </span>
-
+} @else {
-<ng-template #singleContentTemplate>
   <span (click)="isClosable() ? execute.emit() : null">
     <div>
       <span class="pi-chip-affix">
-        <span *ngIf="time(); else dateTemplate" class="pi-chip-affix__time">
+        @if (time()) {
-          {{ timeValue }}h
+          <span class="pi-chip-affix__time"> {{ timeValue }}h </span>
-        </span>
+        } @else {
-        <ng-template #dateTemplate>
           <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()">
+  @if (icon() || value()) {
-    <ng-container *ngIf="icon()">
+    <span class="pi-chip-affix">
+      @if (icon()) {
+        @if (iconType() === 'custom') {
           <img
-        *ngIf="iconType() === 'custom'; else defaultIcon"
             src="/assets/icons/{{ icon() }}.svg"
             class="pi-chip-affix__icon"
           />
-
+        } @else {
-      <ng-template #defaultIcon
+          <mat-icon
-        ><mat-icon
             [svgIcon]="icon()!"
             [color]="appearance() !== 'fill' ? color() : ''"
             class="pi-chip-affix__icon"
-        ></mat-icon
+          ></mat-icon>
-      ></ng-template>
+        }
-    </ng-container>
+      }
-
+      @if (value()) {
-    <span *ngIf="value()" class="pi-chip-affix__value">{{ value() }}</span>
+        <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
+    @if (icon()) {
-      *ngIf="icon(); else valueTemplate"
+      <mat-icon [svgIcon]="icon()!" [color]="color()"></mat-icon>
-      [svgIcon]="icon()!"
+    } @else {
-      [color]="color()"
-    ></mat-icon>
-    <ng-template #valueTemplate>
       <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:
 -->
-<header
+@if (keysTemplateRef() && mode() === 'list') {
-  *ngIf="keysTemplateRef() && mode() === 'list'"
+  <header pi-grid-item context="keys">
-  pi-grid-item
-  context="keys"
->
     <ng-container *ngTemplateOutlet="keysTemplateRef() || defaultErrorTemplate">
     </ng-container>
   </header>
+}
 
 <!--
 Data Direction:
 COLUMN
 -->
-<ng-container
+@if (dataDirection() === 'column') {
-  *ngIf="dataDirection() === 'column'; else dataDirectionRowTemplate"
->
   <!-- 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,19 +36,13 @@
       >
       </ng-container>
     </div>
-  </ng-container>
+  }
-</ng-container>
+} @else {
-
-<!-- 
-  Data Direction:
-  ROW 
--->
-<ng-template #dataDirectionRowTemplate>
   <!-- DataGrid (each iteration)-->
   <section class="pi-data-grid__content">
+    @for (value of data(); track value; let i = $index) {
       <div
         id="pi-grid-item-{{ i }}"
-      *ngFor="let value of data(); index as i"
         pi-grid-item
         #gridItem
         [class.pi-card]="mode() === 'grid'"
@@ -65,7 +54,6 @@
             *ngTemplateOutlet="(mode() === 'grid' && keysTemplateRef()) || null"
           >
           </ng-container>
-
           <!-- Values -->
           <ng-container
             [ngTemplateOutlet]="valuesTemplateRef() || null"
@@ -74,7 +62,8 @@
           </ng-container>
         </section>
         <!-- Expandable Content -->
-      <aside *ngIf="isExpandable()">
+        @if (isExpandable()) {
+          <aside>
             <!-- Keys -->
             <header
               class="pi-grid-item pi-grid-item__expandable-content pi-grid-item__expandable-content--keys-template"
@@ -86,7 +75,6 @@
               >
               </ng-container>
             </header>
-
             <div
               class="pi-grid-item pi-grid-item__expandable-content pi-grid-item__expandable-content--values-template"
             >
@@ -97,9 +85,16 @@
               </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()">
+@switch (type()) {
-  <ng-container *ngSwitchCase="'amount'" [ngTemplateOutlet]="amount">
+  @case ('amount') {
-  </ng-container>
+    <ng-container [ngTemplateOutlet]="amount"> </ng-container>
-
+  }
-  <ng-container *ngSwitchCase="'text'" [ngTemplateOutlet]="text">
+  @case ('text') {
-  </ng-container>
+    <ng-container [ngTemplateOutlet]="text"> </ng-container>
-
+  }
-  <ng-container *ngSwitchCase="'date'" [ngTemplateOutlet]="date"></ng-container>
+  @case ('date') {
-
+    <ng-container [ngTemplateOutlet]="date"></ng-container>
-  <ng-container
+  }
-    *ngSwitchCase="'input'"
+  @case ('input') {
-    [ngTemplateOutlet]="input"
+    <ng-container [ngTemplateOutlet]="input"></ng-container>
-  ></ng-container>
+  }
-
+  @case ('action') {
-  <ng-container
+    <ng-container [ngTemplateOutlet]="action"></ng-container>
-    *ngSwitchCase="'action'"
+  }
-    [ngTemplateOutlet]="action"
+}
-  ></ng-container>
-</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 { NgTemplateOutlet } from '@angular/common';
-import { PiBaseDataTableComponent } from '../base-data-table/base-data-table.component';
 
 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">
+@if (!label()) {
+  @if (icon()) {
     <pi-icon
-    *ngIf="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,8 +9,8 @@
     <ng-content select="pi-suffix"></ng-content>
   </ng-container>
 
+  @if (control) {
     <input
-    *ngIf="control"
       [formControl]="control"
       [placeholder]="placeholder()!"
       matInput
@@ -19,10 +19,13 @@
       currencyMask
       [options]="customCurrencyMaskConfig"
     />
+  }
 
-  <mat-error *ngIf="enableErrorMessage() && control.errors">
+  @if (enableErrorMessage() && control.errors) {
-    <ng-container *ngFor="let text of control.errors['message']">
+    <mat-error>
+      @for (text of control.errors['message']; track text) {
         {{ text | translate }}
-    </ng-container>
+      }
     </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">
+  @if (control.errors) {
-    <ng-container *ngFor="let text of control.errors['message']">
+    <mat-error>
+      @for (text of control.errors['message']; track text) {
         {{ text | translate }}
-    </ng-container>
+      }
     </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()">
+@if (control.errors && enableErrorMessage()) {
-  <ng-container *ngFor="let text of control.errors['message']">
+  <mat-error>
+    @for (text of control.errors['message']; track text) {
       {{ text | translate }}
-  </ng-container>
+    }
   </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,8 +2,8 @@
   <mat-label><ng-content select="pi-label"></ng-content></mat-label>
 
   <pi-prefix [unit]="this.unit() === '$' ? this.unit() : undefined" matPrefix>
+    @if (showIncrementButtons()) {
       <pi-icon
-      *ngIf="showIncrementButtons()"
         (click)="decrementValue()"
         [class.is-disabled]="isDecrementButtonDisabled()"
         icon="substract"
@@ -11,11 +11,12 @@
         size="small"
         color="primary"
       ></pi-icon>
+    }
   </pi-prefix>
 
   <pi-suffix [unit]="this.unit() !== '$' ? this.unit() : undefined" matSuffix>
+    @if (showIncrementButtons()) {
       <pi-icon
-      *ngIf="showIncrementButtons()"
         (click)="incrementValue()"
         [class.is-disabled]="isIncrementButtonDisabled()"
         icon="add"
@@ -23,6 +24,7 @@
         size="small"
         color="primary"
       ></pi-icon>
+    }
   </pi-suffix>
 
   <input
@@ -34,9 +36,11 @@
     [isAutofocusSelected]="isAutofocus()"
   />
 
-  <mat-error *ngIf="control.errors">
+  @if (control.errors) {
-    <ng-container *ngFor="let text of control.errors['message']">
+    <mat-error>
+      @for (text of control.errors['message']; track text) {
         {{ text | translate }}
-    </ng-container>
+      }
     </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()">
+  @if (form.errors && showError()) {
-    <ng-container *ngFor="let text of form.errors['message']">
+    <mat-error>
+      @for (text of form.errors['message']; track text) {
         {{ text | translate }}
-    </ng-container>
+      }
     </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">
+  @if (control.errors) {
-    <ng-container *ngFor="let text of control.errors['message']">
+    <mat-error>
+      @for (text of control.errors['message']; track text) {
         {{ text | translate }}
-    </ng-container>
+      }
     </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">
+  @if (control.errors) {
-    <ng-container *ngFor="let text of control.errors['message']">
+    <mat-error>
+      @for (text of control.errors['message']; track text) {
         {{ text | translate }}
-    </ng-container>
+      }
     </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">
+  @if (control.errors) {
-    <ng-container *ngFor="let text of control.errors['message']">
+    <mat-error>
+      @for (text of control.errors['message']; track text) {
         {{ text | translate }}
-    </ng-container>
+      }
     </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>
+@if (isClosable()) {
   <pi-icon
-  *ngIf="isClosable()"
     (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">
+  @if (control.errors) {
-    <ng-container *ngFor="let text of control.errors['message']">
+    <mat-error>
+      @for (text of control.errors['message']; track text) {
         {{ text | translate }}
-    </ng-container>
+      }
     </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()">
+@if (control.errors && enableErrorMessage()) {
-  <ng-container *ngFor="let text of control.errors['message']">
+  <mat-error>
+    @for (text of control.errors['message']; track text) {
       {{ text | translate }}
-  </ng-container>
+    }
   </mat-error>
-<span *ngIf="maxLength() !== 1e6"
+}
-  >{{ control.value?.length || 0 }} / {{ maxLength() }}</span
+@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
+@if (type() === 'custom') {
-  *ngIf="type() === 'custom'; else defaultIcon"
+  <img src="/assets/icons/{{ icon() }}.svg" />
-  src="/assets/icons/{{ icon() }}.svg"
+} @else {
-/>
+  <mat-icon size="size" [svgIcon]="icon()!" color="color"></mat-icon>
-
+}
-<ng-template #defaultIcon
-  ><mat-icon size="size" [svgIcon]="icon()!" color="color"></mat-icon
-></ng-template>

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"
+  @if (link()) {
+    <a [href]="link()" target="_blank"
       ><img
-      src="https://d2m4265u67f2xu.cloudfront.net/assets/images/{{ pathImg() }}"
+        src="https://d2m4265u67f2xu.cloudfront.net/assets/images/{{
+          pathImg()
+        }}"
         [alt]="pathImg()! | sanitizerAltImage"
         width="100%"
         height="auto"
     /></a>
-  <ng-template #image>
+  } @else {
     <img
       src="https://d2m4265u67f2xu.cloudfront.net/assets/images/{{ pathImg() }}"
       [alt]="pathImg()! | sanitizerAltImage"
       width="100%"
       height="auto"
     />
-  </ng-template>
+  }
 </figure>
-<aside *ngIf="hasContent()">
+@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">
+    @if (title) {
+      <h3 bold l>
         {{ title }}
-      <span pi-primary *ngIf="subtitle">{{ subtitle }}</span>
+        @if (subtitle) {
+          <span pi-primary>{{ subtitle }}</span>
+        }
       </h3>
+    }
   </span>
 
+  @if (!dialogRef.disableClose) {
     <pi-close-button
       size="small"
       [hasLabel]="false"
-    *ngIf="!dialogRef.disableClose"
       (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">
+      @if (dialogModalData.label) {
+        <pi-headline-label-content>
           <span l bold>{{ dialogModalData.label }}</span>
         </pi-headline-label-content>
-      <pi-headline-description-content *ngIf="dialogModalData.description">{{
+      }
+      @if (dialogModalData.description) {
+        <pi-headline-description-content>{{
           dialogModalData.description
         }}</pi-headline-description-content>
+      }
     </pi-headline>
-    <section *ngIf="dialogModalData.template">
+    @if (dialogModalData.template) {
+      <section>
         <ng-container [ngTemplateOutlet]="dialogModalData.template">
         </ng-container>
       </section>
+    }
   </main>
   <!-- Bottom -->
-  <pi-action-wrapper
+  @if (dialogModalData.buttonText) {
-    *ngIf="dialogModalData.buttonText"
+    <pi-action-wrapper flexDirection="row" gap="s">
-    flexDirection="row"
+      @if (dialogModalData.buttonText.secondaryAction) {
-    gap="s"
+        <button (click)="secondaryAction()" [class]="buttonColorClass" pi-ghost>
-  >
-    <button
-      *ngIf="dialogModalData.buttonText.secondaryAction"
-      (click)="secondaryAction()"
-      [class]="buttonColorClass"
-      pi-ghost
-    >
           {{ dialogModalData.buttonText.secondaryAction }}
         </button>
-    <button
+      }
-      *ngIf="dialogModalData.buttonText.primaryAction"
+      @if (dialogModalData.buttonText.primaryAction) {
-      (click)="primaryAction()"
+        <button (click)="primaryAction()" [class]="buttonColorClass">
-      [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>
+  @if (title()) {
-  <small xs *ngIf="text()">{{ text() }}</small>
+    <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
+  @if (icon()) {
-    *ngIf="icon(); else button"
+    <pi-icon [icon]="icon()" [color]="iconColor" size="large"></pi-icon>
-    [icon]="icon()"
+  } @else {
-    [color]="iconColor"
-    size="large"
-  ></pi-icon>
-  <div>
-    <h5 medium m>{{ message() }}</h5>
-    <span *ngIf="description()" xs>{{ description() }}</span>
-  </div>
-</section>
-<ng-template #button>
     <button (click)="dismiss()" pi-ghost>
       {{ text() }}
     </button>
-</ng-template>
+  }
+  <div>
+    <h5 medium m>{{ message() }}</h5>
+    @if (description()) {
+      <span xs>{{ description() }}</span>
+    }
+  </div>
+</section>

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
+  @if (totalPages() < 5) {
-    *ngIf="totalPages() < 5; then defaultPaginator; else advancedPaginator"
+    @for (page of pages; track page; let i = $index) {
-  ></ng-container>
+      <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>
+} @else {
-
-<!-- Custom Panel -->
-<ng-template #customPanelTemplate>
   <!-- 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()">
+  @if (title()) {
+    <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>
       <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,8 +8,8 @@
 </mat-progress-spinner>
 
 <!-- Value  -->
+@if (appearance() === 'compact') {
   <span
-  *ngIf="appearance() === 'compact'; else defaultValue"
     [style.width]="diameter() + 'px'"
     [style.height]="diameter() + 'px'"
     [style.margin-top]="-diameter() + 'px'"
@@ -18,12 +18,12 @@
     <span>{{ value() }}</span
     ><span>%</span>
   </span>
-
+} @else {
-<!-- Value -->
-<ng-template #defaultValue>
   <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,10 +12,8 @@
   [justify]="justifyCarousel()"
   (itemChanged)="onItemChanged($event)"
 >
-  <ng-template
+  @for (option of options(); track trackByFn(i); let i = $index) {
-    pi-carousel-item
+    <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>
@@ -38,4 +36,5 @@
         </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,13 +1,11 @@
 <input hidden [formControl]="control" />
-<ng-container *ngIf="type() === 'dropdown'">
+@if (type() === 'dropdown') {
-  <ng-container
+  @if (pickedOptionType() === 'button') {
-    *ngIf="pickedOptionType() === 'button'; else pickedOptionInputTemplate"
-  >
     <fieldset (click)="onToggleDropdown()" class="pi-select-picked-option">
       <!-- Button -->
       <div>
+        @if (icon()) {
           <pi-icon
-          *ngIf="icon()"
             [icon]="icon()"
             class="pi-select-picked-option__custom-icon"
             color="primary"
@@ -16,6 +14,7 @@
             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>
+  } @else {
-  <ng-template #pickedOptionInputTemplate>
+    @switch (appearance()) {
-    <ng-container [ngSwitch]="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,18 +101,16 @@
             ></pi-icon>
           </div>
         </fieldset>
-      </ng-container>
+      }
-    </ng-container>
+    }
-  </ng-template>
+  }
-</ng-container>
+}
 
 <!-- Options menu -->
 <nav class="pi-select-options-menu">
   <!-- Select All Options -->
-  <fieldset
+  @if (hasSelectAllOptions()) {
-    *ngIf="hasSelectAllOptions()"
+    <fieldset class="pi-select-options-menu__select-all">
-    class="pi-select-options-menu__select-all"
-  >
       <mat-checkbox
         pi-dynamic-color
         [color]="color()"
@@ -122,15 +122,14 @@
         {{ selectAllLabel() }}
       </label>
     </fieldset>
+  }
 
-  <header
+  @if (pickedOptionType() === 'button') {
-    *ngIf="pickedOptionType() === 'button'"
+    <header class="pi-select-options-menu__picked-option">
-    class="pi-select-options-menu__picked-option"
-  >
       <!-- Only visible in a header of  Button -->
 
+      @if (icon()) {
         <pi-icon
-      *ngIf="icon()"
           [icon]="icon()"
           class="pi-select-options-menu-picked-option__custom-icon"
           [color]="color()"
@@ -138,6 +137,7 @@
           pi-disabled
           [isDisabled]="disabled"
         ></pi-icon>
+      }
 
       <span class="pi-select-options-menu-picked-option__placeholder">{{
         (selectedOptionsNames?.join(', ') | truncate: 33) ||
@@ -154,12 +154,11 @@
         size="small"
       ></pi-icon>
     </header>
+  }
   <!-- List of options -->
   <div class="pi-select-options-menu__options">
-    <span
+    @for (option of options(); track option; let i = $index) {
-      *ngFor="let option of options(); index as i"
+      <span (click)="onSelectOption(option)">
-      (click)="onSelectOption(option)"
-    >
         <!-- Default options template menu for static data -->
         <ng-template #defaultOption>
           <pi-select-option
@@ -179,12 +178,17 @@
         >
         </ng-container>
       </span>
+    }
   </div>
 
-  <footer *ngIf="type() === 'dropdown'">
+  @if (type() === 'dropdown') {
+    <footer>
       <span>
-      <button (click)="onClickReset()" pi-ghost pi-primary w100>Borrar</button>
+        <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 {
+import { NgTemplateOutlet } from '@angular/common';
-  NgIf,
-  NgSwitch,
-  NgSwitchCase,
-  NgTemplateOutlet,
-  NgFor,
-} 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,9 +1,9 @@
-<ng-container [ngSwitch]="type()">
+@switch (type()) {
   <!-- Column single -->
-  <ng-container *ngSwitchCase="'single'">
+  @case ('single') {
     <div>
+      @if (hasRadio()) {
         <pi-radio-button
-        *ngIf="hasRadio()"
           class="pi-select-option__radio-button"
           size="x-small"
           icon="bullet"
@@ -11,23 +11,28 @@
           [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()">{{
+        @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">{{
+    @if (initials()) {
+      <span class="pi-select-option__initials">{{
         initials() | translate
       }}</span>
-    <mat-icon *ngIf="icon()" [svgIcon]="icon()!" [color]="color()"></mat-icon>
+    }
-  </ng-container>
+    @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">{{
+    @if (initials()) {
+      <span class="pi-select-option__initials">{{
         initials() | translate
       }}</span>
+    }
+    @if (icon()) {
       <mat-icon
         class="pi-select-option__icon"
-      *ngIf="icon()"
         [svgIcon]="icon()!"
         [color]="color()"
       ></mat-icon>
-  </ng-container>
+    }
-
+  }
   <!-- Flex wrap (No Picked Option) -->
-  <ng-container *ngSwitchCase="'flex-wrap'">
+  @case ('flex-wrap') {
+    @if (icon()) {
       <mat-icon
-      *ngIf="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()">{{
+    @if (initials()) {
+      <span class="pi-select-option__initials">{{
         initials() | translate
       }}</span>
+    }
+    @if (hasRadio()) {
       <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>
+  }
+}

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: [
+  imports: [PiRadioButtonComponent, MatIcon, MatCheckbox, TranslatePipe],
-    NgSwitch,
-    NgSwitchCase,
-    NgIf,
-    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'">
+@if (type() === 'dropdown') {
-  <ng-container
+  @if (pickedOptionType() === 'button') {
-    *ngIf="pickedOptionType() === 'button'; else pickedOptionInputTemplate"
-  >
     <fieldset class="pi-select-picked-option">
       <!-- Input field -->
       <div>
@@ -18,11 +16,10 @@
         size="small"
       ></pi-icon>
     </fieldset>
-  </ng-container>
+  } @else {
-  <ng-template #pickedOptionInputTemplate>
+    @switch (appearance()) {
-    <ng-container [ngSwitch]="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,20 +88,18 @@
             ></pi-icon>
           </div>
         </fieldset>
-      </ng-container>
+      }
-    </ng-container>
+    }
-  </ng-template>
+  }
-</ng-container>
+}
 
 <!-- Options menu -->
 <nav class="pi-select-options-menu">
-  <header
+  @if (pickedOptionType() === 'button') {
-    *ngIf="pickedOptionType() === 'button'"
+    <header class="pi-select-options-menu__picked-option">
-    class="pi-select-options-menu__picked-option"
-  >
       <!-- Only visible in a header of  Button -->
+      @if (icon()) {
         <pi-icon
-      *ngIf="icon()"
           [icon]="icon()"
           class="pi-select-options-menu-picked-option__custom-icon"
           color="primary"
@@ -108,6 +107,7 @@
           pi-disabled
           [isDisabled]="disabled"
         ></pi-icon>
+      }
 
       <span class="pi-select-picked-option__label">{{
         selectedOption?.name || label() | translate
@@ -122,15 +122,14 @@
         size="small"
       ></pi-icon>
     </header>
+  }
   <!-- Add a tab component with -->
   <!-- TODO: replace for months menu -->
   <div class="pi-select-options-menu__options">
-    <span
+    @for (option of options(); track option; let i = $index) {
-      *ngFor="let option of options(); index as i"
+      <span (click)="onSelectOption(option)">
-      (click)="onSelectOption(option)"
-    >
         <!-- Default options template menu for static data -->
-      <ng-template #defaultOption>
+        <ng-template #defaultMonthOption>
           <pi-select-option
             [id]="option?.[keyIdProperty()] || option?.id"
             [label]="option?.name | translate"
@@ -144,21 +143,20 @@
         </ng-template>
         <!-- Default options template menu for server data -->
         <ng-container
-        [ngTemplateOutlet]="optionTemplateRef() || defaultOption"
+          [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
+    @for (option of options(); track option; let i = $index) {
-      *ngFor="let option of options(); index as i"
+      <span (click)="onSelectOption(option)">
-      (click)="onSelectOption(option)"
-    >
         <!-- Default options template menu for static data -->
-      <ng-template #defaultOption>
+        <ng-template #defaultYearOption>
           <pi-select-option
             [id]="option?.[keyIdProperty()] || option?.id"
             [label]="option?.name | translate"
@@ -173,10 +171,11 @@
         </ng-template>
         <!-- Default options template menu for server data -->
         <ng-container
-        [ngTemplateOutlet]="optionTemplateRef() || defaultOption"
+          [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 {
+import { NgTemplateOutlet } from '@angular/common';
-  NgIf,
-  NgSwitch,
-  NgSwitchCase,
-  NgTemplateOutlet,
-  NgFor,
-} 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'">
+@if (type() === 'dropdown') {
-  <ng-container
+  @if (pickedOptionType() === 'button') {
-    *ngIf="pickedOptionType() === 'button'; else pickedOptionInputTemplate"
-  >
     <fieldset class="pi-select-picked-option">
       <!-- Input field -->
       <div>
@@ -18,11 +16,10 @@
         size="small"
       ></pi-icon>
     </fieldset>
-  </ng-container>
+  } @else {
-  <ng-template #pickedOptionInputTemplate>
+    @switch (appearance()) {
-    <ng-container [ngSwitch]="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,20 +88,18 @@
             ></pi-icon>
           </div>
         </fieldset>
-      </ng-container>
+      }
-    </ng-container>
+    }
-  </ng-template>
+  }
-</ng-container>
+}
 
 <!-- Options menu -->
 <nav class="pi-select-options-menu">
-  <header
+  @if (pickedOptionType() === 'button') {
-    *ngIf="pickedOptionType() === 'button'"
+    <header class="pi-select-options-menu__picked-option">
-    class="pi-select-options-menu__picked-option"
-  >
       <!-- Only visible in a header of  Button -->
+      @if (icon()) {
         <pi-icon
-      *ngIf="icon()"
           [icon]="icon()"
           class="pi-select-options-menu-picked-option__custom-icon"
           color="primary"
@@ -108,6 +107,7 @@
           pi-disabled
           [isDisabled]="disabled"
         ></pi-icon>
+      }
 
       <span class="pi-select-options-menu-picked-option__placeholder">{{
         placeholder() | translate
@@ -122,11 +122,10 @@
         size="small"
       ></pi-icon>
     </header>
+  }
   <div class="pi-select-options-menu__options">
-    <span
+    @for (option of options(); track option; let i = $index) {
-      *ngFor="let option of options(); index as i"
+      <span (click)="onSelectOption(option)">
-      (click)="onSelectOption(option)"
-    >
         <!-- Default options template menu for static data -->
         <ng-template #defaultOption>
           <pi-select-option
@@ -149,5 +148,6 @@
         >
         </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 {
+import { NgTemplateOutlet } from '@angular/common';
-  NgIf,
-  NgSwitch,
-  NgSwitchCase,
-  NgTemplateOutlet,
-  NgFor,
-} 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()">
+@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,6 +1,6 @@
 <header>
+  @if (isTabWrapperOverflowing && !isSmallDevice()) {
     <pi-icon
-    *ngIf="isTabWrapperOverflowing && !isSmallDevice()"
       (click)="isTabWrapperScrolledToStart ? null : scrollTabWrapper('prev')"
       icon="chevron-back"
       [isStroked]="true"
@@ -12,32 +12,34 @@
       pi-disabled
       [isDisabled]="isTabWrapperScrolledToStart"
     ></pi-icon>
+  }
   <section #tabWrapper>
-    <ng-container *ngIf="tabButtons(); else customTabElements">
+    @if (tabButtons()) {
-      <ng-container *ngFor="let tab of tabButtons(); let i = index">
+      @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 {
-  </section>
+      @for (tab of tabElementItems(); track tab; let i = $index) {
-  <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>
+    }
+  </section>
+  @if (isTabWrapperOverflowing && !isSmallDevice()) {
     <pi-icon
-    *ngIf="isTabWrapperOverflowing && !isSmallDevice()"
       (click)="isTabWrapperScrolledToEnd ? null : scrollTabWrapper('next')"
       icon="chevron-forward"
       [isStroked]="true"
@@ -49,11 +51,12 @@
       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()
+    {{ isLongText ? (text() | slice: 0 : characterLimit()) : text() }}
-    }}<span *ngIf="isLongText && isCollapsed">...</span>
+    @if (isLongText && isCollapsed) {
+      <span>...</span>
+    }
   </span>
-  <section *ngIf="!isCollapsed">
+  @if (!isCollapsed) {
+    <section>
       {{ text() | slice: characterLimit() : text()?.length }}
     </section>
+  }
 </article>
 
-<button
+@if (isLongText) {
-  pi-ghost
+  <button pi-ghost [hasPadding]="false" (click)="alterToggle()">
-  [hasPadding]="false"
-  *ngIf="isLongText"
-  (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,10 +1,14 @@
-<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>
+  @if (label()) {
-  <ng-container [ngSwitch]="getTemplate()">
+    <label>{{ label() }}</label>
+  }
+  @switch (getTemplate()) {
     <!-- Route template -->
+    @case ('route') {
       <a
-      *ngSwitchCase="'route'"
         [routerLink]="route()"
         [routerLinkActive]="['isActive']"
         [routerLinkActiveOptions]="{ exact: true }"
@@ -13,13 +17,18 @@
       >
         {{ value() }}
       </a>
+    }
     <!-- Link template -->
-    <a *ngSwitchCase="'link'" [href]="link()" [target]="target()">
+    @case ('link') {
+      <a [href]="link()" [target]="target()">
         <span>{{ value() }}</span>
       </a>
+    }
     <!-- OnClick template -->
-    <a *ngSwitchCase="'onClick'">
+    @case ('onClick') {
+      <a>
         <span>{{ value() }}</span>
       </a>
-  </ng-container>
+    }
+  }
 </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: [
+  imports: [MatIcon, RouterLink, RouterLinkActive],
-    NgIf,
-    MatIcon,
-    NgSwitch,
-    NgSwitchCase,
-    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 @@
+@if (icon()) {
   <mat-icon
-  *ngIf="icon()"
     [svgIcon]="icon()!"
     alt="icon"
     size="size"
     [color]="iconColor()"
   ></mat-icon>
+}
 <article>
   <label>{{ label() }}</label>
-  <span *ngIf="value()">
+  @if (value()) {
+    <span>
       {{ value() }}
     </span>
+  }
 </article>