diff --git a/core-web/libs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.html b/core-web/libs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.html
index 2a0a996889f6..eabe8a8706ba 100644
--- a/core-web/libs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.html
+++ b/core-web/libs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.html
@@ -31,10 +31,11 @@
                         formControlName="generatedText"
                         pInputTextarea></textarea>
 
-                    <dot-copy-button
-                        *ngIf="generatedText.value"
-                        [copy]="generatedText.value"
-                        customClass="p-button-rounded" />
+                    @if (generatedText.value) {
+                        <dot-copy-button
+                            [copy]="generatedText.value"
+                            customClass="p-button-rounded" />
+                    }
                 </div>
             }
             @if (vm.status === ComponentStatus.LOADING) {
diff --git a/core-web/libs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.ts b/core-web/libs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.ts
index 439efb2b6eed..9ea9722cc4ba 100644
--- a/core-web/libs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.ts
+++ b/core-web/libs/block-editor/src/lib/extensions/ai-content-prompt/ai-content-prompt.component.ts
@@ -1,6 +1,6 @@
 import { Observable } from 'rxjs';
 
-import { AsyncPipe, NgIf } from '@angular/common';
+import { AsyncPipe } from '@angular/common';
 import { Component, DestroyRef, ElementRef, inject, OnInit, ViewChild } from '@angular/core';
 import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
 import { FormControl, FormGroup, ReactiveFormsModule, Validators } from '@angular/forms';
@@ -44,7 +44,6 @@ interface AIContentForm {
         ButtonModule,
         TooltipModule,
         SkeletonModule,
-        NgIf,
         AsyncPipe,
         DotEmptyContainerComponent,
         ConfirmDialogModule,
diff --git a/core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-upload-asset/components/dot-asset-preview/dot-asset-preview.component.html b/core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-upload-asset/components/dot-asset-preview/dot-asset-preview.component.html
index a1b0701e050e..c503d40a32ad 100644
--- a/core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-upload-asset/components/dot-asset-preview/dot-asset-preview.component.html
+++ b/core-web/libs/block-editor/src/lib/extensions/asset-form/components/dot-upload-asset/components/dot-asset-preview/dot-asset-preview.component.html
@@ -1,11 +1,13 @@
-<ng-container [ngSwitch]="type">
-    <ng-container *ngSwitchCase="'image'">
+@switch (type) {
+    @case ('image') {
         <img [src]="src || file.objectURL" [alt]="file.name" />
-    </ng-container>
-    <ng-container *ngSwitchCase="'video'">
+    }
+    @case ('video') {
         <video controls preload="metadata">
             <source [src]="src || file.objectURL" />
         </video>
-    </ng-container>
-    <p *ngSwitchDefault>Select an accepted asset type</p>
-</ng-container>
+    }
+    @default {
+        <p>Select an accepted asset type</p>
+    }
+}
diff --git a/core-web/libs/block-editor/src/lib/extensions/asset-uploader/components/upload-placeholder/upload-placeholder.component.html b/core-web/libs/block-editor/src/lib/extensions/asset-uploader/components/upload-placeholder/upload-placeholder.component.html
index f986da096e85..abf8a4386998 100644
--- a/core-web/libs/block-editor/src/lib/extensions/asset-uploader/components/upload-placeholder/upload-placeholder.component.html
+++ b/core-web/libs/block-editor/src/lib/extensions/asset-uploader/components/upload-placeholder/upload-placeholder.component.html
@@ -1,20 +1,23 @@
-<ng-container [ngSwitch]="type">
-    <div *ngSwitchCase="'video'" class="placeholder-container">
-        <div class="preview-container__video">
-            <video class="video" src="" controls></video>
-        </div>
-
-        <div class="preview-container__loading">
-            <div>
-                <dot-spinner size="30px"></dot-spinner>
-                Uploading video, wait until finished.
+@switch (type) {
+    @case ('video') {
+        <div class="placeholder-container">
+            <div class="preview-container__video">
+                <video class="video" src="" controls></video>
+            </div>
+            <div class="preview-container__loading">
+                <div>
+                    <dot-spinner size="30px"></dot-spinner>
+                    Uploading video, wait until finished.
+                </div>
+                <button
+                    (click)="cancel.emit(true)"
+                    class="p-button-md p-button-outlined"
+                    pButton
+                    label="Cancel"></button>
             </div>
-            <button
-                (click)="cancel.emit(true)"
-                class="p-button-md p-button-outlined"
-                pButton
-                label="Cancel"></button>
         </div>
-    </div>
-    <span *ngSwitchDefault class="default-message">Uploading...</span>
-</ng-container>
+    }
+    @default {
+        <span class="default-message">Uploading...</span>
+    }
+}
diff --git a/core-web/libs/block-editor/src/lib/extensions/asset-uploader/components/upload-placeholder/upload-placeholder.component.ts b/core-web/libs/block-editor/src/lib/extensions/asset-uploader/components/upload-placeholder/upload-placeholder.component.ts
index 217673b01255..235c5216f66e 100644
--- a/core-web/libs/block-editor/src/lib/extensions/asset-uploader/components/upload-placeholder/upload-placeholder.component.ts
+++ b/core-web/libs/block-editor/src/lib/extensions/asset-uploader/components/upload-placeholder/upload-placeholder.component.ts
@@ -1,4 +1,3 @@
-import { CommonModule } from '@angular/common';
 import { ChangeDetectionStrategy, Component, EventEmitter, Output, Input } from '@angular/core';
 
 import { ButtonModule } from 'primeng/button';
@@ -11,7 +10,7 @@ import { DotSpinnerModule } from '@dotcms/ui';
     styleUrls: ['./upload-placeholder.component.scss'],
     changeDetection: ChangeDetectionStrategy.OnPush,
     standalone: true,
-    imports: [CommonModule, ButtonModule, DotSpinnerModule]
+    imports: [ButtonModule, DotSpinnerModule]
 })
 export class UploadPlaceholderComponent {
     @Output() cancel = new EventEmitter<boolean>();
diff --git a/core-web/libs/block-editor/src/lib/extensions/bubble-form/bubble-form.component.html b/core-web/libs/block-editor/src/lib/extensions/bubble-form/bubble-form.component.html
index 2af9b8dae17c..cb75f27513af 100644
--- a/core-web/libs/block-editor/src/lib/extensions/bubble-form/bubble-form.component.html
+++ b/core-web/libs/block-editor/src/lib/extensions/bubble-form/bubble-form.component.html
@@ -1,54 +1,57 @@
-<form *ngIf="form" (ngSubmit)="onSubmit()" [ngClass]="options?.customClass" [formGroup]="form">
-    <div *ngFor="let control of dynamicControls" [ngClass]="control.type" class="field form-row">
-        <ng-container [ngSwitch]="control.type">
-            <ng-container *ngSwitchCase="'checkbox'">
-                <p-checkbox
-                    [formControlName]="control.key"
-                    [binary]="true"
-                    [id]="control.key"></p-checkbox>
-                <label [checkIsRequiredControl]="control.key" [for]="control.key" dotFieldRequired>
-                    {{ control.label | titlecase }}
-                </label>
-            </ng-container>
-            <ng-container *ngSwitchDefault>
-                <label
-                    [ngClass]="{ 'p-label-input-required': control.required }"
-                    [for]="control.key">
-                    {{ control.label | titlecase }}
-                </label>
-                <input
-                    *ngSwitchDefault
-                    [formControlName]="control.key"
-                    [id]="control.key"
-                    [type]="control.type"
-                    [min]="control.min"
-                    [style]="{ width: '100%', fontSize: '14px', height: '40px' }"
-                    #group
-                    pInputText
-                    type="control.type" />
-            </ng-container>
-        </ng-container>
-        <span
-            *ngIf="form.controls[control.key].invalid && form.controls[control.key].dirty"
-            class="error-message">
-            This field is required
-        </span>
-    </div>
-
-    <div class="form-action">
-        <button
-            (click)="hide.emit(true)"
-            [style]="{ width: '120px' }"
-            class="p-button-outlined"
-            pButton
-            type="button"
-            label="CANCEL"></button>
-        <button
-            [disabled]="form.invalid"
-            [style]="{ padding: '11.5px 24px' }"
-            class="p-button"
-            pButton
-            type="submit"
-            label="APPLY"></button>
-    </div>
-</form>
+@if (form) {
+    <form (ngSubmit)="onSubmit()" [ngClass]="options?.customClass" [formGroup]="form">
+        @for (control of dynamicControls; track control) {
+            <div [ngClass]="control.type" class="field form-row">
+                @switch (control.type) {
+                    @case ('checkbox') {
+                        <p-checkbox
+                            [formControlName]="control.key"
+                            [binary]="true"
+                            [id]="control.key"></p-checkbox>
+                        <label
+                            [checkIsRequiredControl]="control.key"
+                            [for]="control.key"
+                            dotFieldRequired>
+                            {{ control.label | titlecase }}
+                        </label>
+                    }
+                    @default {
+                        <label
+                            [ngClass]="{ 'p-label-input-required': control.required }"
+                            [for]="control.key">
+                            {{ control.label | titlecase }}
+                        </label>
+                        <input
+                            [formControlName]="control.key"
+                            [id]="control.key"
+                            [type]="control.type"
+                            [min]="control.min"
+                            [style]="{ width: '100%', fontSize: '14px', height: '40px' }"
+                            #group
+                            pInputText
+                            type="control.type" />
+                    }
+                }
+                @if (form.controls[control.key].invalid && form.controls[control.key].dirty) {
+                    <span class="error-message">This field is required</span>
+                }
+            </div>
+        }
+        <div class="form-action">
+            <button
+                (click)="hide.emit(true)"
+                [style]="{ width: '120px' }"
+                class="p-button-outlined"
+                pButton
+                type="button"
+                label="CANCEL"></button>
+            <button
+                [disabled]="form.invalid"
+                [style]="{ padding: '11.5px 24px' }"
+                class="p-button"
+                pButton
+                type="submit"
+                label="APPLY"></button>
+        </div>
+    </form>
+}
diff --git a/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/bubble-link-form.component.html b/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/bubble-link-form.component.html
index 49c5c886d0f9..67f1f142b492 100644
--- a/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/bubble-link-form.component.html
+++ b/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/bubble-link-form.component.html
@@ -24,39 +24,44 @@
             </div>
         </div>
 
-        <hr *ngIf="showSuggestions || currentLink" class="divider" />
+        @if (showSuggestions || currentLink) {
+            <hr class="divider" />
+        }
 
-        <div *ngIf="currentLink && !showSuggestions" class="info-container">
-            <a [href]="currentLink" class="url-container" target="_blank">
-                <span [style]="{ fontSize: '32px' }" class="material-icons">language</span>
-                <span class="truncate">{{ currentLink }}</span>
-            </a>
-
-            <div class="field-checkbox">
-                <div class="checkbox-container">
-                    <p-checkbox
-                        [binary]="true"
-                        id="editor-input-checkbox"
-                        formControlName="blank"></p-checkbox>
+        @if (currentLink && !showSuggestions) {
+            <div class="info-container">
+                <a [href]="currentLink" class="url-container" target="_blank">
+                    <span [style]="{ fontSize: '32px' }" class="material-icons">language</span>
+                    <span class="truncate">{{ currentLink }}</span>
+                </a>
+                <div class="field-checkbox">
+                    <div class="checkbox-container">
+                        <p-checkbox
+                            [binary]="true"
+                            id="editor-input-checkbox"
+                            formControlName="blank"></p-checkbox>
+                    </div>
+                    <label for="editor-input-checkbox">Open link in new window</label>
                 </div>
-                <label for="editor-input-checkbox">Open link in new window</label>
             </div>
-        </div>
+        }
     </form>
 
     <!-- Suggestions -->
-    <dot-suggestion-page
-        *ngIf="showSuggestions"
-        (back)="resetForm()"
-        [items]="items"
-        [loading]="loading"
-        [title]="noResultsTitle"
-        #suggestions></dot-suggestion-page>
+    @if (showSuggestions) {
+        <dot-suggestion-page
+            (back)="resetForm()"
+            [items]="items"
+            [loading]="loading"
+            [title]="noResultsTitle"
+            #suggestions></dot-suggestion-page>
+    }
 
     <!-- Form Actions -->
-    <dot-form-actions
-        *ngIf="!showSuggestions && currentLink"
-        (hide)="hide.emit($event)"
-        (remove)="removeLink.emit($event)"
-        [link]="currentLink"></dot-form-actions>
+    @if (!showSuggestions && currentLink) {
+        <dot-form-actions
+            (hide)="hide.emit($event)"
+            (remove)="removeLink.emit($event)"
+            [link]="currentLink"></dot-form-actions>
+    }
 </div>
diff --git a/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/components/form-actions/form-actions.component.html b/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/components/form-actions/form-actions.component.html
index 760040c5956c..9204c84a7c68 100644
--- a/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/components/form-actions/form-actions.component.html
+++ b/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/components/form-actions/form-actions.component.html
@@ -1,18 +1,20 @@
-<div *ngIf="link.length">
-    <div class="form-actions">
-        <button
-            (click)="copy()"
-            [style]="{ width: '50%' }"
-            pButton
-            type="button"
-            label="COPY LINK"
-            class="p-button-outlined"></button>
-        <button
-            (click)="remove.emit(true)"
-            [style]="{ width: '50%' }"
-            pButton
-            type="button"
-            label="REMOVE LINK"
-            class="p-button-outlined p-button-danger"></button>
+@if (link.length) {
+    <div>
+        <div class="form-actions">
+            <button
+                (click)="copy()"
+                [style]="{ width: '50%' }"
+                pButton
+                type="button"
+                label="COPY LINK"
+                class="p-button-outlined"></button>
+            <button
+                (click)="remove.emit(true)"
+                [style]="{ width: '50%' }"
+                pButton
+                type="button"
+                label="REMOVE LINK"
+                class="p-button-outlined p-button-danger"></button>
+        </div>
     </div>
-</div>
+}
diff --git a/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/components/suggestion-page/suggestion-page.component.html b/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/components/suggestion-page/suggestion-page.component.html
index 2163b10fe9f5..b3f8b6e53375 100644
--- a/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/components/suggestion-page/suggestion-page.component.html
+++ b/core-web/libs/block-editor/src/lib/extensions/bubble-link-form/components/suggestion-page/suggestion-page.component.html
@@ -1,23 +1,21 @@
-<div *ngIf="items.length; else loading ? loadingBlock : emptyBlock">
-    <dot-suggestion-list #list>
-        <dot-suggestions-list-item
-            *ngFor="let item of items; let i = index"
-            [command]="item.command"
-            [index]="i"
-            [label]="item.label"
-            [url]="item.icon"
-            [data]="item.data"
-            [page]="true"></dot-suggestions-list-item>
-    </dot-suggestion-list>
-</div>
-
-<ng-template #loadingBlock>
-    <dot-suggestion-loading-list></dot-suggestion-loading-list>
-</ng-template>
-
-<ng-template #emptyBlock>
-    <dot-empty-message
-        (back)="handleBackButton()"
-        [title]="title"
-        [showBackBtn]="true"></dot-empty-message>
-</ng-template>
+@if (items.length) {
+    <div>
+        <dot-suggestion-list #list>
+            @for (item of items; track item; let i = $index) {
+                <dot-suggestions-list-item
+                    [command]="item.command"
+                    [index]="i"
+                    [label]="item.label"
+                    [url]="item.icon"
+                    [data]="item.data"
+                    [page]="true"></dot-suggestions-list-item>
+            }
+        </dot-suggestion-list>
+    </div>
+} @else {
+    @if (loading) {
+        <dot-suggestion-loading-list />
+    } @else {
+        <dot-empty-message (back)="handleBackButton()" [title]="title" [showBackBtn]="true" />
+    }
+}
diff --git a/core-web/libs/block-editor/src/lib/extensions/bubble-menu/bubble-menu.component.html b/core-web/libs/block-editor/src/lib/extensions/bubble-menu/bubble-menu.component.html
index 51ef85905c01..9d1b0a8f14c5 100644
--- a/core-web/libs/block-editor/src/lib/extensions/bubble-menu/bubble-menu.component.html
+++ b/core-web/libs/block-editor/src/lib/extensions/bubble-menu/bubble-menu.component.html
@@ -1,13 +1,15 @@
 <div (mousedown)="preventDeSelection($event)" class="bubble-menu" id="bubble-menu">
-    <ng-container *ngIf="selected">
+    @if (selected) {
         <button (click)="toggleChangeTo.emit()" class="btn-dropdown">{{ selected }}</button>
         <div class="divider"></div>
-    </ng-container>
-    <ng-container *ngFor="let item of items; let i = index">
+    }
+    @for (item of items; track item; let i = $index) {
         <dot-bubble-menu-button
             (click)="command.emit(item)"
             [active]="item.active"
             [item]="item"></dot-bubble-menu-button>
-        <div *ngIf="item.divider" class="divider"></div>
-    </ng-container>
+        @if (item.divider) {
+            <div class="divider"></div>
+        }
+    }
 </div>
diff --git a/core-web/libs/block-editor/src/lib/extensions/floating-button/floating-button.component.html b/core-web/libs/block-editor/src/lib/extensions/floating-button/floating-button.component.html
index 5f70099613a3..e58f3a9d43cd 100644
--- a/core-web/libs/block-editor/src/lib/extensions/floating-button/floating-button.component.html
+++ b/core-web/libs/block-editor/src/lib/extensions/floating-button/floating-button.component.html
@@ -1,15 +1,14 @@
-<button
-    *ngIf="label !== status.ERROR; else error"
-    (click)="byClick.emit()"
-    [disabled]="isCompleted || isLoading"
-    [icon]="isCompleted ? 'pi pi-check' : null"
-    [label]="title"
-    [loading]="isLoading"
-    [ngClass]="{ completed: isCompleted }"
-    pButton
-    iconPos="left"></button>
-
-<ng-template #error>
+@if (label !== status.ERROR) {
+    <button
+        (click)="byClick.emit()"
+        [disabled]="isCompleted || isLoading"
+        [icon]="isCompleted ? 'pi pi-check' : null"
+        [label]="title"
+        [loading]="isLoading"
+        [ngClass]="{ completed: isCompleted }"
+        pButton
+        iconPos="left"></button>
+} @else {
     <div class="alert">
         <i class="pi pi-exclamation-circle"></i>
         <span>
@@ -17,4 +16,4 @@
             <a href="https://www.dotcms.com/contact-us/">contact support</a>
         </span>
     </div>
-</ng-template>
+}
diff --git a/core-web/libs/block-editor/src/lib/shared/components/empty-message/empty-message.component.html b/core-web/libs/block-editor/src/lib/shared/components/empty-message/empty-message.component.html
index 79661bd05373..25654a20e4a6 100644
--- a/core-web/libs/block-editor/src/lib/shared/components/empty-message/empty-message.component.html
+++ b/core-web/libs/block-editor/src/lib/shared/components/empty-message/empty-message.component.html
@@ -1,10 +1,11 @@
 <p [innerHTML]="title"></p>
 
-<button
-    *ngIf="showBackBtn"
-    (mousedown)="back.emit()"
-    [style]="{ padding: '.75rem 2rem', borderRadius: '2px' }"
-    pButton
-    class="p-button-outlined"
-    label="Back"
-    type="submit"></button>
+@if (showBackBtn) {
+    <button
+        (mousedown)="back.emit()"
+        [style]="{ padding: '.75rem 2rem', borderRadius: '2px' }"
+        pButton
+        class="p-button-outlined"
+        label="Back"
+        type="submit"></button>
+}
diff --git a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html
index e02b27ad656b..8e816c0b0e30 100644
--- a/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html
+++ b/core-web/libs/block-editor/src/lib/shared/components/suggestion-list/components/suggestions-list-item/suggestions-list-item.component.html
@@ -1,24 +1,27 @@
 <div [class.dot-contentlet]="data?.contentlet" [class.page]="page" class="icon-wrapper">
-    <i *ngIf="icon; else thumbnail" class="material-icons">{{ url }}</i>
-
-    <ng-template #thumbnail>
-        <dot-contentlet-thumbnail
-            *ngIf="data?.contentlet; else image"
-            [contentlet]="data.contentlet"
-            [width]="42"
-            [height]="42"
-            [iconSize]="'42px'"></dot-contentlet-thumbnail>
-    </ng-template>
+    @if (icon) {
+        <i class="material-icons">{{ url }}</i>
+    } @else {
+        @if (data?.contentlet) {
+            <dot-contentlet-thumbnail
+                [contentlet]="data.contentlet"
+                [width]="42"
+                [height]="42"
+                [iconSize]="'42px'"></dot-contentlet-thumbnail>
+        } @else {
+            <img [src]="url" alt="" />
+        }
+    }
 </div>
 <div class="data-wrapper">
     <span>{{ label }}</span>
-    <span *ngIf="page" class="url">{{ data.contentlet.url }}</span>
-    <div *ngIf="data?.contentlet" class="state">
-        <dot-state-icon [state]="data.contentlet" size="16px"></dot-state-icon>
-        <dot-badge bordered="true">{{ data.contentlet.language | lowercase }}</dot-badge>
-    </div>
+    @if (page) {
+        <span class="url">{{ data.contentlet.url }}</span>
+    }
+    @if (data?.contentlet) {
+        <div class="state">
+            <dot-state-icon [state]="data.contentlet" size="16px"></dot-state-icon>
+            <dot-badge bordered="true">{{ data.contentlet.language | lowercase }}</dot-badge>
+        </div>
+    }
 </div>
-
-<ng-template #image>
-    <img [src]="url" alt="" />
-</ng-template>
diff --git a/core-web/libs/block-editor/src/lib/shared/components/suggestion-loading-list/suggestion-loading-list.component.html b/core-web/libs/block-editor/src/lib/shared/components/suggestion-loading-list/suggestion-loading-list.component.html
index 82b813f51f8d..bb030c6e9413 100644
--- a/core-web/libs/block-editor/src/lib/shared/components/suggestion-loading-list/suggestion-loading-list.component.html
+++ b/core-web/libs/block-editor/src/lib/shared/components/suggestion-loading-list/suggestion-loading-list.component.html
@@ -1,15 +1,17 @@
-<div *ngFor="let item of items" class="card">
-    <div class="image skeleton"></div>
-    <div class="body">
-        <div class="data-wrapper">
-            <div>
-                <span class="title skeleton"></span>
-                <span class="subtitle skeleton"></span>
-            </div>
-            <div class="state">
-                <span class="circle skeleton"></span>
-                <span class="meta skeleton"></span>
+@for (item of items; track item) {
+    <div class="card">
+        <div class="image skeleton"></div>
+        <div class="body">
+            <div class="data-wrapper">
+                <div>
+                    <span class="title skeleton"></span>
+                    <span class="subtitle skeleton"></span>
+                </div>
+                <div class="state">
+                    <span class="circle skeleton"></span>
+                    <span class="meta skeleton"></span>
+                </div>
             </div>
         </div>
     </div>
-</div>
+}
diff --git a/core-web/libs/block-editor/src/lib/shared/components/suggestions/suggestions.component.html b/core-web/libs/block-editor/src/lib/shared/components/suggestions/suggestions.component.html
index e20ca9b99b5d..a39db46d6de0 100644
--- a/core-web/libs/block-editor/src/lib/shared/components/suggestions/suggestions.component.html
+++ b/core-web/libs/block-editor/src/lib/shared/components/suggestions/suggestions.component.html
@@ -1,25 +1,30 @@
-<div *ngIf="items.length; else emptyBlock">
-    <h3 *ngIf="!!title">{{ title }}</h3>
-    <dot-suggestion-list #list>
-        <ng-container *ngFor="let item of items; let i = index">
-            <dot-suggestions-list-item
-                *ngIf="item.id !== 'divider'; else divider"
-                [command]="item.command"
-                [index]="item.tabindex || i"
-                [label]="item.label"
-                [url]="item.icon"
-                [data]="item.data"
-                [disabled]="item.disabled"></dot-suggestions-list-item>
-            <ng-template #divider>
-                <div class="divider"></div>
-            </ng-template>
-        </ng-container>
-    </dot-suggestion-list>
-</div>
-
-<ng-template #emptyBlock>
+@if (items.length) {
+    <div>
+        @if (!!title) {
+            <h3>{{ title }}</h3>
+        }
+        <dot-suggestion-list #list>
+            @for (item of items; track item; let i = $index) {
+                @if (item.id !== 'divider') {
+                    <dot-suggestions-list-item
+                        [command]="item.command"
+                        [index]="item.tabindex || i"
+                        [label]="item.label"
+                        [url]="item.icon"
+                        [data]="item.data"
+                        [disabled]="item.disabled"></dot-suggestions-list-item>
+                } @else {
+                    <div class="divider"></div>
+                }
+                <ng-template #divider>
+                    <div class="divider"></div>
+                </ng-template>
+            }
+        </dot-suggestion-list>
+    </div>
+} @else {
     <dot-empty-message
         (back)="handleBackButton()"
         [title]="noResultsMessage"
         [showBackBtn]="!isFilterActive"></dot-empty-message>
-</ng-template>
+}