diff --git a/projects/templates/src/lib/components/po-modal-password-recovery/po-modal-password-recovery.component.html b/projects/templates/src/lib/components/po-modal-password-recovery/po-modal-password-recovery.component.html
index e1a7175094..0bed89b5cb 100644
--- a/projects/templates/src/lib/components/po-modal-password-recovery/po-modal-password-recovery.component.html
+++ b/projects/templates/src/lib/components/po-modal-password-recovery/po-modal-password-recovery.component.html
@@ -2,117 +2,134 @@
   #recoveryModal
   p-hide-close
   p-size="auto"
-  [ngSwitch]="modalType"
   [p-components-size]="componentsSize"
   [p-primary-action]="primaryAction"
   [p-secondary-action]="secondaryAction"
   [p-title]="modalTitle"
 >
   <div class="po-modal-password-recovery-wrapper">
-    <div *ngSwitchCase="'email'" class="po-modal-password-recovery-content po-row">
-      <div class="po-modal-password-recovery-text po-md-12 po-mb-1">
-        {{ emailModalPhrases.firstPhrase }}
-      </div>
-      <div class="po-mb-2 po-md-12">
-        <form #emailForm="ngForm">
-          <div *ngIf="modalPasswordRecoveryTypeAll">
-            <po-radio-group
-              name="type"
-              [(ngModel)]="chosenTypeFormOption"
-              [p-options]="typeFormOptions"
-              [p-size]="componentsSize"
-              (p-change)="getInputType($event)"
-            >
-            </po-radio-group>
+    @switch (modalType) {
+      @case ('email') {
+        <div class="po-modal-password-recovery-content po-row">
+          <div class="po-modal-password-recovery-text po-md-12 po-mb-1">
+            {{ emailModalPhrases.firstPhrase }}
           </div>
+          <div class="po-mb-2 po-md-12">
+            <form #emailForm="ngForm">
+              @if (modalPasswordRecoveryTypeAll) {
+                <div>
+                  <po-radio-group
+                    name="type"
+                    [(ngModel)]="chosenTypeFormOption"
+                    [p-options]="typeFormOptions"
+                    [p-size]="componentsSize"
+                    (p-change)="getInputType($event)"
+                  >
+                  </po-radio-group>
+                </div>
+              }
 
-          <div class="po-mt-1">
-            <po-email
-              *ngIf="type === 'email' || type === 'all'"
-              name="email"
-              [(ngModel)]="email"
-              p-required
-              [p-label]="literals.insertEmail"
-              [p-size]="componentsSize"
-              (p-change-model)="formModelChangesCheck(emailForm)"
-            >
-            </po-email>
+              <div class="po-mt-1">
+                @if (type === 'email' || type === 'all') {
+                  <po-email
+                    name="email"
+                    [(ngModel)]="email"
+                    p-required
+                    [p-label]="literals.insertEmail"
+                    [p-size]="componentsSize"
+                    (p-change-model)="formModelChangesCheck(emailForm)"
+                  >
+                  </po-email>
+                }
 
-            <po-input
-              *ngIf="type === 'sms'"
-              name="sms"
-              [(ngModel)]="phone"
-              p-icon="ICON_TELEPHONE"
-              p-required
-              [p-label]="literals.insertPhone"
-              [p-mask]="phoneMask"
-              [p-maxlength]="maxLength"
-              [p-minlength]="minLength"
-              [p-size]="componentsSize"
-              (p-change-model)="formModelChangesCheck(emailForm)"
-            >
-            </po-input>
-          </div>
+                @if (type === 'sms') {
+                  <po-input
+                    name="sms"
+                    [(ngModel)]="phone"
+                    p-icon="ICON_TELEPHONE"
+                    p-required
+                    [p-label]="literals.insertPhone"
+                    [p-mask]="phoneMask"
+                    [p-maxlength]="maxLength"
+                    [p-minlength]="minLength"
+                    [p-size]="componentsSize"
+                    (p-change-model)="formModelChangesCheck(emailForm)"
+                  >
+                  </po-input>
+                }
+              </div>
 
-          <div class="po-field-container-bottom po-field-container-error-container">
-            <po-modal-password-recovery-error-message
-              *ngIf="invalidEmail && control.dirty"
-              [p-text]="type === 'sms' ? literals.phoneErrorMessagePhrase : literals.emailErrorMessagePhrase"
-            >
-            </po-modal-password-recovery-error-message>
+              <div class="po-field-container-bottom po-field-container-error-container">
+                @if (invalidEmail && control.dirty) {
+                  <po-modal-password-recovery-error-message
+                    [p-text]="type === 'sms' ? literals.phoneErrorMessagePhrase : literals.emailErrorMessagePhrase"
+                  >
+                  </po-modal-password-recovery-error-message>
+                }
+              </div>
+            </form>
+          </div>
+          <div class="po-modal-password-recovery-text po-md-12">
+            {{ emailModalPhrases.secondPhrase }}
+            @if (contactEmail) {
+              <span>
+                {{ literals.prepositionIn }}
+                <a class="po-modal-password-recovery-link" href="mailto:{{ contactEmail }}" target="_self">
+                  {{ contactEmail }}
+                </a>
+              </span>
+            }
+            {{ endpoint }}
           </div>
-        </form>
-      </div>
-      <div class="po-modal-password-recovery-text po-md-12">
-        {{ emailModalPhrases.secondPhrase }}
-        <span *ngIf="contactEmail">
-          {{ literals.prepositionIn }}
-          <a class="po-modal-password-recovery-link" href="mailto:{{ contactEmail }}" target="_self">
-            {{ contactEmail }}
-          </a>
-        </span>
-        {{ endpoint }}
-      </div>
-    </div>
+        </div>
+      }
 
-    <div #smsCodeModal *ngSwitchCase="'smsCode'" class="po-modal-password-recovery-content po-row">
-      <div class="po-modal-password-recovery-text po-md-12 po-mb-1">{{ literals.sentSmsCodePhrase }}</div>
-      <div class="po-mb-2 po-md-12">
-        <form #smsCodeForm="ngForm">
-          <po-input
-            name="sms"
-            [(ngModel)]="smsCode"
-            p-maxlength="11"
-            p-minlength="11"
-            p-required
-            [p-label]="literals.insertCode"
-            [p-mask]="codeMask"
-            [p-size]="componentsSize"
-            (p-change-model)="formModelChangesCheck(smsCodeForm)"
-          >
-          </po-input>
-          <div class="po-field-container-bottom po-field-container-error-container">
-            <po-modal-password-recovery-error-message
-              *ngIf="invalidEmail"
-              [p-text]="smsCodeErrorMessage || this.literals.smsCodeErrorMessagePhrase"
-            >
-            </po-modal-password-recovery-error-message>
-            <po-modal-password-recovery-error-message *ngIf="showCustomCodeError" [p-text]="codeError">
-            </po-modal-password-recovery-error-message>
+      @case ('smsCode') {
+        <div #smsCodeModal class="po-modal-password-recovery-content po-row">
+          <div class="po-modal-password-recovery-text po-md-12 po-mb-1">{{ literals.sentSmsCodePhrase }}</div>
+          <div class="po-mb-2 po-md-12">
+            <form #smsCodeForm="ngForm">
+              <po-input
+                name="sms"
+                [(ngModel)]="smsCode"
+                p-maxlength="11"
+                p-minlength="11"
+                p-required
+                [p-label]="literals.insertCode"
+                [p-mask]="codeMask"
+                [p-size]="componentsSize"
+                (p-change-model)="formModelChangesCheck(smsCodeForm)"
+              >
+              </po-input>
+              <div class="po-field-container-bottom po-field-container-error-container">
+                @if (invalidEmail) {
+                  <po-modal-password-recovery-error-message
+                    [p-text]="smsCodeErrorMessage || this.literals.smsCodeErrorMessagePhrase"
+                  >
+                  </po-modal-password-recovery-error-message>
+                }
+                @if (showCustomCodeError) {
+                  <po-modal-password-recovery-error-message [p-text]="codeError">
+                  </po-modal-password-recovery-error-message>
+                }
+              </div>
+            </form>
           </div>
-        </form>
-      </div>
-      <div class="po-modal-password-recovery-text po-md-12">
-        {{ literals.sendAgainPhrase }}
-        <span class="po-modal-password-recovery-link" (click)="resendSmsCode()">{{ literals.sendAgain }}</span>
-      </div>
-    </div>
+          <div class="po-modal-password-recovery-text po-md-12">
+            {{ literals.sendAgainPhrase }}
+            <span class="po-modal-password-recovery-link" (click)="resendSmsCode()">{{ literals.sendAgain }}</span>
+          </div>
+        </div>
+      }
 
-    <div #confirmationModal *ngSwitchCase="'confirmation'" class="po-modal-password-recovery-content po-row">
-      <img class="po-modal-password-recovery-user-image po-mb-2" src="./assets/images/email-sent.svg" />
-      <div class="po-modal-password-recovery-text">
-        {{ literals.emailSentConfirmationPhrase }}
-      </div>
-    </div>
+      @case ('confirmation') {
+        <div #confirmationModal class="po-modal-password-recovery-content po-row">
+          <img class="po-modal-password-recovery-user-image po-mb-2" src="./assets/images/email-sent.svg" />
+          <div class="po-modal-password-recovery-text">
+            {{ literals.emailSentConfirmationPhrase }}
+          </div>
+        </div>
+      }
+    }
   </div>
 </po-modal>
diff --git a/projects/ui/src/lib/components/po-calendar/po-calendar-wrapper/po-calendar-wrapper.component.html b/projects/ui/src/lib/components/po-calendar/po-calendar-wrapper/po-calendar-wrapper.component.html
index b32d0d9041..0d0a96b575 100644
--- a/projects/ui/src/lib/components/po-calendar/po-calendar-wrapper/po-calendar-wrapper.component.html
+++ b/projects/ui/src/lib/components/po-calendar/po-calendar-wrapper/po-calendar-wrapper.component.html
@@ -1,5 +1,5 @@
 <div class="po-calendar-wrapper">
-  <ng-container *ngIf="isDayVisible">
+  @if (isDayVisible) {
     <po-calendar-header
       [p-hide-previous]="isEndPart"
       [p-hide-next]="isStartPart && !responsive"
@@ -9,39 +9,41 @@
       <span class="po-clickable po-mr-1" (click)="selectDisplayMode('month')">{{ displayMonth }}</span>
       <span class="po-clickable" (click)="selectDisplayMode('year')">{{ displayYear }}</span>
     </po-calendar-header>
-
     <div class="po-calendar-content">
       <div class="po-calendar-labels">
-        <div class="po-calendar-label" *ngFor="let weekDay of displayWeekDays">
-          {{ weekDay }}
-        </div>
+        @for (weekDay of displayWeekDays; track weekDay) {
+          <div class="po-calendar-label">
+            {{ weekDay }}
+          </div>
+        }
       </div>
-
       <div class="po-calendar-content-list-day">
-        <div
-          *ngFor="let day of displayDays"
-          class="po-calendar-day"
-          [ngClass]="getDayBackgroundColor(day)"
-          (click)="onSelectDate(day)"
-          (mouseenter)="onMouseEnter(day)"
-          (mouseleave)="onMouseLeave()"
-          attr-calendar
-        >
-          <span *ngIf="day !== 0" [ngClass]="getDayForegroundColor(day)">
-            {{ day.getDate() }}
-          </span>
-        </div>
+        @for (day of displayDays; track day) {
+          <div
+            class="po-calendar-day"
+            [ngClass]="getDayBackgroundColor($any(day))"
+            (click)="onSelectDate($any(day))"
+            (mouseenter)="onMouseEnter(day)"
+            (mouseleave)="onMouseLeave()"
+            attr-calendar
+          >
+            @if (day !== 0) {
+              <span [ngClass]="getDayForegroundColor($any(day))">
+                {{ $any(day).getDate() }}
+              </span>
+            }
+          </div>
+        }
       </div>
     </div>
-  </ng-container>
+  }
 
-  <ng-container *ngIf="isMonthVisible">
+  @if (isMonthVisible) {
     <po-calendar-header (p-previous)="updateYear(-1)" (p-next)="updateYear(1)">
       <span class="po-clickable" (click)="selectDisplayMode('year')">
         {{ displayYear }}
       </span>
     </po-calendar-header>
-
     <div class="po-calendar-content">
       <div class="po-calendar-labels">
         <div class="po-calendar-label">
@@ -49,50 +51,50 @@
         </div>
       </div>
       <div class="po-calendar-content-list-month">
-        <div
-          *ngFor="let month of displayMonths; let i = index"
-          class="po-calendar-month"
-          [ngClass]="getBackgroundColor(i, displayMonthNumber)"
-          (click)="onSelectMonth(displayYear, i)"
-          attr-calendar
-        >
-          <span [ngClass]="getForegroundColor(i, displayMonthNumber)">
-            {{ month }}
-          </span>
-        </div>
+        @for (month of displayMonths; track month; let i = $index) {
+          <div
+            class="po-calendar-month"
+            [ngClass]="getBackgroundColor(i, displayMonthNumber)"
+            (click)="onSelectMonth(displayYear, i)"
+            attr-calendar
+          >
+            <span [ngClass]="getForegroundColor(i, displayMonthNumber)">
+              {{ month }}
+            </span>
+          </div>
+        }
       </div>
     </div>
-  </ng-container>
+  }
 
-  <ng-container *ngIf="isYearVisible">
+  @if (isYearVisible) {
     <po-calendar-header (p-previous)="updateYear(-10)" (p-next)="updateYear(10)">
       {{ displayStartDecade }} - {{ displayFinalDecade }}
     </po-calendar-header>
-
     <div class="po-calendar-content">
       <div class="po-calendar-labels">
         <div class="po-calendar-label">
           {{ yearLabel }}
         </div>
       </div>
-
       <div class="po-calendar-content-list-year">
-        <div
-          *ngFor="let year of displayDecade; let i = index"
-          class="po-calendar-year"
-          [ngClass]="getBackgroundColor(year, currentYear)"
-          (click)="onSelectYear(year, displayMonthNumber)"
-          attr-calendar
-        >
-          <span [ngClass]="getForegroundColor(year, currentYear)">
-            {{ year }}
-          </span>
-        </div>
+        @for (year of displayDecade; track year; let i = $index) {
+          <div
+            class="po-calendar-year"
+            [ngClass]="getBackgroundColor(year, currentYear)"
+            (click)="onSelectYear(year, displayMonthNumber)"
+            attr-calendar
+          >
+            <span [ngClass]="getForegroundColor(year, currentYear)">
+              {{ year }}
+            </span>
+          </div>
+        }
       </div>
     </div>
-  </ng-container>
+  }
 
-  <ng-container *ngIf="!range">
+  @if (!range) {
     <div class="po-calendar-footer">
       <div class="po-calendar-footer-today">
         <button
@@ -107,5 +109,5 @@
         </button>
       </div>
     </div>
-  </ng-container>
+  }
 </div>
diff --git a/projects/ui/src/lib/components/po-context-tabs/po-context-tab-button/po-context-tab-button.component.html b/projects/ui/src/lib/components/po-context-tabs/po-context-tab-button/po-context-tab-button.component.html
index 3dd962879b..26e14e8c49 100644
--- a/projects/ui/src/lib/components/po-context-tabs/po-context-tab-button/po-context-tab-button.component.html
+++ b/projects/ui/src/lib/components/po-context-tabs/po-context-tab-button/po-context-tab-button.component.html
@@ -19,19 +19,16 @@
     <span [ngClass]="!hideClose ? 'po-context-tab-button-label' : 'po-tab-button-label'" class="po-text-ellipsis">
       {{ label }}
     </span>
-    <div
-      class="po-tab-button-content-close-icon"
-      *ngIf="!hideClose"
-      (click)="closeTab($event)"
-      (keydown)="closeTab($event)"
-    >
-      <po-icon
-        [tabIndex]="activeCloseIcon ? 0 : -1"
-        [attr.aria-label]="literals.close"
-        p-icon="ICON_CLOSE"
-        class="po-tab-button-icon-close"
-      ></po-icon>
-    </div>
+    @if (!hideClose) {
+      <div class="po-tab-button-content-close-icon" (click)="closeTab($event)" (keydown)="closeTab($event)">
+        <po-icon
+          [tabIndex]="activeCloseIcon ? 0 : -1"
+          [attr.aria-label]="literals.close"
+          p-icon="ICON_CLOSE"
+          class="po-tab-button-icon-close"
+        ></po-icon>
+      </div>
+    }
   </div>
 </div>
 <div [ngClass]="{ 'po-tab-border-active': active, 'po-tab-border-disabled': !active }"></div>
diff --git a/projects/ui/src/lib/components/po-context-tabs/po-context-tabs.component.html b/projects/ui/src/lib/components/po-context-tabs/po-context-tabs.component.html
index 844c16b486..5159ec8b42 100644
--- a/projects/ui/src/lib/components/po-context-tabs/po-context-tabs.component.html
+++ b/projects/ui/src/lib/components/po-context-tabs/po-context-tabs.component.html
@@ -1,45 +1,47 @@
 <div class="po-tabs-container">
   <div #containerTabs class="po-tabs-header">
     <div class="po-tabs-button-wrapper" role="tablist">
-      <ng-container *ngFor="let tab of tabs; trackBy: trackByFn">
-        <po-context-tab-button
-          *ngIf="!tab.removed"
-          #tabButton
-          class="po-tab-button"
-          [class.po-tab-button-aa]="size === 'small'"
-          [p-active]="tab.active"
-          [p-disabled]="tab.disabled"
-          [p-show-tooltip]="tab.showTooltip"
-          [p-hide]="tab.hide"
-          [p-id]="tab.id"
-          [hidden]="tab.hide"
-          [p-hide-close]="tab.hideClose"
-          [attr.disabled]="tab.disabled"
-          [p-label]="tab.label"
-          [p-literals]="literals"
-          [id]="tab.id"
-          (keyup.enter)="closeListbox()"
-          (p-activated)="onTabActive(tab)"
-          (p-change-state)="onTabChangeState(tab)"
-          (p-change-visible)="onChangeVisibilityTab(tab)"
-          (p-click)="selectedTab(tab)"
-          (p-close)="closeTab(tab)"
-        >
-        </po-context-tab-button>
-      </ng-container>
+      @for (tab of tabs; track trackByFn($index, tab)) {
+        @if (!tab.removed) {
+          <po-context-tab-button
+            #tabButton
+            class="po-tab-button"
+            [class.po-tab-button-aa]="size === 'small'"
+            [p-active]="tab.active"
+            [p-disabled]="tab.disabled"
+            [p-show-tooltip]="tab.showTooltip"
+            [p-hide]="tab.hide"
+            [p-id]="tab.id"
+            [hidden]="tab.hide"
+            [p-hide-close]="tab.hideClose"
+            [attr.disabled]="tab.disabled"
+            [p-label]="tab.label"
+            [p-literals]="literals"
+            [id]="tab.id"
+            (keyup.enter)="closeListbox()"
+            (p-activated)="onTabActive(tab)"
+            (p-change-state)="onTabChangeState(tab)"
+            (p-change-visible)="onChangeVisibilityTab(tab)"
+            (p-click)="selectedTab(tab)"
+            (p-close)="closeTab(tab)"
+          >
+          </po-context-tab-button>
+        }
+      }
 
-      <po-tab-dropdown
-        #tabDropdown
-        *ngIf="isShowTabDropdown"
-        class="po-tab-dropdown"
-        [class.po-tab-dropdown-device]="!tabsDefault?.length"
-        [p-label]="literals.moreTabs"
-        [p-size]="size"
-        [p-tabs]="overflowedTabs"
-        (p-change-state)="onTabChangeState($event)"
-        (p-click)="onTabActiveByDropdown($event)"
-      >
-      </po-tab-dropdown>
+      @if (isShowTabDropdown) {
+        <po-tab-dropdown
+          #tabDropdown
+          class="po-tab-dropdown"
+          [class.po-tab-dropdown-device]="!tabsDefault?.length"
+          [p-label]="literals.moreTabs"
+          [p-size]="size"
+          [p-tabs]="overflowedTabs"
+          (p-change-state)="onTabChangeState($event)"
+          (p-click)="onTabActiveByDropdown($event)"
+        >
+        </po-tab-dropdown>
+      }
     </div>
   </div>
 </div>
diff --git a/projects/ui/src/lib/components/po-context-tabs/samples/sample-po-context-tabs-business-conf/sample-po-context-tabs-business-conf.component.html b/projects/ui/src/lib/components/po-context-tabs/samples/sample-po-context-tabs-business-conf/sample-po-context-tabs-business-conf.component.html
index 5d63cfc311..801a7b9b95 100644
--- a/projects/ui/src/lib/components/po-context-tabs/samples/sample-po-context-tabs-business-conf/sample-po-context-tabs-business-conf.component.html
+++ b/projects/ui/src/lib/components/po-context-tabs/samples/sample-po-context-tabs-business-conf/sample-po-context-tabs-business-conf.component.html
@@ -1,64 +1,64 @@
 <po-page-default p-title="Check the speaker's list">
   <po-context-tabs #poTab>
-    <po-tab
-      *ngFor="let speaker of speakers"
-      p-label="{{ speaker.createdDate | date: 'MMM d' }}"
-      [p-active]="speaker.id === '1'"
-      [p-hide]="speaker.subscribe"
-    >
-      <div class="po-row po-mt-5">
-        <div class="po-offset-lg-1 po-offset-xl-1 po-lg-10">
-          <div class="po-row">
-            <div class="po-lg-8 po-mb-2">
-              <po-widget>
-                <div class="po-row">
-                  <div class="po-md-5 po-lg-4">
-                    <po-avatar p-size="xl" p-src="assets/graphics/{{ speaker.photo }}"></po-avatar>
-                  </div>
-                  <div class="po-md-7 po-lg-8">
-                    <div class="po-mb-2">
-                      <po-info p-label="Speaker" [p-value]="speaker.name"></po-info>
-                    </div>
-                    <div class="po-mb-2">
-                      <po-info class="po-mt-5" p-label="Email" [p-value]="speaker.email"> </po-info>
+    @for (speaker of speakers; track speaker) {
+      <po-tab
+        p-label="{{ speaker.createdDate | date: 'MMM d' }}"
+        [p-active]="speaker.id === '1'"
+        [p-hide]="speaker.subscribe"
+      >
+        <div class="po-row po-mt-5">
+          <div class="po-offset-lg-1 po-offset-xl-1 po-lg-10">
+            <div class="po-row">
+              <div class="po-lg-8 po-mb-2">
+                <po-widget>
+                  <div class="po-row">
+                    <div class="po-md-5 po-lg-4">
+                      <po-avatar p-size="xl" p-src="assets/graphics/{{ speaker.photo }}"></po-avatar>
                     </div>
-                    <div class="po-mb-2">
-                      <po-info class="po-mb-5" p-label="Description" [p-value]="speaker.description"> </po-info>
+                    <div class="po-md-7 po-lg-8">
+                      <div class="po-mb-2">
+                        <po-info p-label="Speaker" [p-value]="speaker.name"></po-info>
+                      </div>
+                      <div class="po-mb-2">
+                        <po-info class="po-mt-5" p-label="Email" [p-value]="speaker.email"> </po-info>
+                      </div>
+                      <div class="po-mb-2">
+                        <po-info class="po-mb-5" p-label="Description" [p-value]="speaker.description"> </po-info>
+                      </div>
                     </div>
                   </div>
-                </div>
-              </po-widget>
-            </div>
-
-            <div class="po-lg-4 po-mb-2">
-              <po-widget p-title="Subscription">
-                <div class="po-font-subtitle po-mb-2">TFace Conference Week</div>
-                <div class="po-font-text-bold po-mb-5">From 21th September until 26th setember 2018</div>
-                <hr />
-                <div class="po-row">
-                  <div class="po-md-6 po-lg-12">
-                    <span class="po-mr-1 po-font-subtitle">
-                      <po-icon p-icon="po-icon an an-calendar-dots"></po-icon>
-                    </span>
-                    <span class="po-font-text po-mb-2">{{ speaker.createdDate | date: 'MM/dd/yyyy' }}</span>
+                </po-widget>
+              </div>
+              <div class="po-lg-4 po-mb-2">
+                <po-widget p-title="Subscription">
+                  <div class="po-font-subtitle po-mb-2">TFace Conference Week</div>
+                  <div class="po-font-text-bold po-mb-5">From 21th September until 26th setember 2018</div>
+                  <hr />
+                  <div class="po-row">
+                    <div class="po-md-6 po-lg-12">
+                      <span class="po-mr-1 po-font-subtitle">
+                        <po-icon p-icon="po-icon an an-calendar-dots"></po-icon>
+                      </span>
+                      <span class="po-font-text po-mb-2">{{ speaker.createdDate | date: 'MM/dd/yyyy' }}</span>
+                    </div>
+                    <div class="po-md-6 po-lg-12">
+                      <span class="po-mr-1 po-font-subtitle">
+                        <po-icon p-icon="po-icon an an-map-pin"></po-icon>
+                      </span>
+                      <span class="po-font-text">Av. Braz Leme, 1000, Santana</span>
+                    </div>
                   </div>
-                  <div class="po-md-6 po-lg-12">
-                    <span class="po-mr-1 po-font-subtitle">
-                      <po-icon p-icon="po-icon an an-map-pin"></po-icon>
-                    </span>
-                    <span class="po-font-text">Av. Braz Leme, 1000, Santana</span>
+                  <div class="po-mt-5">
+                    <po-button class="po-mt-5" p-label="Subscription" (p-click)="confirmSubscription(speaker)">
+                    </po-button>
                   </div>
-                </div>
-                <div class="po-mt-5">
-                  <po-button class="po-mt-5" p-label="Subscription" (p-click)="confirmSubscription(speaker)">
-                  </po-button>
-                </div>
-              </po-widget>
+                </po-widget>
+              </div>
             </div>
           </div>
         </div>
-      </div>
-    </po-tab>
+      </po-tab>
+    }
   </po-context-tabs>
 
   <hr class="po-offset-lg-1 po-offset-xl-1 po-lg-10 po-mt-0" />
diff --git a/projects/ui/src/lib/components/po-context-tabs/samples/sample-po-context-tabs-labs/sample-po-context-tabs-labs.component.html b/projects/ui/src/lib/components/po-context-tabs/samples/sample-po-context-tabs-labs/sample-po-context-tabs-labs.component.html
index bca707f093..3d3ac304c5 100644
--- a/projects/ui/src/lib/components/po-context-tabs/samples/sample-po-context-tabs-labs/sample-po-context-tabs-labs.component.html
+++ b/projects/ui/src/lib/components/po-context-tabs/samples/sample-po-context-tabs-labs/sample-po-context-tabs-labs.component.html
@@ -1,16 +1,17 @@
 <po-context-tabs #poTab [p-size]="size">
-  <po-tab
-    *ngFor="let tab of tabs; let i = index"
-    [p-active]="tab.active"
-    [p-disabled]="tab.disabled"
-    [p-hide]="tab.hide"
-    [p-hide-close]="tab.hideClose"
-    [p-label]="tab.label"
-    (p-click)="onClick(tab)"
-    (p-close-tab)="onClose(tab)"
-  >
-    <div class="po-font-subtitle">Tab Content {{ i }}</div>
-  </po-tab>
+  @for (tab of tabs; track tab; let i = $index) {
+    <po-tab
+      [p-active]="tab.active"
+      [p-disabled]="tab.disabled"
+      [p-hide]="tab.hide"
+      [p-hide-close]="tab.hideClose"
+      [p-label]="tab.label"
+      (p-click)="onClick(tab)"
+      (p-close-tab)="onClose(tab)"
+    >
+      <div class="po-font-subtitle">Tab Content {{ i }}</div>
+    </po-tab>
+  }
 </po-context-tabs>
 
 <po-dynamic-form #tabsForm [p-fields]="tabsFieldsForm" [p-value]="tabs"> </po-dynamic-form>
diff --git a/projects/ui/src/lib/components/po-list-view/po-list-view.component.html b/projects/ui/src/lib/components/po-list-view/po-list-view.component.html
index 98e328c7c6..15894ee072 100644
--- a/projects/ui/src/lib/components/po-list-view/po-list-view.component.html
+++ b/projects/ui/src/lib/components/po-list-view/po-list-view.component.html
@@ -3,137 +3,153 @@
   [class.po-list-view-main-container]="!showHeader"
   [style.height.px]="height"
 >
-  <div
-    *ngIf="showHeader"
-    class="po-list-view-main-header po-pt-1 po-pb-1"
-    [class.po-list-view-main-header-aa]="componentsSize"
-  >
-    <div class="po-checkbox-group-item">
-      <div class="po-list-view-main-select">
-        <po-checkbox
-          name="selectAll"
-          [(ngModel)]="selectAll"
-          [p-label]="literals.selectAll"
-          [p-size]="componentsSize"
-          (p-change)="selectAllListItems()"
-          (click)="selectAllListItems()"
-        ></po-checkbox>
+  @if (showHeader) {
+    <div class="po-list-view-main-header po-pt-1 po-pb-1" [class.po-list-view-main-header-aa]="componentsSize">
+      <div class="po-checkbox-group-item">
+        <div class="po-list-view-main-select">
+          <po-checkbox
+            name="selectAll"
+            [(ngModel)]="selectAll"
+            [p-label]="literals.selectAll"
+            [p-size]="componentsSize"
+            (p-change)="selectAllListItems()"
+            (click)="selectAllListItems()"
+          ></po-checkbox>
+        </div>
       </div>
     </div>
-  </div>
+  }
 
   <div class="po-list-view-main-content">
-    <po-container [p-no-padding]="true" *ngIf="!hasItems()">
-      <div class="po-list-view-container-no-data po-text-center">
-        <span> {{ literals.noData }} </span>
-      </div>
-    </po-container>
+    @if (!hasItems()) {
+      <po-container [p-no-padding]="true">
+        <div class="po-list-view-container-no-data po-text-center">
+          <span> {{ literals.noData }} </span>
+        </div>
+      </po-container>
+    }
 
-    <ng-container *ngFor="let item of items; let index = index; trackBy: trackBy">
+    @for (item of items; track $index; let index = $index) {
       <po-container [p-no-padding]="true">
         <div class="po-list-view-container">
           <div class="po-list-view-header">
-            <div class="po-list-view-title" [ngSwitch]="checkTitleType(item)">
-              <div *ngIf="select" class="po-list-view-select">
-                <po-checkbox
-                  [(ngModel)]="item.$selected"
-                  name="checkbox"
-                  [p-size]="componentsSize"
-                  (p-change)="selectListItem(item)"
-                  (click)="selectListItem(item)"
-                ></po-checkbox>
-              </div>
-              <a
-                *ngSwitchCase="'externalLink'"
-                class="po-list-view-title-link"
-                target="_blank"
-                [href]="item[propertyLink]"
-                (click)="runTitleAction(item)"
-              >
-                {{ getItemTitle(item) }}
-              </a>
-              <a
-                *ngSwitchCase="'internalLink'"
-                class="po-list-view-title-link"
-                [routerLink]="item[propertyLink]"
-                (click)="runTitleAction(item)"
-              >
-                {{ getItemTitle(item) }}
-              </a>
-              <span
-                *ngSwitchCase="'noLink'"
-                class="po-list-view-title-no-link"
-                [class.po-list-view-title-link]="titleHasAction"
-                (click)="titleHasAction && runTitleAction(item)"
-              >
-                {{ getItemTitle(item) }}
-              </span>
-            </div>
+            <div class="po-list-view-title">
+              @if (select) {
+                <div class="po-list-view-select">
+                  <po-checkbox
+                    [(ngModel)]="item.$selected"
+                    name="checkbox"
+                    [p-size]="componentsSize"
+                    (p-change)="selectListItem(item)"
+                    (click)="selectListItem(item)"
+                  ></po-checkbox>
+                </div>
+              }
+              @switch (checkTitleType(item)) {
+                @case ('externalLink') {
+                  <a
+                    class="po-list-view-title-link"
+                    target="_blank"
+                    [href]="item[propertyLink]"
+                    (click)="runTitleAction(item)"
+                  >
+                    {{ getItemTitle(item) }}
+                  </a>
+                }
 
-            <div *ngIf="showButtonsActions" class="po-list-view-actions">
-              <po-button
-                *ngFor="let action of visibleActions"
-                [p-disabled]="returnBooleanValue(action, item, 'disabled')"
-                [p-icon]="action.icon"
-                [p-label]="action.label"
-                [p-danger]="action.type === 'danger'"
-                [p-size]="componentsSize"
-                (p-click)="onClickAction(action, item)"
-              >
-              </po-button>
+                @case ('internalLink') {
+                  <a class="po-list-view-title-link" [routerLink]="item[propertyLink]" (click)="runTitleAction(item)">
+                    {{ getItemTitle(item) }}
+                  </a>
+                }
+
+                @case ('noLink') {
+                  <span
+                    class="po-list-view-title-no-link"
+                    [class.po-list-view-title-link]="titleHasAction"
+                    (click)="titleHasAction && runTitleAction(item)"
+                  >
+                    {{ getItemTitle(item) }}
+                  </span>
+                }
+              }
             </div>
 
-            <div *ngIf="showPopupActions" class="po-list-view-more-actions">
-              <div #popupTarget class="po-list-view-more-icon po-clickable" (click)="togglePopup(item, popupTarget)">
-                <po-icon p-icon="ICON_MORE"></po-icon>
+            @if (showButtonsActions) {
+              <div class="po-list-view-actions">
+                <po-button
+                  *ngFor="let action of visibleActions"
+                  [p-disabled]="returnBooleanValue(action, item, 'disabled')"
+                  [p-icon]="action.icon"
+                  [p-label]="action.label"
+                  [p-danger]="action.type === 'danger'"
+                  [p-size]="componentsSize"
+                  (p-click)="onClickAction(action, item)"
+                >
+                </po-button>
+              </div>
+            }
+
+            @if (showPopupActions) {
+              <div class="po-list-view-more-actions">
+                <div #popupTarget class="po-list-view-more-icon po-clickable" (click)="togglePopup(item, popupTarget)">
+                  <po-icon p-icon="ICON_MORE"></po-icon>
+                </div>
               </div>
-            </div>
+            }
           </div>
 
-          <div *ngIf="hasContentTemplate" class="po-list-view-content">
-            <ng-template
-              [ngTemplateOutlet]="listViewContentTemplate.templateRef"
-              [ngTemplateOutletContext]="{ $implicit: item, index: index }"
-            >
-            </ng-template>
-          </div>
+          @if (hasContentTemplate) {
+            <div class="po-list-view-content">
+              <ng-template
+                [ngTemplateOutlet]="listViewContentTemplate.templateRef"
+                [ngTemplateOutletContext]="{ $implicit: item, index: index }"
+              >
+              </ng-template>
+            </div>
+          }
 
-          <div
-            @showHideDetail
-            (@showHideDetail.start)="item.$showDetail ? onAnimationEvent($event, item) : 'undefined'"
-            *ngIf="hasDetailTemplate && item.$showDetail"
-            class="po-list-view-detail"
-          >
-            <ng-template
-              [ngTemplateOutlet]="listViewDetailTemplate.templateRef"
-              [ngTemplateOutletContext]="{ $implicit: item, index: index }"
+          @if (hasDetailTemplate && item.$showDetail) {
+            <div
+              @showHideDetail
+              (@showHideDetail.start)="item.$showDetail ? onAnimationEvent($event, item) : 'undefined'"
+              class="po-list-view-detail"
             >
-            </ng-template>
-          </div>
+              <ng-template
+                [ngTemplateOutlet]="listViewDetailTemplate.templateRef"
+                [ngTemplateOutletContext]="{ $implicit: item, index: index }"
+              >
+              </ng-template>
+            </div>
+          }
         </div>
 
-        <div *ngIf="hasDetailTemplate" class="po-list-view-detail-button">
-          <po-button
-            p-kind="tertiary"
-            [p-label]="item.$showDetail ? literals.hideDetails : literals.showDetails"
-            [p-size]="componentsSize"
-            (p-click)="item.$showDetail = !item.$showDetail"
-          >
-          </po-button>
-        </div>
+        @if (hasDetailTemplate) {
+          <div class="po-list-view-detail-button">
+            <po-button
+              p-kind="tertiary"
+              [p-label]="item.$showDetail ? literals.hideDetails : literals.showDetails"
+              [p-size]="componentsSize"
+              (p-click)="item.$showDetail = !item.$showDetail"
+            >
+            </po-button>
+          </div>
+        }
       </po-container>
-    </ng-container>
+    }
   </div>
 </div>
 
-<div *ngIf="displayShowMoreButton" class="po-mb-2 po-text-center">
-  <po-button
-    [p-disabled]="showMoreDisabled"
-    [p-label]="literals.loadMoreData"
-    [p-size]="componentsSize"
-    (p-click)="onShowMore()"
-  >
-  </po-button>
-</div>
+@if (displayShowMoreButton) {
+  <div class="po-mb-2 po-text-center">
+    <po-button
+      [p-disabled]="showMoreDisabled"
+      [p-label]="literals.loadMoreData"
+      [p-size]="componentsSize"
+      (p-click)="onShowMore()"
+    >
+    </po-button>
+  </div>
+}
 
 <po-popup #popup [p-actions]="actions" [p-size]="componentsSize" [p-target]="popupTarget"> </po-popup>
diff --git a/projects/ui/src/lib/components/po-list-view/po-list-view.component.spec.ts b/projects/ui/src/lib/components/po-list-view/po-list-view.component.spec.ts
index 1a1bc0d1ef..ef9c148109 100644
--- a/projects/ui/src/lib/components/po-list-view/po-list-view.component.spec.ts
+++ b/projects/ui/src/lib/components/po-list-view/po-list-view.component.spec.ts
@@ -194,12 +194,6 @@ describe('PoListViewComponent:', () => {
       expect(component.showDetail.emit).toHaveBeenCalledWith(detail);
     });
 
-    it('trackBy: should return `index`', () => {
-      const index = 1;
-
-      expect(component.trackBy(index)).toBe(index);
-    });
-
     it('visibleActions: should be `false` if doesn`t have action.', () => {
       component.actions = undefined;
 
diff --git a/projects/ui/src/lib/components/po-list-view/po-list-view.component.ts b/projects/ui/src/lib/components/po-list-view/po-list-view.component.ts
index 271db12c21..f48f2001ca 100644
--- a/projects/ui/src/lib/components/po-list-view/po-list-view.component.ts
+++ b/projects/ui/src/lib/components/po-list-view/po-list-view.component.ts
@@ -136,10 +136,6 @@ export class PoListViewComponent extends PoListViewBaseComponent implements Afte
       : listViewAction[property];
   }
 
-  trackBy(index) {
-    return index;
-  }
-
   togglePopup(item, targetRef: HTMLElement) {
     this.popupTarget = targetRef;
     this.changeDetector.detectChanges();
diff --git a/projects/ui/src/lib/components/po-stepper/po-stepper.component.html b/projects/ui/src/lib/components/po-stepper/po-stepper.component.html
index 4b7c84f327..1d1f44c6a1 100644
--- a/projects/ui/src/lib/components/po-stepper/po-stepper.component.html
+++ b/projects/ui/src/lib/components/po-stepper/po-stepper.component.html
@@ -1,18 +1,18 @@
 <div class="po-stepper-{{ orientation }}">
   <div role="tablist" class="po-stepper-container-{{ orientation }}">
-    <ng-container *ngFor="let step of stepList; let index = index; trackBy: trackByFn">
+    @for (step of stepList; track trackByFn($any(step)); let index = $index) {
       <div class="po-stepper-step-wrapper">
-        <div
-          *ngIf="index > 0"
-          [class.po-stepper-step-bar-top]="alignCenter && isVerticalOrientation"
-          [class.po-stepper-step-dashed-border-vertical]="
-            alignCenter && isVerticalOrientation && isDashedBorderTop(step, index)
-          "
-          [style.left.px]="
-            isVerticalOrientation ? (!stepSizeCircle || stepSizeCircle === 24 ? 16 : stepSizeCircle / 2) : null
-          "
-        ></div>
-
+        @if (index > 0) {
+          <div
+            [class.po-stepper-step-bar-top]="alignCenter && isVerticalOrientation"
+            [class.po-stepper-step-dashed-border-vertical]="
+              alignCenter && isVerticalOrientation && isDashedBorderTop($any(step), index)
+            "
+            [style.left.px]="
+              isVerticalOrientation ? (!stepSizeCircle || stepSizeCircle === 24 ? 16 : stepSizeCircle / 2) : null
+            "
+          ></div>
+        }
         <po-stepper-step
           [class.po-stepper-step-position-center]="alignCenter"
           [p-align-center]="alignCenter"
@@ -28,30 +28,32 @@
           [p-step-icon-done]="iconDone"
           [p-vertical-orientation]="isVerticalOrientation"
           [p-disable-click]="disabledClick"
-          (p-activated)="onStepActive(step)"
-          (p-click)="changeStep(index, step)"
-          (p-enter)="changeStep(index, step)"
+          (p-activated)="onStepActive($any(step))"
+          (p-click)="changeStep(index, $any(step))"
+          (p-enter)="changeStep(index, $any(step))"
         >
         </po-stepper-step>
-
-        <div
-          *ngIf="index < stepList.length - 1"
-          [class.po-stepper-step-bar-bottom]="isVerticalOrientation"
-          [class.po-stepper-step-bar-bottom-center]="alignCenter && isVerticalOrientation"
-          [class.po-stepper-step-bar-right]="!isVerticalOrientation"
-          [class.po-stepper-step-bar-center]="alignCenter && !isVerticalOrientation"
-          [class.po-stepper-step-dashed-border]="!isVerticalOrientation && isDashedBorder(step, index)"
-          [class.po-stepper-step-dashed-border-vertical]="isVerticalOrientation && isDashedBorder(step, index)"
-          [style.top.px]="!isVerticalOrientation ? (stepSizeCircle === 24 ? 16 : stepSizeCircle / 2) : null"
-          [style.left.px]="
-            isVerticalOrientation ? (!stepSizeCircle || stepSizeCircle === 24 ? 16 : stepSizeCircle / 2) : null
-          "
-        ></div>
+        @if (index < stepList.length - 1) {
+          <div
+            [class.po-stepper-step-bar-bottom]="isVerticalOrientation"
+            [class.po-stepper-step-bar-bottom-center]="alignCenter && isVerticalOrientation"
+            [class.po-stepper-step-bar-right]="!isVerticalOrientation"
+            [class.po-stepper-step-bar-center]="alignCenter && !isVerticalOrientation"
+            [class.po-stepper-step-dashed-border]="!isVerticalOrientation && isDashedBorder($any(step), index)"
+            [class.po-stepper-step-dashed-border-vertical]="isVerticalOrientation && isDashedBorder($any(step), index)"
+            [style.top.px]="!isVerticalOrientation ? (stepSizeCircle === 24 ? 16 : stepSizeCircle / 2) : null"
+            [style.left.px]="
+              isVerticalOrientation ? (!stepSizeCircle || stepSizeCircle === 24 ? 16 : stepSizeCircle / 2) : null
+            "
+          ></div>
+        }
       </div>
-    </ng-container>
+    }
   </div>
 
-  <div *ngIf="usePoSteps" class="po-stepper-content">
-    <ng-content></ng-content>
-  </div>
+  @if (usePoSteps) {
+    <div class="po-stepper-content">
+      <ng-content></ng-content>
+    </div>
+  }
 </div>
diff --git a/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.component.html b/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.component.html
index 003daa589d..e128504051 100644
--- a/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.component.html
+++ b/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.component.html
@@ -1,10 +1,11 @@
-<po-table-icon
-  *ngFor="let column of icons; trackBy: trackByFunction"
-  [p-clickable]="isClickable(column)"
-  [p-color]="getColor(column)"
-  [p-disabled]="isDisabled(column)"
-  [p-icon]="getIcon(column)"
-  [p-icon-tooltip]="column.tooltip"
-  (p-click)="click(column, $event)"
->
-</po-table-icon>
+@for (column of icons; track $index) {
+  <po-table-icon
+    [p-clickable]="isClickable($any(column))"
+    [p-color]="getColor($any(column))"
+    [p-disabled]="isDisabled($any(column))"
+    [p-icon]="getIcon($any(column))"
+    [p-icon-tooltip]="$any(column).tooltip"
+    (p-click)="click($any(column), $event)"
+  >
+  </po-table-icon>
+}
diff --git a/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.component.spec.ts b/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.component.spec.ts
index 04a8727065..af94224e6a 100644
--- a/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.component.spec.ts
+++ b/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.component.spec.ts
@@ -258,13 +258,6 @@ describe('PoTableColumnIconComponent:', () => {
       expect(fakeColumnIcon.action).toBeUndefined();
     });
 
-    it('trackByFunction: should return index', () => {
-      const fakeIndex = 'teste';
-      const trackBy = component.trackByFunction(fakeIndex);
-
-      expect(trackBy).toBe(fakeIndex);
-    });
-
     it('convertToColumnIcon: should convert to columnIcon pattern if pass string', () => {
       const icon = 'po-icon-copy';
       const columnIcons: Array<PoTableColumnIcon> = [{ value: icon }];
diff --git a/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.component.ts b/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.component.ts
index 1cf6ec7b5c..84da9bbc4d 100644
--- a/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.component.ts
+++ b/projects/ui/src/lib/components/po-table/po-table-column-icon/po-table-column-icon.component.ts
@@ -67,10 +67,6 @@ export class PoTableColumnIconComponent {
     return column.disabled ? column.disabled(this.row) : false;
   }
 
-  trackByFunction(index) {
-    return index;
-  }
-
   private convertToColumnIcon(rowIcons: Array<PoTableColumnIcon> | Array<string> | string): Array<PoTableColumnIcon> {
     if (Array.isArray(rowIcons)) {
       return (<any>rowIcons).map(rowIcon => (typeof rowIcon === 'string' ? { value: rowIcon } : rowIcon));
diff --git a/projects/ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.html b/projects/ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.html
index 188c5de0ea..2075c2aa9f 100644
--- a/projects/ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.html
+++ b/projects/ui/src/lib/components/po-table/po-table-list-manager/po-table-list-manager.component.html
@@ -1,7 +1,7 @@
 @if (existedFixedItem()) {
   <section class="po-table-list-manager-section">
     <p class="po-table-list-manager-title-group-items">{{ literals.fixedColumns }}</p>
-    @for (option of checkboxGroupOptionsView; track trackByFn($index)) {
+    @for (option of checkboxGroupOptionsView; track $index) {
       @if (isFixed(option)) {
         <li
           class="po-table-list-manager-container"
@@ -16,7 +16,7 @@
 
 <section class="po-table-list-manager-section">
   <p class="po-table-list-manager-title-group-items">{{ literals.otherColumns }}</p>
-  @for (option of checkboxGroupOptionsView; track trackByFn($index)) {
+  @for (option of checkboxGroupOptionsView; track $index) {
     @if (!isFixed(option)) {
       <li class="po-table-list-manager-container" [class.po-checkbox-group-item-disabled]="option.disabled || disabled">
         @if (!isFixed(option)) {