chore(dotcms-ui): use new Angular syntax #30263 (#30264)

### Parent Issue

#30263

### Proposed Changes
* Use new Angular Syntax in `DotToolbarModule`

### Checklist
- [x] Tests
- [x] Translations
- [x] Security Implications Contemplated (add notes if applicable)

### Screenshots


https://github.com/user-attachments/assets/8fb00ab9-2bca-453f-9d12-df66703eabef

core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-login-as/dot-login-as.component.html

@@ -5,7 +5,9 @@
     [actions]="dialogActions">
     <div class="login-as">
         <!--TODO: manage errors on required fields and errors messages -->
-        <p *ngIf="errorMessage" class="login-as__error-message">{{ errorMessage }}</p>
+        @if (errorMessage) {
+            <p class="login-as__error-message">{{ errorMessage }}</p>
+        }
         <form
             (ngSubmit)="doLoginAs()"
             [formGroup]="form"
@@ -29,17 +31,19 @@
                     labelPropertyName="fullName"
                     overlayWidth="300px" />
             </div>
-            <div *ngIf="needPassword" class="field">
-                <input
-                    [feedback]="false"
-                    pPassword
-                    #password
-                    formControlName="password"
-                    id="dot-login-as-password"
-                    type="password"
-                    placeholder="{{ 'loginas.input.loginas.password' | dm }}"
-                    floatingPlaceholder="false" />
-            </div>
+            @if (needPassword) {
+                <div class="field">
+                    <input
+                        [feedback]="false"
+                        pPassword
+                        #password
+                        formControlName="password"
+                        id="dot-login-as-password"
+                        type="password"
+                        placeholder="{{ 'loginas.input.loginas.password' | dm }}"
+                        floatingPlaceholder="false" />
+                </div>
+            }
         </form>
     </div>
 </dot-dialog>

core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-my-account/dot-my-account.component.html

@@ -51,12 +51,16 @@
                 type="email"
                 required />
             <small [hidden]="emailInput.valid || emailInput.pristine" class="p-invalid">
-                <span *ngIf="emailInput.errors && emailInput.errors.required">
-                    {{ getRequiredMessage('email-address' | dm) }}
-                </span>
-                <span *ngIf="emailInput.errors && emailInput.errors.pattern">
-                    {{ 'errors.email' | dm: ['email-address' | dm] }}
-                </span>
+                @if (emailInput.errors && emailInput.errors.required) {
+                    <span>
+                        {{ getRequiredMessage('email-address' | dm) }}
+                    </span>
+                }
+                @if (emailInput.errors && emailInput.errors.pattern) {
+                    <span>
+                        {{ 'errors.email' | dm: ['email-address' | dm] }}
+                    </span>
+                }
             </small>
         </div>
 
@@ -84,12 +88,11 @@
                 type="password"
                 required />
 
-            <small
-                *ngIf="confirmPasswordFailedMsg"
-                class="p-invalid"
-                data-testId="dotCurrrentPasswordFailedMsg">
-                {{ confirmPasswordFailedMsg }}
-            </small>
+            @if (confirmPasswordFailedMsg) {
+                <small class="p-invalid" data-testId="dotCurrrentPasswordFailedMsg">
+                    {{ confirmPasswordFailedMsg }}
+                </small>
+            }
         </div>
         <div class="field">
             <p-checkbox
@@ -110,12 +113,11 @@
                 name="newPassword"
                 type="password" />
 
-            <small
-                *ngIf="newPasswordFailedMsg"
-                class="p-invalid"
-                data-testId="dotSavePasswordFailedMsg">
-                {{ newPasswordFailedMsg }}
-            </small>
+            @if (newPasswordFailedMsg) {
+                <small class="p-invalid" data-testId="dotSavePasswordFailedMsg">
+                    {{ newPasswordFailedMsg }}
+                </small>
+            }
         </div>
         <div class="field">
             <label for="dot-my-account-confirm-new-password-input">

core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.html

@@ -1,4 +1,6 @@
-<div *ngIf="showMask()" class="dot-mask" data-testId="dot-mask"></div>
+@if (showMask()) {
+    <div class="dot-mask" data-testId="dot-mask"></div>
+}
 <p-overlayPanel
     (onHide)="hideDialog()"
     #toolbarAnnouncements
@@ -11,7 +13,9 @@ <h5 class="announcements__title">{{ 'announcements' | dm }}</h5>
                 <li
                     [class.announcements__list-item--active]="!item.hasBeenRead"
                     class="announcements__list-item">
-                    <span *ngIf="!item.hasBeenRead" class="announcements__badge"></span>
+                    @if (!item.hasBeenRead) {
+                        <span class="announcements__badge"></span>
+                    }
                     <span
                         [ngClass]="typesIcons[item.type | lowercase] || typesIcons['important']"
                         class="announcements__image pi"></span>

core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-announcements/dot-toolbar-announcements.component.ts

@@ -1,4 +1,4 @@
-import { NgClass, NgForOf, CommonModule } from '@angular/common';
+import { NgClass, CommonModule } from '@angular/common';
 import {
     Component,
     EventEmitter,
@@ -31,7 +31,7 @@ import { DotMessagePipe } from '@dotcms/ui';
     templateUrl: './dot-toolbar-announcements.component.html',
     styleUrls: ['./dot-toolbar-announcements.component.scss'],
     standalone: true,
-    imports: [NgForOf, NgClass, DotMessagePipe, RouterLink, CommonModule, OverlayPanelModule],
+    imports: [NgClass, DotMessagePipe, RouterLink, CommonModule, OverlayPanelModule],
     providers: [AnnouncementsStore]
 })
 export class DotToolbarAnnouncementsComponent implements OnInit, OnChanges {

core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-notifications/components/dot-notifications/dot-notifications-item.component.html

@@ -4,13 +4,14 @@
         <div class="notification-item__content">
             <p class="notification-item__message" id="{{ 'notification-item-message-' + data.id }}">
                 {{ data.notificationData.message }}
-                <a
-                    *ngIf="showLinkAction"
-                    [href]="data.notificationData.actions[0].action"
-                    class="notification-item__link"
-                    id="{{ 'notification-item-link-action' + data.id }}">
-                    {{ data.notificationData.actions[0].text }}
-                </a>
+                @if (showLinkAction) {
+                    <a
+                        [href]="data.notificationData.actions[0].action"
+                        class="notification-item__link"
+                        id="{{ 'notification-item-link-action' + data.id }}">
+                        {{ data.notificationData.actions[0].text }}
+                    </a>
+                }
                 <dot-custom-time
                     id="{{ 'notification-item-date-' + data.id }}"
                     time="{{ data.timeSent }}"></dot-custom-time>

core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-notifications/components/dot-notifications/dot-notifications-list.component.html

@@ -1,6 +1,7 @@
 <ul class="dot-notifications-list">
-    <dot-notifications-item
-        *ngFor="let notification of notifications"
-        (clear)="onClearNotification($event)"
-        [data]="notification"></dot-notifications-item>
+    @for (notification of notifications; track notification) {
+        <dot-notifications-item
+            (clear)="onClearNotification($event)"
+            [data]="notification"></dot-notifications-item>
+    }
 </ul>

core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/components/dot-toolbar-notifications/dot-toolbar-notifications.component.html

@@ -4,21 +4,19 @@
         [class.dot-toolbar-notifications__button-active]="activeAnnouncements"
         icon="pi pi-megaphone"
         styleClass="p-button-rounded p-button-text"></p-button>
-    <span
-        *ngIf="showUnreadAnnouncement()"
-        class="dot-toolbar__badge"
-        id="dot-toolbar-notifications-badge"></span>
+    @if (showUnreadAnnouncement()) {
+        <span class="dot-toolbar__badge" id="dot-toolbar-notifications-badge"></span>
+    }
 
     <dot-toolbar-announcements
         (hideMenu)="markAnnocumentsAsRead()"
         [showUnreadAnnouncement]="showUnreadAnnouncement()"
         #toolbarAnnouncements />
 </ng-container>
 <div class="toolbar-notifications__container">
-    <span
-        *ngIf="notificationsUnreadCount"
-        class="dot-toolbar__badge"
-        id="dot-toolbar-notifications-badge"></span>
+    @if (notificationsUnreadCount) {
+        <span class="dot-toolbar__badge" id="dot-toolbar-notifications-badge"></span>
+    }
     <dot-dropdown-component
         (shutdown)="iframeOverlayService.hide()"
         (wasOpen)="iframeOverlayService.show()"
@@ -32,37 +30,41 @@
                 <h3 class="toolbar-notifications__title" id="dot-toolbar-notifications-title">
                     {{ 'notifications_title' | dm }}
                 </h3>
-                <p-button
-                    *ngIf="notifications.length"
-                    (click)="dismissAllNotifications()"
-                    id="dot-toolbar-notifications-button-dismiss-all"
-                    label="{{ 'notifications_clear_all' | dm }}"
-                    icon="pi pi-trash"
-                    styleClass="p-button-rounded p-button-text p-button-sm p-button-primary"></p-button>
-            </div>
-            <div *ngIf="!notifications.length" class="dot-toolbar-notifications__empty">
-                <span class="dot-toolbar-notifications__empty-title">
-                    {{ 'notifications_no_notifications_title' | dm }}
-                </span>
-                <span class="dot-toolbar-notifications__empty-info">
-                    {{ 'notifications_no_notifications' | dm }}
-                </span>
+                @if (notifications.length) {
+                    <p-button
+                        (click)="dismissAllNotifications()"
+                        id="dot-toolbar-notifications-button-dismiss-all"
+                        label="{{ 'notifications_clear_all' | dm }}"
+                        icon="pi pi-trash"
+                        styleClass="p-button-rounded p-button-text p-button-sm p-button-primary"></p-button>
+                }
             </div>
+            @if (!notifications.length) {
+                <div class="dot-toolbar-notifications__empty">
+                    <span class="dot-toolbar-notifications__empty-title">
+                        {{ 'notifications_no_notifications_title' | dm }}
+                    </span>
+                    <span class="dot-toolbar-notifications__empty-info">
+                        {{ 'notifications_no_notifications' | dm }}
+                    </span>
+                </div>
+            }
             <div class="toolbar-notifications__content" id="dot-toolbar-notifications-content">
                 <dot-notifications-list
                     (dismissNotification)="onDismissNotification($event)"
                     [notifications]="notifications"
                     id="dot-notifications-list"></dot-notifications-list>
             </div>
             <div class="toolbar-notifications__footer" id="dot-toolbar-notifications-footer">
-                <button
-                    *ngIf="existsMoreToLoad"
-                    (click)="loadMore()"
-                    class="p-button-outlined"
-                    id="dot-toolbar-notifications-button-load-more"
-                    ripple
-                    pButton
-                    label="{{ 'notifications_load_more' | dm }}"></button>
+                @if (existsMoreToLoad) {
+                    <button
+                        (click)="loadMore()"
+                        class="p-button-outlined"
+                        id="dot-toolbar-notifications-button-load-more"
+                        ripple
+                        pButton
+                        label="{{ 'notifications_load_more' | dm }}"></button>
+                }
             </div>
         </div>
     </dot-dropdown-component>

core-web/apps/dotcms-ui/src/app/view/components/dot-toolbar/dot-toolbar.component.html

@@ -15,11 +15,14 @@
                 [class.toolbar__logo-wrapper--collapsed]="dotNavigationService.collapsed$ | async"
                 [class.toolbar__logo-wrapper--whitelabel]="logo$ | async"
                 class="toolbar__logo-wrapper">
-                <span
-                    *ngIf="logo$ | async as logo; else toolbarLogo"
-                    [ngStyle]="{ 'background-image': logo }"
-                    class="toolbar__logo--whitelabel"></span>
-                <ng-template #toolbarLogo><span class="toolbar__logo"></span></ng-template>
+                @let logo = logo$ | async;
+                @if (logo) {
+                    <span
+                        [ngStyle]="{ 'background-image': logo }"
+                        class="toolbar__logo--whitelabel"></span>
+                } @else {
+                    <span class="toolbar__logo"></span>
+                }
                 <span class="toolbar__logo-bg"></span>
             </div>
         </div>