From 7212cb80a80e848b4a28347910c0ee658fd76125 Mon Sep 17 00:00:00 2001
From: Nicolas Molina Monroy <hi@nicobytes.com>
Date: Mon, 19 Aug 2024 16:40:08 -0400
Subject: [PATCH] chore(edit-content): use the new angular syntax (#29626)

### Parent Issue
https://github.com/dotCMS/core/issues/29625

### Task
Using the command `nx g @angular/core:control-flow `to migrate to the
new Angular syntax

### Proposed Objective
Use the new Angular syntax to improve performance and code
maintainability.

### Checklist
- [x] Tests
- [x] Translations
- [x] Security Implications Contemplated (add notes if applicable)
---
 .../content/dot-edit-content.component.ts     |   4 +-
 ...t-content-aside-information.component.html |  30 +--
 .../dot-edit-content-aside.component.ts       |   8 +-
 .../dot-edit-content-form.component.html      |  60 +++---
 .../src/lib/edit-content.shell.component.html |   1 -
 .../src/lib/edit-content.shell.component.ts   |   5 +-
 .../edit-content.layout.component.html        |  48 ++---
 .../edit-content.layout.component.ts          |   4 +-
 ...ot-binary-field-url-mode.component.spec.ts |   2 +-
 .../dot-binary-field-url-mode.component.ts    |   6 +-
 ...edit-content-calendar-field.component.html |   2 +-
 ...t-edit-content-calendar-field.component.ts |   3 +-
 ...-category-field-list-skeleton.component.ts |   3 +-
 ...ot-category-field-search-list.component.ts |   2 -
 .../dot-category-field-search.component.ts    |   3 +-
 .../dot-category-field-selected.component.ts  |   2 -
 .../dot-table-skeleton.component.html         |   4 +-
 .../dot-table-skeleton.component.ts           |   3 +-
 ...edit-content-checkbox-field.component.html |  15 +-
 ...t-edit-content-checkbox-field.component.ts |   3 +-
 ...t-edit-content-custom-field.component.html |  11 +-
 ...dot-edit-content-custom-field.component.ts |   4 +-
 .../componentes/treeselect.component.ts       | 179 ++++++++++--------
 ...ot-edit-content-radio-field.component.html |  15 +-
 .../dot-edit-content-radio-field.component.ts |   3 +-
 25 files changed, 212 insertions(+), 208 deletions(-)
 delete mode 100644 core-web/libs/edit-content/src/lib/edit-content.shell.component.html

diff --git a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/dot-edit-content.component.ts b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/dot-edit-content.component.ts
index e3a3f2f83a56..4484bebc6876 100644
--- a/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/dot-edit-content.component.ts
+++ b/core-web/apps/dotcms-ui/src/app/portlets/dot-edit-page/content/dot-edit-content.component.ts
@@ -2,7 +2,7 @@ import { fromEvent, merge, Observable, of, Subject } from 'rxjs';
 
 import { Component, ElementRef, NgZone, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser';
-import { ActivatedRoute, NavigationEnd, NavigationStart, Router } from '@angular/router';
+import { ActivatedRoute, NavigationEnd, Router } from '@angular/router';
 
 import { DialogService } from 'primeng/dynamicdialog';
 
@@ -194,7 +194,7 @@ browse from the page internal links
                 takeUntil(this.destroy$),
                 filter((event) => event instanceof NavigationEnd)
             )
-            .subscribe((_event: NavigationStart) => {
+            .subscribe(() => {
                 this.getExperimentResolverData();
             });
 
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/components/dot-content-aside-information/dot-content-aside-information.component.html b/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/components/dot-content-aside-information/dot-content-aside-information.component.html
index 15356991f411..3567c36a0454 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/components/dot-content-aside-information/dot-content-aside-information.component.html
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/components/dot-content-aside-information/dot-content-aside-information.component.html
@@ -1,16 +1,16 @@
 <div class="content-aside__information">
     <div class="content-aside__status">
-        <p-chip
-            *ngIf="contentlet | contentletStatus as status"
-            [styleClass]="'p-chip-sm ' + status.classes"
-            [label]="status.label" />
-        <dot-copy-button
-            *ngIf="contentlet?.inode as inode"
-            [copy]="inode"
-            [tooltipText]="'ID: ' + inode"
-            [label]="'ID: ' + (inode | slice: -10)"
-            data-testId="inode"
-            aria-label="Copy ID" />
+        @if (contentlet | contentletStatus; as status) {
+            <p-chip [styleClass]="'p-chip-sm ' + status.classes" [label]="status.label" />
+        }
+        @if (contentlet?.inode; as inode) {
+            <dot-copy-button
+                [copy]="inode"
+                [tooltipText]="'ID: ' + inode"
+                [label]="'ID: ' + (inode | slice: -10)"
+                data-testId="inode"
+                aria-label="Copy ID" />
+        }
     </div>
     <div class="content-aside__metadata">
         <a
@@ -45,9 +45,11 @@
                         data-testId="publish-history"
                         aria-label="Publish History">
                         <span class="content-history__title">{{ 'Published' | dm }}</span>
-                        <span *ngIf="contentlet?.publishUserName" class="content-history__author">
-                            {{ contentlet?.publishUserName }}
-                        </span>
+                        @if (contentlet?.publishUserName) {
+                            <span class="content-history__author">
+                                {{ contentlet?.publishUserName }}
+                            </span>
+                        }
                         <span class="content-history__date">
                             {{ contentlet?.publishDate | dotRelativeDate: 'MM/dd/yyyy' : null }}
                         </span>
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.ts b/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.ts
index c6d3764824ce..cb22bd647cde 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.ts
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-aside/dot-edit-content-aside.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input } from '@angular/core';
 
 import { DotCMSContentType, DotCMSContentlet } from '@dotcms/dotcms-models';
@@ -13,12 +12,7 @@ import { DotContentAsideWorkflowComponent } from './components/dot-content-aside
     templateUrl: './dot-edit-content-aside.component.html',
     styleUrls: ['./dot-edit-content-aside.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
-    imports: [
-        CommonModule,
-        DotMessagePipe,
-        DotContentAsideInformationComponent,
-        DotContentAsideWorkflowComponent
-    ]
+    imports: [DotMessagePipe, DotContentAsideInformationComponent, DotContentAsideWorkflowComponent]
 })
 export class DotEditContentAsideComponent {
     @Input() contentlet!: DotCMSContentlet;
diff --git a/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.html b/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.html
index 98db75e9a5ca..a03abfbc7ebe 100644
--- a/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.html
+++ b/core-web/libs/edit-content/src/lib/components/dot-edit-content-form/dot-edit-content-form.component.html
@@ -1,28 +1,34 @@
-<form *ngIf="form" [formGroup]="form" class="p-fluid">
-    <ng-container *ngIf="areMultipleTabs; else singleForm">
-        <p-tabView [scrollable]="true" data-testId="edit-content-multiple-tabs">
-            <p-tabPanel *ngFor="let tab of tabs" [header]="tab.title">
-                <ng-container *ngTemplateOutlet="tabTemplate; context: { tab: tab }" />
-            </p-tabPanel>
-        </p-tabView>
-    </ng-container>
-
-    <ng-template #singleForm>
-        <ng-container *ngTemplateOutlet="tabTemplate; context: { tab: tabs[0] }" />
-    </ng-template>
-
-    <ng-template #tabTemplate let-tab="tab">
-        <div class="form__layout">
-            <div *ngFor="let row of tab.layout" class="row" data-testId="row">
-                <div *ngFor="let column of row.columns" class="column" data-testId="column">
-                    <dot-edit-content-field
-                        *ngFor="let field of column.fields"
-                        [contentType]="formData.contentType.variable"
-                        [contentlet]="formData.contentlet"
-                        [field]="field"
-                        data-testId="field" />
-                </div>
+@if (form) {
+    <form [formGroup]="form" class="p-fluid">
+        @if (areMultipleTabs) {
+            <p-tabView [scrollable]="true" data-testId="edit-content-multiple-tabs">
+                @for (tab of tabs; track tab) {
+                    <p-tabPanel [header]="tab.title">
+                        <ng-container *ngTemplateOutlet="tabTemplate; context: { tab: tab }" />
+                    </p-tabPanel>
+                }
+            </p-tabView>
+        } @else {
+            <ng-container *ngTemplateOutlet="tabTemplate; context: { tab: tabs[0] }" />
+        }
+        <ng-template #tabTemplate let-tab="tab">
+            <div class="form__layout">
+                @for (row of tab.layout; track row) {
+                    <div class="row" data-testId="row">
+                        @for (column of row.columns; track column) {
+                            <div class="column" data-testId="column">
+                                @for (field of column.fields; track field) {
+                                    <dot-edit-content-field
+                                        [contentType]="formData.contentType.variable"
+                                        [contentlet]="formData.contentlet"
+                                        [field]="field"
+                                        data-testId="field" />
+                                }
+                            </div>
+                        }
+                    </div>
+                }
             </div>
-        </div>
-    </ng-template>
-</form>
+        </ng-template>
+    </form>
+}
diff --git a/core-web/libs/edit-content/src/lib/edit-content.shell.component.html b/core-web/libs/edit-content/src/lib/edit-content.shell.component.html
deleted file mode 100644
index 0680b43f9c6a..000000000000
--- a/core-web/libs/edit-content/src/lib/edit-content.shell.component.html
+++ /dev/null
@@ -1 +0,0 @@
-<router-outlet></router-outlet>
diff --git a/core-web/libs/edit-content/src/lib/edit-content.shell.component.ts b/core-web/libs/edit-content/src/lib/edit-content.shell.component.ts
index 7fa0e9de2fe3..9ffab13c2ba9 100644
--- a/core-web/libs/edit-content/src/lib/edit-content.shell.component.ts
+++ b/core-web/libs/edit-content/src/lib/edit-content.shell.component.ts
@@ -1,12 +1,11 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterModule } from '@angular/router';
 
 @Component({
     selector: 'dot-edit-content',
     standalone: true,
-    imports: [CommonModule, RouterModule],
-    templateUrl: './edit-content.shell.component.html',
+    imports: [RouterModule],
+    template: '<router-outlet />',
     styleUrls: ['./edit-content.shell.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush
 })
diff --git a/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.html b/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.html
index 3a45cc62bbea..dcf7eb6bcb1a 100644
--- a/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.html
+++ b/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.html
@@ -1,24 +1,24 @@
-<ng-container *ngIf="vm$ | async as vm; else noContent">
-    <p-messages
-        *ngIf="vm?.contentType?.metadata?.[featuredFlagContentKEY]"
-        class="topBar"
-        styleClass="p-message-border-y"
-        severity="success"
-        data-testId="topBar">
-        <ng-template pTemplate>
-            <i class="pi pi-info-circle"></i>
-            <div>
-                <span [innerHTML]="('edit.content.layout.beta.message' | dm) + ' '"></span>
-                <a
-                    [routerLink]="'/content-types-angular/edit/' + vm.contentType.variable"
-                    data-testId="content-type">
-                    {{ 'edit.content.layout.beta.message.switch' | dm }}
-                </a>
-                <span>{{ ' ' }}{{ 'edit.content.layout.beta.message.needed' | dm }}</span>
-            </div>
-        </ng-template>
-    </p-messages>
-
+@if (vm$ | async; as vm) {
+    @if (vm?.contentType?.metadata?.[featuredFlagContentKEY]) {
+        <p-messages
+            class="topBar"
+            styleClass="p-message-border-y"
+            severity="success"
+            data-testId="topBar">
+            <ng-template pTemplate>
+                <i class="pi pi-info-circle"></i>
+                <div>
+                    <span [innerHTML]="('edit.content.layout.beta.message' | dm) + ' '"></span>
+                    <a
+                        [routerLink]="'/content-types-angular/edit/' + vm.contentType.variable"
+                        data-testId="content-type">
+                        {{ 'edit.content.layout.beta.message.switch' | dm }}
+                    </a>
+                    <span>{{ ' ' }}{{ 'edit.content.layout.beta.message.needed' | dm }}</span>
+                </div>
+            </ng-template>
+        </p-messages>
+    }
     <dot-edit-content-toolbar
         (actionFired)="
             fireWorkflowAction({
@@ -35,8 +35,8 @@
         [contentlet]="vm.contentlet"
         [contentType]="vm.contentType"
         class="sidebar" />
-</ng-container>
-
-<ng-template #noContent>{{ 'edit.content.layout.no.content.to.show ' | dm }}</ng-template>
+} @else {
+    {{ 'edit.content.layout.no.content.to.show ' | dm }}
+}
 
 <p-toast></p-toast>
diff --git a/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.ts b/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.ts
index 7eec5b524838..f7b4fa69169c 100644
--- a/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.ts
+++ b/core-web/libs/edit-content/src/lib/feature/edit-content/edit-content.layout.component.ts
@@ -1,6 +1,6 @@
 import { Observable, forkJoin, of } from 'rxjs';
 
-import { AsyncPipe, JsonPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { ChangeDetectionStrategy, Component, OnInit, inject } from '@angular/core';
 import { ActivatedRoute, RouterLink } from '@angular/router';
 
@@ -31,8 +31,6 @@ import { DotEditContentService } from '../../services/dot-edit-content.service';
     selector: 'dot-edit-content-form-layout',
     standalone: true,
     imports: [
-        NgIf,
-        JsonPipe,
         AsyncPipe,
         DotMessagePipe,
         ButtonModule,
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.spec.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.spec.ts
index 40125e6f7cd9..d28bc249a453 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.spec.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.spec.ts
@@ -141,7 +141,7 @@ describe('DotBinaryFieldUrlModeComponent', () => {
 
     describe('template', () => {
         it('should show error message when url is invalid', () => {
-            const input = spectator.query(byTestId('url-input')) as HTMLInputElement;
+            const input = spectator.query<HTMLInputElement>(byTestId('url-input'));
 
             input.focus(); // to trigger touched
             input.value = 'Not a url'; // to trigger invalid
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.ts
index 157f94443e84..be2f2cecb424 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-binary-field/components/dot-binary-field-url-mode/dot-binary-field-url-mode.component.ts
@@ -1,6 +1,6 @@
 import { Subject } from 'rxjs';
 
-import { CommonModule } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -34,13 +34,13 @@ import { DotBinaryFieldValidatorService } from '../../service/dot-binary-field-v
     selector: 'dot-binary-field-url-mode',
     standalone: true,
     imports: [
-        CommonModule,
         FormsModule,
         ReactiveFormsModule,
         ButtonModule,
         InputTextModule,
         DotMessagePipe,
-        DotFieldValidationMessageComponent
+        DotFieldValidationMessageComponent,
+        AsyncPipe
     ],
     providers: [DotBinaryFieldUrlModeStore],
     templateUrl: './dot-binary-field-url-mode.component.html',
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.html
index 0f4647dc1693..0cb192c08e01 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.html
@@ -6,4 +6,4 @@
     [inputId]="field.variable"
     [attr.data-testId]="field.variable"
     [showIcon]="true"
-    [icon]="calendarOptions[field.fieldType].icon"></p-calendar>
+    [icon]="calendarOptions[field.fieldType].icon" />
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.ts
index bccffd3b71e4..eaa3b060f6f7 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-calendar-field/dot-edit-content-calendar-field.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, inject } from '@angular/core';
 import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 
@@ -11,7 +10,7 @@ import { CALENDAR_OPTIONS_PER_TYPE } from './utils';
 @Component({
     selector: 'dot-edit-content-calendar-field',
     standalone: true,
-    imports: [CommonModule, CalendarModule, ReactiveFormsModule],
+    imports: [CalendarModule, ReactiveFormsModule],
     templateUrl: 'dot-edit-content-calendar-field.component.html',
     styleUrls: ['./dot-edit-content-calendar-field.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-list-skeleton/dot-category-field-list-skeleton.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-list-skeleton/dot-category-field-list-skeleton.component.ts
index 7c9ece11580e..21bab2062c8b 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-list-skeleton/dot-category-field-list-skeleton.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-list-skeleton/dot-category-field-list-skeleton.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 import { SkeletonModule } from 'primeng/skeleton';
@@ -6,7 +5,7 @@ import { SkeletonModule } from 'primeng/skeleton';
 @Component({
     selector: 'dot-category-field-list-skeleton',
     standalone: true,
-    imports: [CommonModule, SkeletonModule],
+    imports: [SkeletonModule],
     template: `
         <ul class="m-0 p-1 list-none fadein animation-duration-500">
             @for (_ of $rows(); track $index) {
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.ts
index 79ae508a05de..598912e3cd50 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search-list/dot-category-field-search-list.component.ts
@@ -1,6 +1,5 @@
 import { Subject } from 'rxjs';
 
-import { CommonModule } from '@angular/common';
 import {
     AfterViewInit,
     ChangeDetectionStrategy,
@@ -42,7 +41,6 @@ import { DotTableSkeletonComponent } from '../dot-table-skeleton/dot-table-skele
     selector: 'dot-category-field-search-list',
     standalone: true,
     imports: [
-        CommonModule,
         TableModule,
         SkeletonModule,
         DotTableSkeletonComponent,
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.ts
index e0ed112814cf..03952b256893 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-search/dot-category-field-search.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, EventEmitter, input, Output } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, ReactiveFormsModule } from '@angular/forms';
@@ -18,7 +17,7 @@ const MINIMUM_CHARACTERS = 3;
 @Component({
     selector: 'dot-category-field-search',
     standalone: true,
-    imports: [CommonModule, DotMessagePipe, InputTextModule, ReactiveFormsModule],
+    imports: [DotMessagePipe, InputTextModule, ReactiveFormsModule],
     templateUrl: './dot-category-field-search.component.html',
     styleUrl: './dot-category-field-search.component.scss',
     changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.ts
index 09aad2fd0689..e27dbe389480 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-category-field-selected/dot-category-field-selected.component.ts
@@ -1,5 +1,4 @@
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, EventEmitter, input, Output } from '@angular/core';
 
 import { ButtonModule } from 'primeng/button';
@@ -21,7 +20,6 @@ import { DotCategoryFieldSearchListComponent } from '../dot-category-field-searc
     selector: 'dot-category-field-selected',
     standalone: true,
     imports: [
-        CommonModule,
         ButtonModule,
         DotMessagePipe,
         DotCategoryFieldSearchListComponent,
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.html
index 7b1343515842..6c81c0f5b7a6 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.html
@@ -16,9 +16,9 @@
             @for (col of columns; track $index) {
                 <td>
                     @if (col === '') {
-                        <p-skeleton size="1rem" styleClass="mr-1"></p-skeleton>
+                        <p-skeleton size="1rem" styleClass="mr-1" />
                     } @else {
-                        <p-skeleton></p-skeleton>
+                        <p-skeleton />
                     }
                 </td>
             }
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.ts
index 0d64e9c33987..2ed4a221e75d 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-category-field/components/dot-table-skeleton/dot-table-skeleton.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, computed, input } from '@angular/core';
 
 import { SkeletonModule } from 'primeng/skeleton';
@@ -12,7 +11,7 @@ import { TableModule } from 'primeng/table';
 @Component({
     selector: 'dot-table-skeleton',
     standalone: true,
-    imports: [CommonModule, SkeletonModule, TableModule],
+    imports: [SkeletonModule, TableModule],
     templateUrl: './dot-table-skeleton.component.html',
     styleUrl: './dot-table-skeleton.component.scss',
     changeDetection: ChangeDetectionStrategy.OnPush
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component.html
index d0ff576bcf44..da908d6f2fc9 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component.html
@@ -1,7 +1,8 @@
-<p-checkbox
-    *ngFor="let option of options; let i = index"
-    [name]="field.variable"
-    [formControl]="formControl"
-    [value]="option.value"
-    [label]="option.label"
-    [inputId]="option.value + i"></p-checkbox>
+@for (option of options; track $index) {
+    <p-checkbox
+        [name]="field.variable"
+        [formControl]="formControl"
+        [value]="option.value"
+        [label]="option.label"
+        [inputId]="option.value + $index"></p-checkbox>
+}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component.ts
index 26076974f710..c8a345e94948 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-checkbox-field/dot-edit-content-checkbox-field.component.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, OnInit, inject } from '@angular/core';
 import { ControlContainer, FormControl, FormsModule, ReactiveFormsModule } from '@angular/forms';
 
@@ -10,7 +9,7 @@ import { getSingleSelectableFieldOptions } from '../../utils/functions.util';
 @Component({
     selector: 'dot-edit-content-checkbox-field',
     standalone: true,
-    imports: [NgFor, CheckboxModule, ReactiveFormsModule, FormsModule],
+    imports: [CheckboxModule, ReactiveFormsModule, FormsModule],
     templateUrl: './dot-edit-content-checkbox-field.component.html',
     styleUrls: ['./dot-edit-content-checkbox-field.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component.html
index a48d47f757f5..622ec49c91d1 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component.html
@@ -9,8 +9,9 @@
     data-testId="iframe"
     frameborder="0"></iframe>
 
-<p-button
-    *ngIf="isFullscreen"
-    (click)="isFullscreen = false"
-    icon="pi pi-times"
-    styleClass="p-button-rounded p-button-text" />
+@if (isFullscreen) {
+    <p-button
+        (click)="isFullscreen = false"
+        icon="pi pi-times"
+        styleClass="p-button-rounded p-button-text" />
+}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component.ts
index a7ca67d4464d..7bfe0b860563 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-custom-field/dot-edit-content-custom-field.component.ts
@@ -1,4 +1,4 @@
-import { NgClass, NgIf, NgStyle } from '@angular/common';
+import { NgClass, NgStyle } from '@angular/common';
 import {
     ChangeDetectionStrategy,
     Component,
@@ -22,7 +22,7 @@ import { WINDOW } from '@dotcms/utils';
 @Component({
     selector: 'dot-edit-content-custom-field',
     standalone: true,
-    imports: [SafeUrlPipe, NgStyle, NgClass, DotIconModule, NgIf, ButtonModule],
+    imports: [SafeUrlPipe, NgStyle, NgClass, DotIconModule, ButtonModule],
     templateUrl: './dot-edit-content-custom-field.component.html',
     styleUrls: ['./dot-edit-content-custom-field.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/componentes/treeselect.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/componentes/treeselect.component.ts
index 42b916a0a0e7..20b79944c17c 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/componentes/treeselect.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-host-folder-field/componentes/treeselect.component.ts
@@ -80,47 +80,49 @@ export const TREESELECT_VALUE_ACCESSOR = {
             </div>
             <div class="p-treeselect-label-container">
                 <div [ngClass]="labelClass()" [class]="labelStyleClass" [ngStyle]="labelStyle">
-                    <ng-container *ngIf="valueTemplate; else defaultValueTemplate">
+                    @if (valueTemplate) {
                         <ng-container
                             *ngTemplateOutlet="
                                 valueTemplate;
                                 context: { $implicit: value, placeholder: placeholder }
                             "></ng-container>
-                    </ng-container>
-                    <ng-template #defaultValueTemplate>
-                        <ng-container *ngIf="display === 'comma'; else chipsValueTemplate">
+                    } @else {
+                        @if (display === 'comma') {
                             {{ label || 'empty' }}
-                        </ng-container>
-                        <ng-template #chipsValueTemplate>
-                            <div *ngFor="let node of value" class="p-treeselect-token">
-                                <span class="p-treeselect-token-label">{{ node.label }}</span>
-                            </div>
-                            <ng-container *ngIf="emptyValue">
+                        } @else {
+                            @for (node of value; track node) {
+                                <div class="p-treeselect-token">
+                                    <span class="p-treeselect-token-label">{{ node.label }}</span>
+                                </div>
+                            }
+                            @if (emptyValue) {
                                 {{ placeholder || 'empty' }}
-                            </ng-container>
-                        </ng-template>
-                    </ng-template>
+                            }
+                        }
+                    }
                 </div>
-                <ng-container *ngIf="checkValue() && !disabled && showClear">
-                    <TimesIcon
-                        *ngIf="!clearIconTemplate"
-                        (click)="clear($event)"
-                        [styleClass]="'p-treeselect-clear-icon'" />
-                    <span
-                        *ngIf="clearIconTemplate"
-                        (click)="clear($event)"
-                        class="p-treeselect-clear-icon">
-                        <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
-                    </span>
-                </ng-container>
+                @if (checkValue() && !disabled && showClear) {
+                    @if (!clearIconTemplate) {
+                        <TimesIcon
+                            (click)="clear($event)"
+                            [styleClass]="'p-treeselect-clear-icon'" />
+                    }
+                    @if (clearIconTemplate) {
+                        <span (click)="clear($event)" class="p-treeselect-clear-icon">
+                            <ng-template *ngTemplateOutlet="clearIconTemplate"></ng-template>
+                        </span>
+                    }
+                }
             </div>
             <div class="p-treeselect-trigger">
-                <ChevronDownIcon
-                    *ngIf="!triggerIconTemplate"
-                    [styleClass]="'p-treeselect-trigger-icon'" />
-                <span *ngIf="triggerIconTemplate" class="p-treeselect-trigger-icon">
-                    <ng-template *ngTemplateOutlet="triggerIconTemplate"></ng-template>
-                </span>
+                @if (!triggerIconTemplate) {
+                    <ChevronDownIcon [styleClass]="'p-treeselect-trigger-icon'" />
+                }
+                @if (triggerIconTemplate) {
+                    <span class="p-treeselect-trigger-icon">
+                        <ng-template *ngTemplateOutlet="triggerIconTemplate"></ng-template>
+                    </span>
+                }
             </div>
             <p-overlay
                 (onAnimationStart)="onOverlayAnimationStart($event)"
@@ -145,35 +147,43 @@ export const TREESELECT_VALUE_ACCESSOR = {
                                 headerTemplate;
                                 context: { $implicit: value, options: options }
                             "></ng-container>
-                        <div *ngIf="filter" class="p-treeselect-header">
-                            <div class="p-treeselect-filter-container">
-                                <input
-                                    (keydown.enter)="$event.preventDefault()"
-                                    (input)="onFilterInput($event)"
-                                    [attr.placeholder]="filterPlaceholder"
-                                    [value]="filterValue"
-                                    #filter
-                                    type="text"
-                                    autocomplete="off"
-                                    class="p-treeselect-filter p-inputtext p-component" />
-                                <SearchIcon
-                                    *ngIf="!filterIconTemplate"
-                                    [styleClass]="'p-treeselect-filter-icon'" />
-                                <span *ngIf="filterIconTemplate" class="p-treeselect-filter-icon">
-                                    <ng-template
-                                        *ngTemplateOutlet="filterIconTemplate"></ng-template>
-                                </span>
+                        @if (filter) {
+                            <div class="p-treeselect-header">
+                                <div class="p-treeselect-filter-container">
+                                    <input
+                                        (keydown.enter)="$event.preventDefault()"
+                                        (input)="onFilterInput($event)"
+                                        [attr.placeholder]="filterPlaceholder"
+                                        [value]="filterValue"
+                                        #filter
+                                        type="text"
+                                        autocomplete="off"
+                                        class="p-treeselect-filter p-inputtext p-component" />
+                                    @if (!filterIconTemplate) {
+                                        <SearchIcon [styleClass]="'p-treeselect-filter-icon'" />
+                                    }
+                                    @if (filterIconTemplate) {
+                                        <span class="p-treeselect-filter-icon">
+                                            <ng-template
+                                                *ngTemplateOutlet="
+                                                    filterIconTemplate
+                                                "></ng-template>
+                                        </span>
+                                    }
+                                </div>
+                                <button (click)="hide()" class="p-treeselect-close p-link">
+                                    @if (!closeIconTemplate) {
+                                        <TimesIcon [styleClass]="'p-treeselect-filter-icon'" />
+                                    }
+                                    @if (closeIconTemplate) {
+                                        <span class="p-treeselect-filter-icon">
+                                            <ng-template
+                                                *ngTemplateOutlet="closeIconTemplate"></ng-template>
+                                        </span>
+                                    }
+                                </button>
                             </div>
-                            <button (click)="hide()" class="p-treeselect-close p-link">
-                                <TimesIcon
-                                    *ngIf="!closeIconTemplate"
-                                    [styleClass]="'p-treeselect-filter-icon'" />
-                                <span *ngIf="closeIconTemplate" class="p-treeselect-filter-icon">
-                                    <ng-template
-                                        *ngTemplateOutlet="closeIconTemplate"></ng-template>
-                                </span>
-                            </button>
-                        </div>
+                        }
                         <div
                             [ngStyle]="{ 'max-height': scrollHeight }"
                             class="p-treeselect-items-wrapper">
@@ -202,34 +212,37 @@ export const TREESELECT_VALUE_ACCESSOR = {
                                 [lazy]="true"
                                 [loading]="loading"
                                 #tree>
-                                <ng-container *ngIf="emptyTemplate">
+                                @if (emptyTemplate) {
                                     <ng-template pTemplate="empty">
                                         <ng-container
                                             *ngTemplateOutlet="emptyTemplate"></ng-container>
                                     </ng-template>
-                                </ng-container>
-                                <ng-template
-                                    *ngIf="itemTogglerIconTemplate"
-                                    pTemplate="togglericon"
-                                    let-expanded>
-                                    <ng-container
-                                        *ngTemplateOutlet="
-                                            itemTogglerIconTemplate;
-                                            context: { $implicit: expanded }
-                                        "></ng-container>
-                                </ng-template>
-                                <ng-template
-                                    *ngIf="itemCheckboxIconTemplate"
-                                    pTemplate="checkboxicon">
-                                    <ng-template
-                                        *ngTemplateOutlet="itemCheckboxIconTemplate"></ng-template>
-                                </ng-template>
-                                <ng-template
-                                    *ngIf="itemLoadingIconTemplate"
-                                    pTemplate="loadingicon">
-                                    <ng-container
-                                        *ngTemplateOutlet="itemLoadingIconTemplate"></ng-container>
-                                </ng-template>
+                                }
+                                @if (itemTogglerIconTemplate; as expanded) {
+                                    <ng-template pTemplate="togglericon" let-expanded>
+                                        <ng-container
+                                            *ngTemplateOutlet="
+                                                itemTogglerIconTemplate;
+                                                context: { $implicit: expanded }
+                                            "></ng-container>
+                                    </ng-template>
+                                }
+                                @if (itemCheckboxIconTemplate) {
+                                    <ng-template pTemplate="checkboxicon">
+                                        <ng-template
+                                            *ngTemplateOutlet="
+                                                itemCheckboxIconTemplate
+                                            "></ng-template>
+                                    </ng-template>
+                                }
+                                @if (itemLoadingIconTemplate) {
+                                    <ng-template pTemplate="loadingicon">
+                                        <ng-container
+                                            *ngTemplateOutlet="
+                                                itemLoadingIconTemplate
+                                            "></ng-container>
+                                    </ng-template>
+                                }
                             </p-tree>
                         </div>
                         <ng-container
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-radio-field/dot-edit-content-radio-field.component.html b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-radio-field/dot-edit-content-radio-field.component.html
index 0e5d7c885072..38d78d3bfe48 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-radio-field/dot-edit-content-radio-field.component.html
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-radio-field/dot-edit-content-radio-field.component.html
@@ -1,8 +1,9 @@
 <!-- TODO: Investigate how to control a repeated option value -->
-<p-radioButton
-    *ngFor="let option of options; let i = index"
-    [inputId]="field.variable + i"
-    [name]="field.variable"
-    [value]="option.value"
-    [label]="option.label"
-    [formControlName]="field.variable" />
+@for (option of options; track option; let i = $index) {
+    <p-radioButton
+        [inputId]="field.variable + i"
+        [name]="field.variable"
+        [value]="option.value"
+        [label]="option.label"
+        [formControlName]="field.variable" />
+}
diff --git a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-radio-field/dot-edit-content-radio-field.component.ts b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-radio-field/dot-edit-content-radio-field.component.ts
index 3a970a9f9c6a..bb748cce9779 100644
--- a/core-web/libs/edit-content/src/lib/fields/dot-edit-content-radio-field/dot-edit-content-radio-field.component.ts
+++ b/core-web/libs/edit-content/src/lib/fields/dot-edit-content-radio-field/dot-edit-content-radio-field.component.ts
@@ -1,4 +1,3 @@
-import { NgFor } from '@angular/common';
 import { ChangeDetectionStrategy, Component, Input, OnInit, inject } from '@angular/core';
 import { ControlContainer, ReactiveFormsModule } from '@angular/forms';
 
@@ -12,7 +11,7 @@ import { getSingleSelectableFieldOptions } from '../../utils/functions.util';
 @Component({
     selector: 'dot-edit-content-radio-field',
     standalone: true,
-    imports: [NgFor, RadioButtonModule, ReactiveFormsModule, DotFieldRequiredDirective],
+    imports: [RadioButtonModule, ReactiveFormsModule, DotFieldRequiredDirective],
     templateUrl: './dot-edit-content-radio-field.component.html',
     styleUrls: ['./dot-edit-content-radio-field.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,