diff --git a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-list/algorithm-comparison-list.component.html b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-list/algorithm-comparison-list.component.html
index 2ffb9e30..abee2f73 100644
--- a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-list/algorithm-comparison-list.component.html
+++ b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-list/algorithm-comparison-list.component.html
@@ -1,37 +1,37 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0
-   -->
+SPDX-License-Identifier: Apache-2.0
+-->
 
 <div class="items-wrapper">
-	<ng-container *ngIf="recordsDataService.records$ | async as records">
-		<mat-card class="ms-card comparison-item" *ngFor="let item of records; index as i">
-			<div class="item-wrapper">
-				<div msUseEllipsis>{{ item.recordName }}</div>
-				<div class="record-summary-buttons-wrapper">
-					<button mat-icon-button color="primary" (click)="viewRecord(item)">
-						<mat-icon fontSet="ms" fontIcon="icon-Eye" class="mat-primary"></mat-icon>
-					</button>
-					<button mat-icon-button color="primary" (click)="editRecord(i, item)">
-						<mat-icon fontSet="ms" fontIcon="icon-PencilSimple" class="mat-primary"></mat-icon>
-					</button>
-					<button mat-icon-button color="error" (click)="removeRecord(i)">
-						<mat-icon class="mat-error">delete</mat-icon>
-					</button>
-				</div>
+	@if (recordsDataService.records$ | async; as records) { @for (item of records; track item; let i = $index) {
+	<mat-card class="ms-card comparison-item">
+		<div class="item-wrapper">
+			<div msUseEllipsis>{{ item.recordName }}</div>
+			<div class="record-summary-buttons-wrapper">
+				<button mat-icon-button color="primary" (click)="viewRecord(item)">
+					<mat-icon fontSet="ms" fontIcon="icon-Eye" class="mat-primary"></mat-icon>
+				</button>
+				<button mat-icon-button color="primary" (click)="editRecord(i, item)">
+					<mat-icon fontSet="ms" fontIcon="icon-PencilSimple" class="mat-primary"></mat-icon>
+				</button>
+				<button mat-icon-button color="error" (click)="removeRecord(i)">
+					<mat-icon class="mat-error">delete</mat-icon>
+				</button>
 			</div>
-		</mat-card>
-	</ng-container>
+		</div>
+	</mat-card>
+	} }
 </div>
diff --git a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html
index 51d47aff..5ab8f622 100644
--- a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html
+++ b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison-table/algorithm-comparison-table.component.html
@@ -1,19 +1,19 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0
-   -->
+SPDX-License-Identifier: Apache-2.0
+-->
 
 <mat-expansion-panel expanded="true">
 	<mat-expansion-panel-header>
@@ -27,7 +27,8 @@
 				<td mat-cell *matCellDef="let record">{{ record.recordName }}</td>
 			</ng-container>
 
-			<ng-container *ngFor="let column of displayedColumns.slice(1)" [matColumnDef]="column">
+			@for (column of displayedColumns.slice(1); track column) {
+			<ng-container [matColumnDef]="column">
 				<th mat-header-cell *matHeaderCellDef mat-sort-header>
 					{{ column | parametersLabel }}
 				</th>
@@ -35,6 +36,7 @@
 					{{ record[column] | emptyTableField }}
 				</td>
 			</ng-container>
+			}
 
 			<tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
 			<tr mat-row *matRowDef="let row; columns: displayedColumns" class="hover-highlight"></tr>
diff --git a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison/algorithm-comparison.component.html b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison/algorithm-comparison.component.html
index 6dc3b3fe..e533ab37 100644
--- a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison/algorithm-comparison.component.html
+++ b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison/algorithm-comparison.component.html
@@ -1,19 +1,19 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0
-   -->
+SPDX-License-Identifier: Apache-2.0
+-->
 
 <div class="title-wrapper">
 	<p class="heading-primary-title title">Algorithm Comparison for</p>
@@ -22,11 +22,11 @@
 		<div class="form-field-container w-56 mt-2">
 			<mat-form-field appearance="outline">
 				<mat-select [formControlName]="ALGORITHM_TYPE_CONTROL_NAME" placeholder="Select a run record">
-					<mat-option
-						*ngFor="let algorithmType of algorithmTypesOptions; trackBy: trackByAlgorithmType"
-						[value]="algorithmType.key">
+					@for (algorithmType of algorithmTypesOptions; track algorithmType.key) {
+					<mat-option [value]="algorithmType.key">
 						{{ algorithmType.value }}
 					</mat-option>
+					}
 				</mat-select>
 			</mat-form-field>
 		</div>
@@ -46,23 +46,18 @@
 	<mat-divider></mat-divider>
 </div>
 
-<ng-container *ngIf="(recordsDataService.records$ | async)!.length > 0; else noData">
-	<ms-algorithm-comparison-list></ms-algorithm-comparison-list>
-	<div class="mt-4 mb-4">
-		<mat-divider></mat-divider>
-	</div>
-
-	<ms-algorithm-comparison-table></ms-algorithm-comparison-table>
-
-	<div class="mt-4 mb-4">
-		<mat-divider></mat-divider>
-	</div>
-
-	<ms-algorithm-comparison-chart></ms-algorithm-comparison-chart>
-</ng-container>
-
-<ng-template #noData>
-	<div class="no-data-wrapper">
-		<ms-empty-state title="No data selected"></ms-empty-state>
-	</div>
-</ng-template>
+@if ((recordsDataService.records$ | async)!.length > 0) {
+<ms-algorithm-comparison-list></ms-algorithm-comparison-list>
+<div class="mt-4 mb-4">
+	<mat-divider></mat-divider>
+</div>
+<ms-algorithm-comparison-table></ms-algorithm-comparison-table>
+<div class="mt-4 mb-4">
+	<mat-divider></mat-divider>
+</div>
+<ms-algorithm-comparison-chart></ms-algorithm-comparison-chart>
+} @else {
+<div class="no-data-wrapper">
+	<ms-empty-state title="No data selected"></ms-empty-state>
+</div>
+}
diff --git a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison/algorithm-comparison.component.ts b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison/algorithm-comparison.component.ts
index 062de3d9..2d101af9 100644
--- a/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison/algorithm-comparison.component.ts
+++ b/frontend/src/app/modules/algorithm-comparison/components/algorithm-comparison/algorithm-comparison.component.ts
@@ -18,7 +18,6 @@ import { Component, OnInit } from '@angular/core';
 import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { take } from 'rxjs';
-import { KeyValueObject } from '../../../../services/client/models/key-value/key-value.interface-dto';
 import { AlgorithmType } from '../../../model-compression/models/enums/algorithms.enum';
 import { DrawerClose, DrawerService, DrawerStatus } from '../../../shared/components/ms-drawer';
 import { DrawerActionTypeEnum } from '../../../shared/components/ms-drawer/models/drawer-action-type.enum';
@@ -101,8 +100,4 @@ export class AlgorithmComparisonComponent implements OnInit {
 			this.recordsDataService.algorithmType = algorithmType;
 		});
 	}
-
-	trackByAlgorithmType(_: number, algorithmType: KeyValueObject<string>): any {
-		return algorithmType.key;
-	}
 }
diff --git a/frontend/src/app/modules/algorithm-comparison/components/run-drawer-actions/run-drawer-actions.component.html b/frontend/src/app/modules/algorithm-comparison/components/run-drawer-actions/run-drawer-actions.component.html
index f364de79..ab99996e 100644
--- a/frontend/src/app/modules/algorithm-comparison/components/run-drawer-actions/run-drawer-actions.component.html
+++ b/frontend/src/app/modules/algorithm-comparison/components/run-drawer-actions/run-drawer-actions.component.html
@@ -1,19 +1,19 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0
-   -->
+SPDX-License-Identifier: Apache-2.0
+-->
 
 <ms-drawer [isSaveDisabled]="form.invalid" (actionEvent)="save($event)">
 	<form [formGroup]="form">
@@ -21,137 +21,130 @@
 			<mat-label>Select run record</mat-label>
 			<mat-form-field appearance="outline">
 				<mat-select formControlName="selectRun" placeholder="Select a run record">
-					<mat-option disabled *ngIf="files.length === 0">
-						No algorithm was yet run. Please run a {{ algorithmTypeLabel }} algorithm.
+					@if (files.length === 0) {
+					<mat-option disabled> No algorithm was yet run. Please run a {{ algorithmTypeLabel }} algorithm. </mat-option>
+					} @if (files.length > 0) { @for (file of files; track file) {
+					<mat-option [value]="file.name" [disabled]="file.disabled">
+						{{ file.name }}
 					</mat-option>
-					<ng-container *ngIf="files.length > 0">
-						<mat-option *ngFor="let file of files" [value]="file.name" [disabled]="file.disabled">
-							{{ file.name }}
-						</mat-option>
-					</ng-container>
+					} }
 				</mat-select>
 			</mat-form-field>
 		</div>
 
-		<div *ngIf="isSummarizedRecordLoading$ | async; else content">
+		@if (isSummarizedRecordLoading$ | async) {
+		<div>
 			<div class="spinner-wrapper mt-4">
 				<mat-spinner diameter="80"></mat-spinner>
 			</div>
 		</div>
-
-		<ng-template #content>
-			<ng-container *ngIf="!!summarizedRecord; else noData">
-				<mat-divider></mat-divider>
-
-				<div class="form-field-container mt-4">
-					<mat-label>Set run name</mat-label>
-					<mat-form-field appearance="outline">
-						<input matInput formControlName="runName" placeholder="Set run name" />
-					</mat-form-field>
+		} @else { @if (!!summarizedRecord) {
+		<mat-divider></mat-divider>
+		<div class="form-field-container mt-4">
+			<mat-label>Set run name</mat-label>
+			<mat-form-field appearance="outline">
+				<input matInput formControlName="runName" placeholder="Set run name" />
+			</mat-form-field>
+		</div>
+		<mat-accordion multi>
+			<mat-expansion-panel [(expanded)]="panelStates['statistics']">
+				<mat-expansion-panel-header>
+					<mat-panel-title class="paragraph-bold-p3-small-bold"> Statistics </mat-panel-title>
+				</mat-expansion-panel-header>
+				@if (summarizedRecord?.statistics | keyvalue; as statisticsItems) { @for (item of statisticsItems; track item;
+				let last = $last) {
+				<div class="key-value-container single">
+					<div class="key-value-pair space-between">
+						<div class="key-value-key">{{ item.key | parametersLabel }}:</div>
+						<div class="key-value-value">
+							@switch (item.key) { @case ('duration_seconds') {
+							{{ item.value | readableDuration }}
+							} @default {
+							{{ item.value }}
+							} }
+						</div>
+					</div>
+					@if (!last) {
+					<div class="pt-2">
+						<mat-divider></mat-divider>
+					</div>
+					}
 				</div>
-
-				<mat-accordion multi>
-					<mat-expansion-panel [(expanded)]="panelStates['statistics']">
-						<mat-expansion-panel-header>
-							<mat-panel-title class="paragraph-bold-p3-small-bold"> Statistics </mat-panel-title>
-						</mat-expansion-panel-header>
-						<ng-container *ngIf="summarizedRecord?.statistics | keyvalue as statisticsItems; else noStatisticsData">
-							<div *ngFor="let item of statisticsItems; let last = last" class="key-value-container single">
-								<div class="key-value-pair space-between">
-									<div class="key-value-key">{{ item.key | parametersLabel }}:</div>
-									<div class="key-value-value">
-										<ng-container [ngSwitch]="item.key">
-											<ng-container *ngSwitchCase="'duration_seconds'">{{
-												item.value | readableDuration
-											}}</ng-container>
-											<ng-container *ngSwitchDefault>{{ item.value }}</ng-container>
-										</ng-container>
-									</div>
-								</div>
-								<div *ngIf="!last" class="pt-2">
-									<mat-divider></mat-divider>
-								</div>
-							</div>
-						</ng-container>
-						<ng-template #noStatisticsData>
-							<div class="no-data-container">No data available</div>
-						</ng-template>
-					</mat-expansion-panel>
-
-					<mat-expansion-panel [(expanded)]="panelStates['modelTrainingDetails']">
-						<mat-expansion-panel-header>
-							<mat-panel-title class="paragraph-bold-p3-small-bold"> Model training details </mat-panel-title>
-						</mat-expansion-panel-header>
-						<ng-container *ngIf="summarizedRecord?.modelTrainingDetails | hasKeys; else noModelTrainingDetailsData">
-							<div
-								*ngFor="let item of summarizedRecord?.modelTrainingDetails | keyvalue; let last = last"
-								class="key-value-container single">
-								<div class="key-value-pair space-between">
-									<div class="key-value-key">{{ item.key | parametersLabel }}:</div>
-									<div class="key-value-value">
-										<ng-container [ngSwitch]="item.key">
-											<ng-container *ngSwitchCase="'file_size_bytes'">{{ item.value | adaptiveFileSize }}</ng-container>
-											<ng-container *ngSwitchCase="'creation_date'">{{ item.value | date: 'medium' }}</ng-container>
-											<ng-container *ngSwitchCase="'training_duration_seconds'">{{
-												item.value | readableDuration
-											}}</ng-container>
-											<ng-container *ngSwitchDefault>{{ item.value }}</ng-container>
-										</ng-container>
-									</div>
-								</div>
-								<div *ngIf="!last" class="pt-2">
-									<mat-divider></mat-divider>
-								</div>
-							</div>
-						</ng-container>
-						<ng-template #noModelTrainingDetailsData>
-							<div class="no-data-container">No data available</div>
-						</ng-template>
-					</mat-expansion-panel>
-
-					<mat-expansion-panel [(expanded)]="panelStates['parameters']">
-						<mat-expansion-panel-header>
-							<mat-panel-title class="paragraph-bold-p3-small-bold"> Parameters </mat-panel-title>
-						</mat-expansion-panel-header>
-						<ng-container *ngIf="summarizedRecord?.parameters | keyvalue as parametersItems; else noParametersData">
-							<div *ngFor="let item of parametersItems; let last = last" class="key-value-container single">
-								<div class="key-value-pair space-between">
-									<div class="key-value-key">{{ item.key | parametersLabel }}:</div>
-									<div class="key-value-value">{{ item.value }}</div>
-								</div>
-								<div *ngIf="!last" class="pt-2">
-									<mat-divider></mat-divider>
-								</div>
-							</div>
-						</ng-container>
-						<ng-template #noParametersData>
-							<div class="no-data-container">No data available</div>
-						</ng-template>
-					</mat-expansion-panel>
-
-					<mat-expansion-panel [(expanded)]="panelStates['accuracy']">
-						<mat-expansion-panel-header>
-							<mat-panel-title class="paragraph-bold-p3-small-bold"> Last Accuracy Test Run </mat-panel-title>
-						</mat-expansion-panel-header>
-						<ng-container *ngIf="summarizedRecord?.parameters | keyvalue as accuracyItems; else noAccuracyData">
-							<ms-chart-colors-form-controls controlKey="chart"></ms-chart-colors-form-controls>
-							<ms-line-chart
-								[data]="lastRunAccuracyTestingChartData"
-								[settings]="testingAccuracyChartDisplaySettings"></ms-line-chart>
-						</ng-container>
-						<ng-template #noAccuracyData>
-							<div class="no-data-container">No data available</div>
-						</ng-template>
-					</mat-expansion-panel>
-				</mat-accordion>
-			</ng-container>
-		</ng-template>
+				} } @else {
+				<div class="no-data-container">No data available</div>
+				}
+			</mat-expansion-panel>
+			<mat-expansion-panel [(expanded)]="panelStates['modelTrainingDetails']">
+				<mat-expansion-panel-header>
+					<mat-panel-title class="paragraph-bold-p3-small-bold"> Model training details </mat-panel-title>
+				</mat-expansion-panel-header>
+				@if (summarizedRecord?.modelTrainingDetails | hasKeys) { @for (item of summarizedRecord?.modelTrainingDetails |
+				keyvalue; track item; let last = $last) {
+				<div class="key-value-container single">
+					<div class="key-value-pair space-between">
+						<div class="key-value-key">{{ item.key | parametersLabel }}:</div>
+						<div class="key-value-value">
+							@switch (item.key) { @case ('file_size_bytes') {
+							{{ item.value | adaptiveFileSize }}
+							} @case ('creation_date') {
+							{{ item.value | date: 'medium' }}
+							} @case ('training_duration_seconds') {
+							{{ item.value | readableDuration }}
+							} @default {
+							{{ item.value }}
+							} }
+						</div>
+					</div>
+					@if (!last) {
+					<div class="pt-2">
+						<mat-divider></mat-divider>
+					</div>
+					}
+				</div>
+				} } @else {
+				<div class="no-data-container">No data available</div>
+				}
+			</mat-expansion-panel>
+			<mat-expansion-panel [(expanded)]="panelStates['parameters']">
+				<mat-expansion-panel-header>
+					<mat-panel-title class="paragraph-bold-p3-small-bold"> Parameters </mat-panel-title>
+				</mat-expansion-panel-header>
+				@if (summarizedRecord?.parameters | keyvalue; as parametersItems) { @for (item of parametersItems; track item;
+				let last = $last) {
+				<div class="key-value-container single">
+					<div class="key-value-pair space-between">
+						<div class="key-value-key">{{ item.key | parametersLabel }}:</div>
+						<div class="key-value-value">{{ item.value }}</div>
+					</div>
+					@if (!last) {
+					<div class="pt-2">
+						<mat-divider></mat-divider>
+					</div>
+					}
+				</div>
+				} } @else {
+				<div class="no-data-container">No data available</div>
+				}
+			</mat-expansion-panel>
+			<mat-expansion-panel [(expanded)]="panelStates['accuracy']">
+				<mat-expansion-panel-header>
+					<mat-panel-title class="paragraph-bold-p3-small-bold"> Last Accuracy Test Run </mat-panel-title>
+				</mat-expansion-panel-header>
+				@if (summarizedRecord?.parameters | keyvalue; as accuracyItems) {
+				<ms-chart-colors-form-controls controlKey="chart"></ms-chart-colors-form-controls>
+				<ms-line-chart
+					[data]="lastRunAccuracyTestingChartData"
+					[settings]="testingAccuracyChartDisplaySettings"></ms-line-chart>
+				} @else {
+				<div class="no-data-container">No data available</div>
+				}
+			</mat-expansion-panel>
+		</mat-accordion>
+		} @else {
+		<ms-empty-state
+			title="Awaiting Run Record Selection"
+			message="Select a run record from the dropdown to view details and statistics.">
+		</ms-empty-state>
+		} }
 	</form>
 </ms-drawer>
-
-<ng-template #noData>
-	<ms-empty-state
-		title="Awaiting Run Record Selection"
-		message="Select a run record from the dropdown to view details and statistics.">
-	</ms-empty-state>
-</ng-template>
diff --git a/frontend/src/app/modules/demo/components/checkboxes-demo/checkboxes-demo.component.html b/frontend/src/app/modules/demo/components/checkboxes-demo/checkboxes-demo.component.html
index 1540e025..1a72ebb9 100644
--- a/frontend/src/app/modules/demo/components/checkboxes-demo/checkboxes-demo.component.html
+++ b/frontend/src/app/modules/demo/components/checkboxes-demo/checkboxes-demo.component.html
@@ -1,18 +1,18 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <h1>Checkboxes</h1>
 <div class="line">
@@ -37,11 +37,13 @@ <h1>Checkboxes</h1>
 		</span>
 		<span>
 			<ul class="list-none">
-				<li *ngFor="let subtask of task.subtasks">
+				@for (subtask of task.subtasks; track subtask) {
+				<li>
 					<mat-checkbox [(ngModel)]="subtask.completed" [color]="subtask.color" (ngModelChange)="updateAllComplete()">
 						{{ subtask.name }}
 					</mat-checkbox>
 				</li>
+				}
 			</ul>
 		</span>
 	</section>
diff --git a/frontend/src/app/modules/model-compression/components/panel-algorithm/panel-algorithm.component.html b/frontend/src/app/modules/model-compression/components/panel-algorithm/panel-algorithm.component.html
index f67a926f..e0d6a668 100644
--- a/frontend/src/app/modules/model-compression/components/panel-algorithm/panel-algorithm.component.html
+++ b/frontend/src/app/modules/model-compression/components/panel-algorithm/panel-algorithm.component.html
@@ -1,18 +1,18 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <mat-card class="ms-card algorithm-card">
 	<p class="heading-sub-section-title">Algorithm</p>
@@ -21,18 +21,18 @@
 		<mat-form-field appearance="outline" subscriptSizing="dynamic">
 			<mat-select [formControlName]="ALGORITHM_CONTROL_NAME">
 				<mat-optgroup label="Pruning">
-					<mat-option
-						*ngFor="let algorithm of pruningAlgorithmsList; trackBy: trackByAlgorithmKey"
-						[value]="algorithm.key">
+					@for (algorithm of pruningAlgorithmsList; track algorithm.key) {
+					<mat-option [value]="algorithm.key">
 						{{ algorithm.value }}
 					</mat-option>
+					}
 				</mat-optgroup>
 				<mat-optgroup label="Quantization">
-					<mat-option
-						*ngFor="let algorithm of quantAlgorithmsList; trackBy: trackByAlgorithmKey"
-						[value]="algorithm.key">
+					@for (algorithm of quantAlgorithmsList; track algorithm.key) {
+					<mat-option [value]="algorithm.key">
 						{{ algorithm.value }}
 					</mat-option>
+					}
 				</mat-optgroup>
 			</mat-select>
 		</mat-form-field>
diff --git a/frontend/src/app/modules/model-compression/components/panel-algorithm/panel-algorithm.component.ts b/frontend/src/app/modules/model-compression/components/panel-algorithm/panel-algorithm.component.ts
index ca2ea397..b5a2af71 100644
--- a/frontend/src/app/modules/model-compression/components/panel-algorithm/panel-algorithm.component.ts
+++ b/frontend/src/app/modules/model-compression/components/panel-algorithm/panel-algorithm.component.ts
@@ -119,10 +119,6 @@ export class PanelAlgorithmComponent {
 		});
 	}
 
-	trackByAlgorithmKey(_: number, algorithm: { key: any; value: any }): any {
-		return algorithm.key;
-	}
-
 	ngOnDestroy() {
 		this.parentFormGroup.removeControl(this.controlKey);
 	}
diff --git a/frontend/src/app/modules/model-training/components/panel-algorithm-type-for-training/panel-algorithm-type-for-training.component.html b/frontend/src/app/modules/model-training/components/panel-algorithm-type-for-training/panel-algorithm-type-for-training.component.html
index ad808eb2..5bfe6acc 100644
--- a/frontend/src/app/modules/model-training/components/panel-algorithm-type-for-training/panel-algorithm-type-for-training.component.html
+++ b/frontend/src/app/modules/model-training/components/panel-algorithm-type-for-training/panel-algorithm-type-for-training.component.html
@@ -1,18 +1,18 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <mat-card class="ms-card parameters-card">
 	<p class="heading-sub-section-title">Algorithm Type</p>
@@ -21,11 +21,11 @@
 		<div class="form-field-container">
 			<mat-form-field appearance="outline" subscriptSizing="dynamic">
 				<mat-select [formControlName]="ALGORITHM_TYPE_CONTROL_NAME">
-					<mat-option
-						*ngFor="let algorithmType of algorithmTypesOptions; trackBy: trackByAlgorithmType"
-						[value]="algorithmType.key">
+					@for (algorithmType of algorithmTypesOptions; track algorithmType.key) {
+					<mat-option [value]="algorithmType.key">
 						{{ algorithmType.value }}
 					</mat-option>
+					}
 				</mat-select>
 			</mat-form-field>
 		</div>
diff --git a/frontend/src/app/modules/model-training/components/panel-algorithm-type-for-training/panel-algorithm-type-for-training.component.ts b/frontend/src/app/modules/model-training/components/panel-algorithm-type-for-training/panel-algorithm-type-for-training.component.ts
index 7a634a55..c8df34c4 100644
--- a/frontend/src/app/modules/model-training/components/panel-algorithm-type-for-training/panel-algorithm-type-for-training.component.ts
+++ b/frontend/src/app/modules/model-training/components/panel-algorithm-type-for-training/panel-algorithm-type-for-training.component.ts
@@ -18,7 +18,6 @@ import { Component, Input, OnInit, inject } from '@angular/core';
 import { ControlContainer, FormControl, FormGroup, Validators } from '@angular/forms';
 import { UntilDestroy, untilDestroyed } from '@ngneat/until-destroy';
 import { filter, map, skip, take } from 'rxjs';
-import { KeyValueObject } from '../../../../services/client/models/key-value/key-value.interface-dto';
 import { ScriptDetails } from '../../../../services/client/models/script/script-details.interface-dto';
 import { ScriptActions } from '../../../../state/core/script';
 import { ScriptFacadeService } from '../../../core/services';
@@ -120,8 +119,4 @@ export class PanelAlgorithmTypeForTrainingComponent implements OnInit {
 			isScriptActive(state) ? this.algorithmTypeFormGroup.disable() : this.algorithmTypeFormGroup.enable();
 		});
 	}
-
-	trackByAlgorithmType(_: number, algorithmType: KeyValueObject<string>): any {
-		return algorithmType.key;
-	}
 }
diff --git a/frontend/src/app/modules/model-training/components/panel-model-metadata/panel-model-metadata.component.html b/frontend/src/app/modules/model-training/components/panel-model-metadata/panel-model-metadata.component.html
index cc3b17c5..adf97d3b 100644
--- a/frontend/src/app/modules/model-training/components/panel-model-metadata/panel-model-metadata.component.html
+++ b/frontend/src/app/modules/model-training/components/panel-model-metadata/panel-model-metadata.component.html
@@ -1,46 +1,53 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <mat-card class="ms-card metadata-card">
 	<p class="heading-sub-section-title">Model Training Information</p>
 
-	<div class="metadata-wrapper" *ngIf="metadata | keyvalue; let items">
-		<div *ngIf="items.length > 0; else noMetadata" class="key-value-container single">
-			<div *ngFor="let item of items; let last = last">
+	@if (metadata | keyvalue; as items) {
+	<div class="metadata-wrapper">
+		@if (items.length > 0) {
+		<div class="key-value-container single">
+			@for (item of items; track item; let last = $last) {
+			<div>
 				<div class="key-value-pair space-between">
 					<div class="key-value-key">{{ item.key | parametersLabel }}:</div>
 					<div class="key-value-value">
-						<ng-container [ngSwitch]="item.key">
-							<ng-container *ngSwitchCase="'file_size_bytes'">{{ item.value | adaptiveFileSize }}</ng-container>
-							<ng-container *ngSwitchCase="'creation_date'">{{ item.value | date: 'medium' }}</ng-container>
-							<ng-container *ngSwitchCase="'training_duration_seconds'">{{
-								item.value | readableDuration
-							}}</ng-container>
-							<ng-container *ngSwitchDefault>{{ item.value }}</ng-container>
-						</ng-container>
+						@switch (item.key) { @case ('file_size_bytes') {
+						{{ item.value | adaptiveFileSize }}
+						} @case ('creation_date') {
+						{{ item.value | date: 'medium' }}
+						} @case ('training_duration_seconds') {
+						{{ item.value | readableDuration }}
+						} @default {
+						{{ item.value }}
+						} }
 					</div>
 				</div>
-				<div *ngIf="!last" class="pt-2">
+				@if (!last) {
+				<div class="pt-2">
 					<mat-divider></mat-divider>
 				</div>
+				}
 			</div>
+			}
 		</div>
-	</div>
-
-	<ng-template #noMetadata>
+		} @else {
 		<ms-empty-state title="No metadata available"></ms-empty-state>
-	</ng-template>
+		}
+	</div>
+	}
 </mat-card>
diff --git a/frontend/src/app/modules/running/components/running-statistics/running-statistics.component.html b/frontend/src/app/modules/running/components/running-statistics/running-statistics.component.html
index 5a41bb91..09a21d25 100644
--- a/frontend/src/app/modules/running/components/running-statistics/running-statistics.component.html
+++ b/frontend/src/app/modules/running/components/running-statistics/running-statistics.component.html
@@ -1,33 +1,31 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <mat-card class="ms-card">
 	<p class="heading-section-title">Statistics</p>
-	<ng-container *ngIf="{ stats: statistics$ | async | keyvalue } as data">
-		<ng-container *ngIf="data.stats?.length; else noStatistics">
-			<div class="key-value-container dense">
-				<div *ngFor="let stat of data.stats" class="key-value-pair">
-					<span class="key-value-key">{{ stat.key | readableStatisticsLabel }}:</span>
-					<span class="key-value-value">{{ stat.value }}</span>
-				</div>
-			</div>
-		</ng-container>
-
-		<ng-template #noStatistics>
-			<ms-empty-state title="No statistics available."></ms-empty-state>
-		</ng-template>
-	</ng-container>
+	@if ({ stats: statistics$ | async | keyvalue }; as data) { @if (data.stats?.length) {
+	<div class="key-value-container dense">
+		@for (stat of data.stats; track stat) {
+		<div class="key-value-pair">
+			<span class="key-value-key">{{ stat.key | readableStatisticsLabel }}:</span>
+			<span class="key-value-value">{{ stat.value }}</span>
+		</div>
+		}
+	</div>
+	} @else {
+	<ms-empty-state title="No statistics available."></ms-empty-state>
+	} }
 </mat-card>
diff --git a/frontend/src/app/modules/running/components/running-status-bar/running-status-bar.component.html b/frontend/src/app/modules/running/components/running-status-bar/running-status-bar.component.html
index daa9eed3..7ab22c23 100644
--- a/frontend/src/app/modules/running/components/running-status-bar/running-status-bar.component.html
+++ b/frontend/src/app/modules/running/components/running-status-bar/running-status-bar.component.html
@@ -1,29 +1,31 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <div class="training-status mb-2">
 	<div class="status-bar">
 		<div>
 			<div class="runnning-title-container">
 				<div class="model-name heading-sub-section-title">Algorithm: {{ scriptDetails?.algKey || 'None' }}</div>
-				<div class="ml-2" *ngIf="isScriptActive">
+				@if (isScriptActive) {
+				<div class="ml-2">
 					<button mat-raised-button color="warn" matTooltip="Stop current process." (click)="runStopScript()">
 						Stop
 					</button>
 				</div>
+				}
 			</div>
 			<div class="mt-2 flex">
 				<div>
@@ -63,10 +65,12 @@
 			<div class="metric-value">—</div>
 			<div class="metric-name paragraph-semibold-p2-large-emphasis">Loss</div>
 		</div>
-		<div class="metric sparsity" *ngIf="isSparsityVisible">
+		@if (isSparsityVisible) {
+		<div class="metric sparsity">
 			<div class="metric-value">—</div>
 			<div class="metric-name paragraph-semibold-p2-large-emphasis">Sparsity</div>
 		</div>
+		}
 		<div class="metric testing">
 			<div class="metric-value">—</div>
 			<div class="metric-name paragraph-semibold-p2-large-emphasis">Test</div>
diff --git a/frontend/src/app/modules/running/components/running/running.component.html b/frontend/src/app/modules/running/components/running/running.component.html
index 5ca4c27e..55a79d7e 100644
--- a/frontend/src/app/modules/running/components/running/running.component.html
+++ b/frontend/src/app/modules/running/components/running/running.component.html
@@ -1,57 +1,50 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <p class="heading-primary-title title">Running</p>
 
-<ng-container [ngSwitch]="scriptDetails?.type">
-	<ms-running-animation
-		*ngSwitchCase="AlgorithmType.QUANTIZATION"
-		[animationType]="AnimationType.QUANTIZATION"></ms-running-animation>
-	<ms-running-animation
-		*ngSwitchCase="AlgorithmType.PRUNING"
-		[animationType]="AnimationType.PRUNING"></ms-running-animation>
-	<ms-running-animation
-		*ngSwitchCase="AlgorithmType.MACHINE_UNLEARNING"
-		[animationType]="AnimationType.PRUNING"></ms-running-animation>
-</ng-container>
+@switch (scriptDetails?.type) { @case (AlgorithmType.QUANTIZATION) {
+<ms-running-animation [animationType]="AnimationType.QUANTIZATION"></ms-running-animation>
+} @case (AlgorithmType.PRUNING) {
+<ms-running-animation [animationType]="AnimationType.PRUNING"></ms-running-animation>
+} @case (AlgorithmType.MACHINE_UNLEARNING) {
+<ms-running-animation [animationType]="AnimationType.PRUNING"></ms-running-animation>
+} }
 
 <mat-card class="ms-card running-prunning">
 	<ms-running-status-bar></ms-running-status-bar>
 
-	<ng-container *ngIf="isChartVisible; else noChartData">
-		<ng-container [ngSwitch]="scriptDetails?.type">
-			<ms-running-quantization-charts *ngSwitchCase="AlgorithmType.QUANTIZATION"></ms-running-quantization-charts>
-			<ms-running-pruning-charts *ngSwitchCase="AlgorithmType.PRUNING"></ms-running-pruning-charts>
-			<ms-running-machine-unlearning-charts
-				*ngSwitchCase="AlgorithmType.MACHINE_UNLEARNING"></ms-running-machine-unlearning-charts>
-		</ng-container>
-	</ng-container>
-
-	<ng-template #noChartData>
-		<ms-empty-state
-			title="No Chart Data Available"
-			message="Please run the appropriate script to generate chart data."></ms-empty-state>
-	</ng-template>
+	@if (isChartVisible) { @switch (scriptDetails?.type) { @case (AlgorithmType.QUANTIZATION) {
+	<ms-running-quantization-charts></ms-running-quantization-charts>
+	} @case (AlgorithmType.PRUNING) {
+	<ms-running-pruning-charts></ms-running-pruning-charts>
+	} @case (AlgorithmType.MACHINE_UNLEARNING) {
+	<ms-running-machine-unlearning-charts></ms-running-machine-unlearning-charts>
+	} } } @else {
+	<ms-empty-state
+		title="No Chart Data Available"
+		message="Please run the appropriate script to generate chart data."></ms-empty-state>
+	}
 </mat-card>
 
-<ng-container *ngIf="scriptDetails?.type === AlgorithmType.MACHINE_UNLEARNING">
-	<div class="mt-2">
-		<ms-running-statistics></ms-running-statistics>
-	</div>
-</ng-container>
+@if (scriptDetails?.type === AlgorithmType.MACHINE_UNLEARNING) {
+<div class="mt-2">
+	<ms-running-statistics></ms-running-statistics>
+</div>
+}
 
 <div class="mt-4">
 	<button mat-stroked-button color="primary" (click)="navigationService.goToPreviousPage()">
diff --git a/frontend/src/app/modules/shared/components/ms-banner/ms-banner.component.html b/frontend/src/app/modules/shared/components/ms-banner/ms-banner.component.html
index 20983198..4e855ca7 100644
--- a/frontend/src/app/modules/shared/components/ms-banner/ms-banner.component.html
+++ b/frontend/src/app/modules/shared/components/ms-banner/ms-banner.component.html
@@ -1,34 +1,31 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <div class="banner">
 	<div class="banner-left-container">
-		<div [ngSwitch]="data.notificationType" class="banner-content">
-			<ng-template [ngSwitchCase]="NotificationTypes.SUCCESS">
-				<mat-icon fontSet="ms" fontIcon="icon-CheckCircle" class="mat-success"></mat-icon>
-			</ng-template>
-			<ng-template [ngSwitchCase]="NotificationTypes.INFO">
-				<mat-icon fontSet="ms" fontIcon="icon-Info" class="mat-primary"></mat-icon>
-			</ng-template>
-			<ng-template [ngSwitchCase]="NotificationTypes.ERROR">
-				<mat-icon class="mat-error">error_outline</mat-icon>
-			</ng-template>
-			<ng-template [ngSwitchCase]="NotificationTypes.WARNING">
-				<mat-icon class="mat-warn">warning</mat-icon>
-			</ng-template>
+		<div class="banner-content">
+			@switch (data.notificationType) { @case (NotificationTypes.SUCCESS) {
+			<mat-icon fontSet="ms" fontIcon="icon-CheckCircle" class="mat-success"></mat-icon>
+			} @case (NotificationTypes.INFO) {
+			<mat-icon fontSet="ms" fontIcon="icon-Info" class="mat-primary"></mat-icon>
+			} @case (NotificationTypes.ERROR) {
+			<mat-icon class="mat-error">error_outline</mat-icon>
+			} @case (NotificationTypes.WARNING) {
+			<mat-icon class="mat-warn">warning</mat-icon>
+			} }
 		</div>
 	</div>
 
diff --git a/frontend/src/app/modules/shared/components/ms-banner/ms-banner.component.ts b/frontend/src/app/modules/shared/components/ms-banner/ms-banner.component.ts
index 1088eef6..f2067283 100644
--- a/frontend/src/app/modules/shared/components/ms-banner/ms-banner.component.ts
+++ b/frontend/src/app/modules/shared/components/ms-banner/ms-banner.component.ts
@@ -14,7 +14,6 @@
 
 //   SPDX-License-Identifier: Apache-2.0
 
-import { CommonModule } from '@angular/common';
 import { Component, Inject } from '@angular/core';
 import { MatIconModule } from '@angular/material/icon';
 import { MAT_SNACK_BAR_DATA, MatSnackBarRef } from '@angular/material/snack-bar';
@@ -25,7 +24,7 @@ import { NotificationTypes } from './models/snackbar-types.enum';
 	templateUrl: './ms-banner.component.html',
 	styleUrls: ['./ms-banner.component.scss'],
 	standalone: true,
-	imports: [CommonModule, MatIconModule]
+	imports: [MatIconModule]
 })
 export class MsBannerComponent {
 	readonly NotificationTypes: typeof NotificationTypes = NotificationTypes;
diff --git a/frontend/src/app/modules/shared/components/ms-card-selector/ms-card-selector.component.html b/frontend/src/app/modules/shared/components/ms-card-selector/ms-card-selector.component.html
index b5e91560..bc5ef0cb 100644
--- a/frontend/src/app/modules/shared/components/ms-card-selector/ms-card-selector.component.html
+++ b/frontend/src/app/modules/shared/components/ms-card-selector/ms-card-selector.component.html
@@ -1,25 +1,23 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <div class="cards-section">
-	<mat-card
-		*ngFor="let option of options; trackBy: trackByOption"
-		class="ms-card action-card"
-		[class.selected]="activeCard === option"
-		(click)="selectCard(option)">
+	@for (option of options; track option) {
+	<mat-card class="ms-card action-card" [class.selected]="activeCard === option" (click)="selectCard(option)">
 		<span class="heading-sub-section-title">{{ option }}</span>
 	</mat-card>
+	}
 </div>
diff --git a/frontend/src/app/modules/shared/components/ms-card-selector/ms-card-selector.component.ts b/frontend/src/app/modules/shared/components/ms-card-selector/ms-card-selector.component.ts
index dd40afcb..11547cf1 100644
--- a/frontend/src/app/modules/shared/components/ms-card-selector/ms-card-selector.component.ts
+++ b/frontend/src/app/modules/shared/components/ms-card-selector/ms-card-selector.component.ts
@@ -14,7 +14,6 @@
 
 //   SPDX-License-Identifier: Apache-2.0
 
-import { NgFor } from '@angular/common';
 import { Component, EventEmitter, Input, Output } from '@angular/core';
 import { MatCardModule } from '@angular/material/card';
 
@@ -23,7 +22,7 @@ import { MatCardModule } from '@angular/material/card';
 	templateUrl: './ms-card-selector.component.html',
 	styleUrls: ['./ms-card-selector.component.scss'],
 	standalone: true,
-	imports: [NgFor, MatCardModule]
+	imports: [MatCardModule]
 })
 export class MsCardSelectorComponent {
 	@Input() options: string[] = [];
@@ -35,8 +34,4 @@ export class MsCardSelectorComponent {
 		this.activeCard = this.activeCard === option ? null : option;
 		this.selectedOption.emit(this.activeCard);
 	}
-
-	trackByOption(_: number, option: string): string {
-		return option;
-	}
 }
diff --git a/frontend/src/app/modules/shared/components/ms-drawer/component/ms-drawer.component.html b/frontend/src/app/modules/shared/components/ms-drawer/component/ms-drawer.component.html
index 996e64b9..cd31896d 100644
--- a/frontend/src/app/modules/shared/components/ms-drawer/component/ms-drawer.component.html
+++ b/frontend/src/app/modules/shared/components/ms-drawer/component/ms-drawer.component.html
@@ -1,19 +1,19 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0
-   -->
+SPDX-License-Identifier: Apache-2.0
+-->
 
 <div class="drawer-wrapper" [style.width.px]="data.width">
 	<div class="drawer-header">
@@ -38,16 +38,15 @@
 		<ng-container *ngTemplateOutlet="actionsTemplate || defaultDrawerActions"></ng-container>
 		<ng-template #defaultDrawerActions>
 			<div class="actions-wrapper">
-				<ng-container *ngIf="data.showCloseButton">
-					<button mat-stroked-button [disabled]="isDismissDisabled" (click)="onClose()">
-						{{ data.closeButtonLabel }}
-					</button>
-				</ng-container>
-				<ng-container *ngIf="data.showSaveButton">
-					<button mat-flat-button color="primary" [disabled]="isSaveDisabled" (click)="onSave()">
-						{{ data.saveButtonLabel }}
-					</button>
-				</ng-container>
+				@if (data.showCloseButton) {
+				<button mat-stroked-button [disabled]="isDismissDisabled" (click)="onClose()">
+					{{ data.closeButtonLabel }}
+				</button>
+				} @if (data.showSaveButton) {
+				<button mat-flat-button color="primary" [disabled]="isSaveDisabled" (click)="onSave()">
+					{{ data.saveButtonLabel }}
+				</button>
+				}
 			</div>
 		</ng-template>
 	</div>
diff --git a/frontend/src/app/modules/shared/components/ms-file-upload/ms-file-upload.component.html b/frontend/src/app/modules/shared/components/ms-file-upload/ms-file-upload.component.html
index cb3db0fa..6959752d 100644
--- a/frontend/src/app/modules/shared/components/ms-file-upload/ms-file-upload.component.html
+++ b/frontend/src/app/modules/shared/components/ms-file-upload/ms-file-upload.component.html
@@ -1,18 +1,18 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <div
 	class="dropzone"
@@ -22,22 +22,20 @@
 	role="button"
 	aria-label="File upload drop zone"
 	#dropzone>
-	<ng-container *ngIf="uploadedFileName; else uploadPrompt">
-		<div class="uploaded-file-container">
-			<span class="uploaded-file-name">
-				Uploaded: <b>{{ uploadedFileName }}</b>
-			</span>
-			<button mat-raised-button color="warn" (click)="removeFile(); $event.stopPropagation()">Remove</button>
+	@if (uploadedFileName) {
+	<div class="uploaded-file-container">
+		<span class="uploaded-file-name">
+			Uploaded: <b>{{ uploadedFileName }}</b>
+		</span>
+		<button mat-raised-button color="warn" (click)="removeFile(); $event.stopPropagation()">Remove</button>
+	</div>
+	} @else {
+	<input type="file" hidden #fileInput (change)="onFileSelected($event)" />
+	<div class="upload-prompt">
+		<mat-icon fontSet="ms" fontIcon="icon-UploadSimple"></mat-icon>
+		<div>
+			Drag & Drop your file here or <span class="select-file" (click)="fileInput.click()">browse</span> to select.
 		</div>
-	</ng-container>
-
-	<ng-template #uploadPrompt>
-		<input type="file" hidden #fileInput (change)="onFileSelected($event)" />
-		<div class="upload-prompt">
-			<mat-icon fontSet="ms" fontIcon="icon-UploadSimple"></mat-icon>
-			<div>
-				Drag & Drop your file here or <span class="select-file" (click)="fileInput.click()">browse</span> to select.
-			</div>
-		</div>
-	</ng-template>
+	</div>
+	}
 </div>
diff --git a/frontend/src/app/modules/shared/components/ms-file-upload/ms-file-upload.component.ts b/frontend/src/app/modules/shared/components/ms-file-upload/ms-file-upload.component.ts
index c042049e..714ad964 100644
--- a/frontend/src/app/modules/shared/components/ms-file-upload/ms-file-upload.component.ts
+++ b/frontend/src/app/modules/shared/components/ms-file-upload/ms-file-upload.component.ts
@@ -15,6 +15,7 @@
 //   SPDX-License-Identifier: Apache-2.0
 
 import { Component, ElementRef, ViewChild } from '@angular/core';
+import { MatIconModule } from '@angular/material/icon';
 import { FileService } from '../../../core/services/file.service';
 import { BannerService } from '../ms-banner/services/banner.service';
 
@@ -22,7 +23,8 @@ import { BannerService } from '../ms-banner/services/banner.service';
 	selector: 'ms-file-upload',
 	templateUrl: './ms-file-upload.component.html',
 	styleUrls: ['./ms-file-upload.component.scss'],
-	standalone: true
+	standalone: true,
+	imports: [MatIconModule]
 })
 export class MsFileUploadComponent {
 	uploadedFileName: string | null = null;
diff --git a/frontend/src/app/modules/shared/components/ms-footer/ms-footer.component.html b/frontend/src/app/modules/shared/components/ms-footer/ms-footer.component.html
index cc105aa4..b50b1675 100644
--- a/frontend/src/app/modules/shared/components/ms-footer/ms-footer.component.html
+++ b/frontend/src/app/modules/shared/components/ms-footer/ms-footer.component.html
@@ -1,18 +1,18 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <div class="footer-wrapper">
 	<div class="mb-4">
@@ -20,7 +20,9 @@
 	</div>
 
 	<footer class="grid grid-cols-12">
-		<div *ngIf="styleMode !== 'mainLayout'" class="col-span-1"></div>
+		@if (styleMode !== 'mainLayout') {
+		<div class="col-span-1"></div>
+		}
 		<div [ngClass]="styleMode === 'mainLayout' ? 'col-span-12' : 'col-span-10'" class="footer-content">
 			<div class="left">© {{ currentYear }} Cisco Systems, Inc</div>
 			<div class="right">
@@ -28,6 +30,8 @@
 				<a>Terms of Service</a>
 			</div>
 		</div>
-		<div *ngIf="styleMode !== 'mainLayout'" class="col-span-1"></div>
+		@if (styleMode !== 'mainLayout') {
+		<div class="col-span-1"></div>
+		}
 	</footer>
 </div>
diff --git a/frontend/src/app/modules/shared/components/ms-panel-model-training/ms-panel-model-training.component.html b/frontend/src/app/modules/shared/components/ms-panel-model-training/ms-panel-model-training.component.html
index e82552ba..a210dc96 100644
--- a/frontend/src/app/modules/shared/components/ms-panel-model-training/ms-panel-model-training.component.html
+++ b/frontend/src/app/modules/shared/components/ms-panel-model-training/ms-panel-model-training.component.html
@@ -1,18 +1,18 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <mat-card class="ms-card model-card">
 	<div class="panel-title-wrapper">
@@ -27,13 +27,16 @@
 						<ngx-mat-select-search [formControl]="searchModel"> </ngx-mat-select-search>
 					</mat-option>
 
-					<ng-container *ngIf="filteredModels | async as models">
-						<mat-option *ngFor="let model of models; trackBy: trackByModel" [value]="model.name">
-							{{ model.name }}
-							<mat-icon *ngIf="!model.isTrained" class="mat-error" fontSet="ms" fontIcon="icon-X"></mat-icon>
-						</mat-option>
-						<mat-option *ngIf="models.length === 0" disabled>No results found</mat-option>
-					</ng-container>
+					@if (filteredModels | async; as models) { @for (model of models; track model.name) {
+					<mat-option [value]="model.name">
+						{{ model.name }}
+						@if (!model.isTrained) {
+						<mat-icon class="mat-error" fontSet="ms" fontIcon="icon-X"></mat-icon>
+						}
+					</mat-option>
+					} @if (models.length === 0) {
+					<mat-option disabled>No results found</mat-option>
+					} }
 				</mat-optgroup>
 			</mat-select>
 		</mat-form-field>
diff --git a/frontend/src/app/modules/shared/components/ms-panel-model-training/ms-panel-model-training.component.ts b/frontend/src/app/modules/shared/components/ms-panel-model-training/ms-panel-model-training.component.ts
index da514062..b89e70e5 100644
--- a/frontend/src/app/modules/shared/components/ms-panel-model-training/ms-panel-model-training.component.ts
+++ b/frontend/src/app/modules/shared/components/ms-panel-model-training/ms-panel-model-training.component.ts
@@ -211,10 +211,6 @@ export class MsPanelModelTrainingComponent implements OnInit, OnChanges, OnDestr
 		return this.models.filter((model) => model.name.toLowerCase().includes(filterValue));
 	}
 
-	trackByModel(_: number, model: ModelDto): any {
-		return model.name;
-	}
-
 	ngOnDestroy() {
 		this.parentFormGroup.removeControl(this.controlKey);
 	}
diff --git a/frontend/src/app/modules/shared/components/ms-panel-model/ms-panel-model.component.html b/frontend/src/app/modules/shared/components/ms-panel-model/ms-panel-model.component.html
index 07605841..90211a12 100644
--- a/frontend/src/app/modules/shared/components/ms-panel-model/ms-panel-model.component.html
+++ b/frontend/src/app/modules/shared/components/ms-panel-model/ms-panel-model.component.html
@@ -1,32 +1,31 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <mat-card class="ms-card model-card">
 	<div class="panel-title-wrapper">
 		<div class="heading-sub-section-title">Model</div>
-		<div class="train-models" *ngIf="isTrainModelsPageRouteVisible">
+		@if (isTrainModelsPageRouteVisible) {
+		<div class="train-models">
 			<a [routerLink]="['/' + RoutesList.MODEL_TRAINING.ROOT]">Train models</a>
-
-			<ng-container
-				*ngIf="pageRunningScriptSpiningIndicatorService.currentRunningPage$ | async as currentRunningPageKey">
-				<ng-container *ngIf="currentRunningPageKey === PageKey.MODEL_TRAINING">
-					<ms-spining-indicator class="ml-2"></ms-spining-indicator>
-				</ng-container>
-			</ng-container>
+			@if (pageRunningScriptSpiningIndicatorService.currentRunningPage$ | async; as currentRunningPageKey) { @if
+			(currentRunningPageKey === PageKey.MODEL_TRAINING) {
+			<ms-spining-indicator class="ml-2"></ms-spining-indicator>
+			} }
 		</div>
+		}
 	</div>
 
 	<div class="form-field-container" [formGroupName]="controlKey">
@@ -37,16 +36,16 @@
 						<ngx-mat-select-search [formControl]="searchModel"> </ngx-mat-select-search>
 					</mat-option>
 
-					<ng-container *ngIf="filteredModels | async as models">
-						<mat-option
-							*ngFor="let model of models; trackBy: trackByModel"
-							[value]="model.name"
-							[disabled]="!model.isTrained">
-							{{ model.name }}
-							<mat-icon *ngIf="!model.isTrained" class="mat-error" fontSet="ms" fontIcon="icon-X"></mat-icon>
-						</mat-option>
-						<mat-option *ngIf="models.length === 0" disabled>No results found</mat-option>
-					</ng-container>
+					@if (filteredModels | async; as models) { @for (model of models; track model.name) {
+					<mat-option [value]="model.name" [disabled]="!model.isTrained">
+						{{ model.name }}
+						@if (!model.isTrained) {
+						<mat-icon class="mat-error" fontSet="ms" fontIcon="icon-X"></mat-icon>
+						}
+					</mat-option>
+					} @if (models.length === 0) {
+					<mat-option disabled>No results found</mat-option>
+					} }
 				</mat-optgroup>
 			</mat-select>
 		</mat-form-field>
diff --git a/frontend/src/app/modules/shared/components/ms-panel-model/ms-panel-model.component.ts b/frontend/src/app/modules/shared/components/ms-panel-model/ms-panel-model.component.ts
index 79d6b26e..438907e2 100644
--- a/frontend/src/app/modules/shared/components/ms-panel-model/ms-panel-model.component.ts
+++ b/frontend/src/app/modules/shared/components/ms-panel-model/ms-panel-model.component.ts
@@ -188,10 +188,6 @@ export class MsPanelModelComponent implements OnInit, OnChanges, OnDestroy {
 		return this.models.filter((model) => model.name.toLowerCase().includes(filterValue));
 	}
 
-	trackByModel(_: number, model: ModelDto): any {
-		return model.name;
-	}
-
 	ngOnDestroy() {
 		this.parentFormGroup.removeControl(this.controlKey);
 	}
diff --git a/frontend/src/app/modules/shared/components/ms-panel-parameters/ms-panel-parameters.component.html b/frontend/src/app/modules/shared/components/ms-panel-parameters/ms-panel-parameters.component.html
index ba2b68be..0e3dd314 100644
--- a/frontend/src/app/modules/shared/components/ms-panel-parameters/ms-panel-parameters.component.html
+++ b/frontend/src/app/modules/shared/components/ms-panel-parameters/ms-panel-parameters.component.html
@@ -1,62 +1,67 @@
-<!-- 
-   Copyright 2024 Cisco Systems, Inc. and its affiliates
+<!--
+Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <mat-card class="ms-card parameters-card">
 	<p class="heading-sub-section-title">Parameters</p>
 
-	<div class="parameters-wrapper" *ngIf="parameters.length; else noParametersTemplate">
+	@if (parameters.length) {
+	<div class="parameters-wrapper">
 		<ng-container [formGroupName]="controlKey">
 			<div formArrayName="parametersArray">
-				<ng-container *ngFor="let param of parameters; let i = index">
-					<!-- Text input for type 'text' or 'number' -->
-					<div class="form-field-container" *ngIf="param.inputType === 'text' || param.inputType === 'number'">
-						<mat-label>{{ param.label }}</mat-label>
-						<mat-form-field appearance="outline">
-							<input matInput [formControlName]="i" [placeholder]="param.placeholder" [type]="param.inputType" />
-							<mat-icon fontSet="ms" fontIcon="icon-Info" matSuffix matTooltip="{{ param.help }}"></mat-icon>
-						</mat-form-field>
+				@for (param of parameters; track param; let i = $index) {
+				<!-- Text input for type 'text' or 'number' -->
+				@if (param.inputType === 'text' || param.inputType === 'number') {
+				<div class="form-field-container">
+					<mat-label>{{ param.label }}</mat-label>
+					<mat-form-field appearance="outline">
+						<input matInput [formControlName]="i" [placeholder]="param.placeholder" [type]="param.inputType" />
+						<mat-icon fontSet="ms" fontIcon="icon-Info" matSuffix matTooltip="{{ param.help }}"></mat-icon>
+					</mat-form-field>
+				</div>
+				}
+				<!-- Select dropdown for type 'select' -->
+				@if (param.inputType === 'select') {
+				<div class="form-field-container">
+					<mat-label>{{ param.label }}</mat-label>
+					<mat-form-field appearance="outline">
+						<mat-select [formControlName]="i">
+							@for (option of param.options; track option) {
+							<mat-option [value]="option.value">
+								{{ option.viewValue }}
+							</mat-option>
+							}
+						</mat-select>
+						<mat-icon fontSet="ms" fontIcon="icon-Info" matSuffix matTooltip="{{ param.help }}"></mat-icon>
+					</mat-form-field>
+				</div>
+				}
+				<!-- Checkbox input for type 'checkbox' -->
+				@if (param.inputType === 'checkbox') {
+				<div class="form-field-container inline-container mb-[22px]">
+					<mat-checkbox [formControlName]="i">{{ param.label }}</mat-checkbox>
+					<div class="ml-2">
+						<mat-icon fontSet="ms" fontIcon="icon-Info" matTooltip="{{ param.help }}"></mat-icon>
 					</div>
-
-					<!-- Select dropdown for type 'select' -->
-					<div class="form-field-container" *ngIf="param.inputType === 'select'">
-						<mat-label>{{ param.label }}</mat-label>
-						<mat-form-field appearance="outline">
-							<mat-select [formControlName]="i">
-								<mat-option *ngFor="let option of param.options" [value]="option.value">
-									{{ option.viewValue }}
-								</mat-option>
-							</mat-select>
-							<mat-icon fontSet="ms" fontIcon="icon-Info" matSuffix matTooltip="{{ param.help }}"></mat-icon>
-						</mat-form-field>
-					</div>
-
-					<!-- Checkbox input for type 'checkbox' -->
-					<div class="form-field-container inline-container mb-[22px]" *ngIf="param.inputType === 'checkbox'">
-						<mat-checkbox [formControlName]="i">{{ param.label }}</mat-checkbox>
-						<div class="ml-2">
-							<mat-icon fontSet="ms" fontIcon="icon-Info" matTooltip="{{ param.help }}"></mat-icon>
-						</div>
-					</div>
-				</ng-container>
+				</div>
+				} }
 			</div>
 		</ng-container>
 	</div>
-
-	<ng-template #noParametersTemplate>
-		<p class="no-parameters-message">No parameters configured.</p>
-	</ng-template>
+	} @else {
+	<p class="no-parameters-message">No parameters configured.</p>
+	}
 </mat-card>
diff --git a/frontend/src/app/modules/shared/components/ms-panel-parameters/ms-panel-parameters.component.ts b/frontend/src/app/modules/shared/components/ms-panel-parameters/ms-panel-parameters.component.ts
index e5e817e8..4531be17 100644
--- a/frontend/src/app/modules/shared/components/ms-panel-parameters/ms-panel-parameters.component.ts
+++ b/frontend/src/app/modules/shared/components/ms-panel-parameters/ms-panel-parameters.component.ts
@@ -14,7 +14,6 @@
 
 //   SPDX-License-Identifier: Apache-2.0
 
-import { CommonModule } from '@angular/common';
 import { Component, Input, OnInit, SimpleChanges, inject } from '@angular/core';
 import { ControlContainer, FormArray, FormBuilder, FormGroup, ReactiveFormsModule } from '@angular/forms';
 import { MatCardModule } from '@angular/material/card';
@@ -42,7 +41,6 @@ import { isScriptActive } from '../../../model-compression/models/enums/script-s
 	selector: 'ms-panel-parameters',
 	standalone: true,
 	imports: [
-		CommonModule,
 		MatInputModule,
 		ReactiveFormsModule,
 		MatCardModule,
diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html b/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html
index f6044923..d4eb8392 100644
--- a/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html
+++ b/frontend/src/app/modules/shared/components/ms-sidenav/components/ms-sidenav-item/ms-sidenav-item.component.html
@@ -1,36 +1,39 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <div class="sidenav-item" [routerLink]="item.route" routerLinkActive="active-route">
 	<div class="left-side">
 		<div class="item-icon">
 			<mat-icon fontSet="ms" [fontIcon]="item.icon"></mat-icon>
 		</div>
-		<div *ngIf="isExpanded">
+		@if (isExpanded) {
+		<div>
 			<div class="item-label paragraph-semibold-p3-small-emphasis">
 				{{ item.label }}
 			</div>
 		</div>
+		}
 	</div>
 
 	<div class="right-side">
-		<ng-container *ngIf="pageRunningScriptSpiningIndicatorService.currentRunningPage$ | async as currentRunningPageKey">
-			<div *ngIf="isExpanded && currentRunningPageKey === item?.key">
-				<ms-spining-indicator></ms-spining-indicator>
-			</div>
-		</ng-container>
+		@if (pageRunningScriptSpiningIndicatorService.currentRunningPage$ | async; as currentRunningPageKey) { @if
+		(isExpanded && currentRunningPageKey === item?.key) {
+		<div>
+			<ms-spining-indicator></ms-spining-indicator>
+		</div>
+		} }
 	</div>
 </div>
diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.html b/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.html
index 342e9e00..6e6706ce 100644
--- a/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.html
+++ b/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.html
@@ -1,18 +1,18 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <div class="sidenav-wrapper" [@expandCollapse]="isExpanded ? 'expanded' : 'collapsed'">
 	<div class="top-section-items">
@@ -20,7 +20,8 @@
 			<div class="left">
 				<mat-icon fontSet="ms" fontIcon="icon-User"></mat-icon>
 			</div>
-			<div class="right" *ngIf="isExpanded">
+			@if (isExpanded) {
+			<div class="right">
 				<div class="paragraph-semibold-p3-default-emphasis text-container">
 					{{ currentMode === Modes.GUIDED ? 'Guided mode' : 'Expert mode' }}
 				</div>
@@ -29,31 +30,32 @@
 					<mat-icon class="switch-icon" fontSet="ms" fontIcon="icon-ArrowRight"></mat-icon>
 				</div>
 			</div>
+			}
 		</div>
 
 		<div class="mt-3">
 			<mat-divider></mat-divider>
 		</div>
 
-		<ng-container *ngIf="currentMode === Modes.GUIDED; else expertModeBlock">
-			<div class="sidenav-items-wrapper" *ngFor="let item of SidenavConstants.guided; trackBy: trackByRoute">
-				<ms-sidenav-item [item]="item" [isExpanded]="isExpanded" itemStyle="grey"></ms-sidenav-item>
-			</div>
-		</ng-container>
-
-		<ng-template #expertModeBlock>
-			<div class="sidenav-items-wrapper" *ngFor="let item of SidenavConstants.expert; trackBy: trackByRoute">
-				<ms-sidenav-item [item]="item" itemStyle="grey" [isExpanded]="isExpanded"></ms-sidenav-item>
-			</div>
-		</ng-template>
+		@if (currentMode === Modes.GUIDED) { @for (item of SidenavConstants.guided; track item.route) {
+		<div class="sidenav-items-wrapper">
+			<ms-sidenav-item [item]="item" [isExpanded]="isExpanded" itemStyle="grey"></ms-sidenav-item>
+		</div>
+		} } @else { @for (item of SidenavConstants.expert; track item.route) {
+		<div class="sidenav-items-wrapper">
+			<ms-sidenav-item [item]="item" itemStyle="grey" [isExpanded]="isExpanded"></ms-sidenav-item>
+		</div>
+		} }
 
 		<div class="mt-5">
 			<mat-divider></mat-divider>
 		</div>
 
-		<div class="sidenav-items-wrapper" *ngFor="let item of SidenavConstants.common; trackBy: trackByRoute">
+		@for (item of SidenavConstants.common; track item.route) {
+		<div class="sidenav-items-wrapper">
 			<ms-sidenav-item [item]="item" itemStyle="accent" [isExpanded]="isExpanded"></ms-sidenav-item>
 		</div>
+		}
 	</div>
 
 	<div class="mt-2 mb-4">
@@ -63,7 +65,9 @@
 	<div class="bottom-section-items">
 		<div class="sidebar-toggle" (click)="toggleSidebar()">
 			<mat-icon>{{ isExpanded ? 'chevron_left' : 'chevron_right' }}</mat-icon>
-			<span class="paragraph-semibold-p3-small-emphasis" *ngIf="isExpanded">Collapse</span>
+			@if (isExpanded) {
+			<span class="paragraph-semibold-p3-small-emphasis">Collapse</span>
+			}
 		</div>
 	</div>
 </div>
diff --git a/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.ts b/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.ts
index 2281a660..bc83818d 100644
--- a/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.ts
+++ b/frontend/src/app/modules/shared/components/ms-sidenav/ms-sidenav.component.ts
@@ -15,7 +15,6 @@
 //   SPDX-License-Identifier: Apache-2.0
 
 import { animate, state, style, transition, trigger } from '@angular/animations';
-import { NgFor, NgIf } from '@angular/common';
 import { Component, OnInit } from '@angular/core';
 import { MatDividerModule } from '@angular/material/divider';
 import { MatIconModule } from '@angular/material/icon';
@@ -27,7 +26,6 @@ import { RoutesList } from '../../../core/models/enums/routes-list.enum';
 import { ConfigsFacadeService } from '../../../core/services/configs-facade.service';
 import { MsSidenavItemComponent } from './components/ms-sidenav-item/ms-sidenav-item.component';
 import { SidenavConstants } from './models/constants/sidenav.constants';
-import { SidenavItem } from './models/interfaces/sidenav.interface';
 
 @UntilDestroy()
 @Component({
@@ -35,7 +33,7 @@ import { SidenavItem } from './models/interfaces/sidenav.interface';
 	templateUrl: './ms-sidenav.component.html',
 	styleUrls: ['./ms-sidenav.component.scss'],
 	standalone: true,
-	imports: [MsSidenavItemComponent, MatIconModule, NgIf, NgFor, MatDividerModule],
+	imports: [MsSidenavItemComponent, MatIconModule, MatDividerModule],
 	animations: [
 		trigger('expandCollapse', [
 			state('expanded', style({ width: '230px' })),
@@ -78,8 +76,4 @@ export class MsSidenavComponent implements OnInit {
 	toggleSidebar(): void {
 		this.isExpanded = !this.isExpanded;
 	}
-
-	trackByRoute(_: number, item: SidenavItem): string {
-		return item.route;
-	}
 }
diff --git a/frontend/src/app/modules/shared/components/ms-user-navigation/ms-user-navigation.component.html b/frontend/src/app/modules/shared/components/ms-user-navigation/ms-user-navigation.component.html
index 44ecacf2..f3c6ac7a 100644
--- a/frontend/src/app/modules/shared/components/ms-user-navigation/ms-user-navigation.component.html
+++ b/frontend/src/app/modules/shared/components/ms-user-navigation/ms-user-navigation.component.html
@@ -1,28 +1,30 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
 <button mat-button [matMenuTriggerFor]="menu" #menuTrigger="matMenuTrigger">
 	<div class="user-navigation-content-wrapper flex items-center gap-2">
 		<div class="content-1 flex items-center">
 			<mat-icon fontSet="ms" fontIcon="icon-User" class="mat-white"></mat-icon>
 		</div>
-		<div class="content-2 right text-left ml-2" *ngIf="user$ | async as currentUser">
+		@if (user$ | async; as currentUser) {
+		<div class="content-2 right text-left ml-2">
 			<div class="paragraph-semibold-p3-default-emphasis">{{ currentUser.name }}</div>
 			<div class="paragraph-regular-p3-default">{{ currentUser.role }}</div>
 		</div>
+		}
 		<div class="content-3">
 			<mat-icon
 				fontSet="ms"
diff --git a/frontend/src/app/modules/shared/directives/error-display/components/ms-error-message/ms-error-message.component.html b/frontend/src/app/modules/shared/directives/error-display/components/ms-error-message/ms-error-message.component.html
index 2d99b48d..25324836 100644
--- a/frontend/src/app/modules/shared/directives/error-display/components/ms-error-message/ms-error-message.component.html
+++ b/frontend/src/app/modules/shared/directives/error-display/components/ms-error-message/ms-error-message.component.html
@@ -1,19 +1,21 @@
 <!-- Copyright 2024 Cisco Systems, Inc. and its affiliates
 
-  Licensed under the Apache License, Version 2.0 (the "License");
-  you may not use this file except in compliance with the License.
-  You may obtain a copy of the License at
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
 
-       http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
 
-  Unless required by applicable law or agreed to in writing, software
-  distributed under the License is distributed on an "AS IS" BASIS,
-  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-  See the License for the specific language governing permissions and
-  limitations under the License.
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
 
-  SPDX-License-Identifier: Apache-2.0 -->
+SPDX-License-Identifier: Apache-2.0 -->
 
-<mat-error *ngIf="text" class="error-message">
+@if (text) {
+<mat-error class="error-message">
 	{{ text }}
 </mat-error>
+}
diff --git a/frontend/src/app/modules/shared/directives/error-display/components/ms-error-message/ms-error-message.component.ts b/frontend/src/app/modules/shared/directives/error-display/components/ms-error-message/ms-error-message.component.ts
index 69de0e46..a278d4bc 100644
--- a/frontend/src/app/modules/shared/directives/error-display/components/ms-error-message/ms-error-message.component.ts
+++ b/frontend/src/app/modules/shared/directives/error-display/components/ms-error-message/ms-error-message.component.ts
@@ -14,7 +14,6 @@
 
 //   SPDX-License-Identifier: Apache-2.0
 
-import { CommonModule } from '@angular/common';
 import { Component, Input } from '@angular/core';
 import { MatError } from '@angular/material/form-field';
 
@@ -23,7 +22,7 @@ import { MatError } from '@angular/material/form-field';
 	templateUrl: './ms-error-message.component.html',
 	styleUrls: ['./ms-error-message.component.scss'],
 	standalone: true,
-	imports: [CommonModule, MatError]
+	imports: [MatError]
 })
 export class MsErrorMessageComponent {
 	@Input() text?: string;