diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.html
index 17f1b7695..255fbf1d4 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-dashboard/admin-dashboard.component.html
@@ -19,12 +19,16 @@
 					autocomplete="off"
 					[(ngModel)]="searchValue"
 				></textarea>
-				<button *ngIf="searchValue" class="searchbar-btn" mat-icon-button aria-label="Clear" (click)="searchValue = ''">
-					<mat-icon>close</mat-icon>
-				</button>
-				<button *ngIf="!searchValue" class="searchbar-btn" mat-icon-button aria-label="Search">
-					<mat-icon>search</mat-icon>
-				</button>
+				@if (searchValue) {
+					<button class="searchbar-btn" mat-icon-button aria-label="Clear" (click)="searchValue = ''">
+						<mat-icon>close</mat-icon>
+					</button>
+				}
+				@if (!searchValue) {
+					<button class="searchbar-btn" mat-icon-button aria-label="Search">
+						<mat-icon>search</mat-icon>
+					</button>
+				}
 			</div>
 
 			<button id="sort-menu-btn" color="primary" mat-flat-button [matMenuTriggerFor]="sortMenu">
@@ -55,18 +59,14 @@
 		</mat-toolbar>
 
 		<div class="recordings-container">
-			<div *ngIf="!recordings || recordings.length === 0" class="no-recordings-warn">
-				<span>{{ 'ADMIN.RECORDINGS.EMPTY' | translate }}</span>
-			</div>
+			@if (!recordings || recordings.length === 0) {
+				<div class="no-recordings-warn">
+					<span>{{ 'ADMIN.RECORDINGS.EMPTY' | translate }}</span>
+				</div>
+			}
 
-			<div
-				*ngFor="
-					let recording of recordings
-						| searchByStringProperty: { properties: ['roomName', 'filename', 'outputMode'], filter: searchValue };
-					trackBy: trackByRecordingId
-				"
-				class="recording-card"
-			>
+			@for (recording of recordings | searchByStringProperty: { properties: ['roomName', 'filename', 'outputMode'], filter: searchValue }; track recording.id) {
+				<div class="recording-card">
 				<mat-card appearance="outlined" class="card">
 					<mat-card-content>
 						<div class="video-div-container">
@@ -74,36 +74,35 @@
 								src="data:image/png;base64,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VMq6zTgPA0qcHCgylbJuMx8DoNAPReYuObcZI1Wg2CdF5k4Zt5kXAVDg8Zs0ADuKzIjazGwAFPiuyHQk1zaz9jIAbjtUZDqVZ5txHgYU2VRkOpZlm/kZALd8VWS6kGObmTZSBW47U2S6lF2bmQ+Am+YUmRFqzByN9e1DANzwdEqR6VpmbaYZADfsKTK9yKvNPAuAdkuKzMj13WZmAqDN8o4ik4E+28xkALR5rcjkYX7FeRgwOKeKTCYu2ozzMGBQdhWZbPTRZsYDoMW3HorMcdAiizaz1giAa/uKTFZ6bjMTAXBtIXXnwbtgqB7OjvViPQCubKeubG4EhUbeZprOw4Brv1IXDg6Xg2KjbzOLAfDPuSKTpR7azFYAXDqZUmQy9aQ51p2VALi0ochkq7F1ZKQKv9m7Y5UGgigMo1cEKxFkxYhRWMyCmkKwsBCVrQSjnWJlY2NhF3yMFD6zrpWgyW5SzSznPMQUHzP/sJp7RSZhZWE8DFjF8ZEik7Sl2kwRAD9OFZnELdVmqgBoTBSZ5C3RZoYB0DhTZDLQuc28BcC3l9Ydmakik4Dd85P1LraNhwGNO0UmEx3bzF4ARDwrMtno1GbqAIiYKDL56NJmBgEQMV2b61ORSU6HNlMGQLzOLTLjIEHDgUeqQLur/2fDnh4VmUS1tZnbAJgzLfOhyCSsLIyHAW2uL9yRyc7CNjMKgIg7RSY/Ve0nVaDFzKulDJWFZUhgsfGlOzIZGg4c7sBC77P9tcbDzXGQjaqWZYAWh6fjjasgL+WW1V+AHvrbZgZ2IQGyV9VuQgL0ULnltw6AHvrVZuqdAKAfqvPt9UZxEAD0x87BaLRpVQYAAAAAAAAAAAAAAAAAAAAAAAAAAAAAgC/24EAAAAAAAMj/tRFUVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVYU9OBAAAAAAAPJ/bQRVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVWEPDgQAAAAAgPxfG0FVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVdiDAwEAAAAAIP/XRlBVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVFfbgQAAAAAAAyP+1EVRVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVhT04EAAAAAAA8n9tBFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVYQ8OBAAAAACA/F8bQVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVNgpGwSgYBaNgFDAAAL2hiP3OAIFCAAAAAElFTkSuQmCC"
 							/>
 							<div class="video-btns">
-								<button *ngIf="recording.status === recordingStatusEnum.READY" mat-icon-button (click)="play(recording)">
-									<mat-icon id="play" aria-label="Play" title="{{ 'PANEL.RECORDING.PLAY' | translate }}"
-										>play_arrow</mat-icon
-									>
-								</button>
+								@if (recording.status === recordingStatusEnum.READY) {
+									<button mat-icon-button (click)="play(recording)">
+										<mat-icon id="play" aria-label="Play" title="{{ 'PANEL.RECORDING.PLAY' | translate }}"
+											>play_arrow</mat-icon
+										>
+									</button>
+								}
 
-								<button
-									(click)="download(recording)"
-									*ngIf="
-										(recording.location && recording.status === recordingStatusEnum.READY) ||
-										recording.status === recordingStatusEnum.FAILED
-									"
-									mat-icon-button
-									aria-label="Download"
-									title="{{ 'PANEL.RECORDING.DOWNLOAD' | translate }}"
-								>
-									<mat-icon id="download">download</mat-icon>
-								</button>
-								<button
-									mat-icon-button
-									class="delete-recording-btn"
-									(click)="deleteRecording(recording)"
-									*ngIf="
-										recording.status === recordingStatusEnum.READY || recording.status === recordingStatusEnum.FAILED
-									"
-								>
-									<mat-icon id="delete" aria-label="Delete" title="{{ 'PANEL.RECORDING.DELETE' | translate }}"
-										>delete</mat-icon
+								@if ((recording.location && recording.status === recordingStatusEnum.READY) || recording.status === recordingStatusEnum.FAILED) {
+									<button
+										mat-icon-button
+										(click)="download(recording)"
+										aria-label="Download"
+										title="{{ 'PANEL.RECORDING.DOWNLOAD' | translate }}"
 									>
-								</button>
+										<mat-icon id="download">download</mat-icon>
+									</button>
+								}
+								@if (recording.status === recordingStatusEnum.READY || recording.status === recordingStatusEnum.FAILED) {
+									<button
+										mat-icon-button
+										class="delete-recording-btn"
+										(click)="deleteRecording(recording)"
+									>
+										<mat-icon id="delete" aria-label="Delete" title="{{ 'PANEL.RECORDING.DELETE' | translate }}"
+											>delete</mat-icon
+										>
+									</button>
+								}
 							</div>
 						</div>
 						<div class="video-info-container">
@@ -145,7 +144,8 @@
 					</mat-card-content>
 				</mat-card>
 			</div>
-		</div>
+		}
+	</div>
 
 		<div class="load-more-container">
 			<button mat-fab extended class="load-more-btn" (click)="loadMore($event)">
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.html
index 01baa4bda..a443b0274 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.html
@@ -1,37 +1,45 @@
 <mat-toolbar class="header"> {{ title || ('ADMIN.DASHBOARD_TITLE' | translate) }} </mat-toolbar>
 
 <div class="center-container">
-	<div *ngIf="loading" class="outer">
-		<div class="middle">
-			<div class="inner">
-				<mat-spinner [diameter]="50"></mat-spinner>
+	@if (loading) {
+		<div class="outer">
+			<div class="middle">
+				<div class="inner">
+					<mat-spinner [diameter]="50"></mat-spinner>
+				</div>
 			</div>
 		</div>
-	</div>
+	}
 
-	<mat-card *ngIf="!loading" class="card-container" appearance="outlined">
-		<mat-card-content>
-			<form [formGroup]="loginForm" (ngSubmit)="login()">
-				<mat-form-field appearance="outline" class="form-field">
-					<mat-label>{{ 'ADMIN.USERNAME' | translate }}</mat-label>
-					<input matInput formControlName="username" type="text" name="username" />
-					<mat-error *ngIf="loginForm.get('username')?.hasError('required')">
-						{{ 'ADMIN.USERNAME_REQUIRED' | translate }}
-					</mat-error>
-				</mat-form-field>
-				<mat-form-field appearance="outline" class="form-field">
-					<mat-label>{{ 'ADMIN.PASSWORD' | translate }}</mat-label>
-					<input matInput formControlName="password" type="password" name="password" autocomplete="current-password" />
-					<mat-error *ngIf="loginForm.get('password')?.hasError('required')">
-						{{ 'ADMIN.PASSWORD_REQUIRED' | translate }}
-					</mat-error>
-				</mat-form-field>
-				<div class="col-12 d-flex text-center">
-					<button mat-flat-button disableRipple class="form-btn" type="submit">
-						{{ 'ADMIN.LOGIN' | translate }}
-					</button>
-				</div>
-			</form>
-		</mat-card-content>
-	</mat-card>
+	@if (!loading) {
+		<mat-card class="card-container" appearance="outlined">
+			<mat-card-content>
+				<form [formGroup]="loginForm" (ngSubmit)="login()">
+					<mat-form-field appearance="outline" class="form-field">
+						<mat-label>{{ 'ADMIN.USERNAME' | translate }}</mat-label>
+						<input matInput formControlName="username" type="text" name="username" />
+						@if (loginForm.get('username')?.hasError('required')) {
+							<mat-error>
+								{{ 'ADMIN.USERNAME_REQUIRED' | translate }}
+							</mat-error>
+						}
+					</mat-form-field>
+					<mat-form-field appearance="outline" class="form-field">
+						<mat-label>{{ 'ADMIN.PASSWORD' | translate }}</mat-label>
+						<input matInput formControlName="password" type="password" name="password" autocomplete="current-password" />
+						@if (loginForm.get('password')?.hasError('required')) {
+							<mat-error>
+								{{ 'ADMIN.PASSWORD_REQUIRED' | translate }}
+							</mat-error>
+						}
+					</mat-form-field>
+					<div class="col-12 d-flex text-center">
+						<button mat-flat-button disableRipple class="form-btn" type="submit">
+							{{ 'ADMIN.LOGIN' | translate }}
+						</button>
+					</div>
+				</form>
+			</mat-card-content>
+		</mat-card>
+	}
 </div>
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.html
index 7b4da5f33..1b9a66d0e 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.html
@@ -1,45 +1,47 @@
 <div class="container" [ngClass]="{ withCaptions: captionsEnabled, withMargin: localParticipant.isMinimized }">
 	<div id="layout" class="layout" #layout>
-		<div
-			#localLayoutElement
-			*ngFor="let track of localParticipant.tracks; trackBy: trackParticipantElement"
-			[ngClass]="{
-				local_participant: true,
-				OV_root: !track.isAudioTrack && !track.isMinimized,
-				OV_publisher: !track.isAudioTrack && !track.isMinimized,
-				OV_minimized: track.isMinimized,
-				OV_big: track.isPinned,
-				OV_ignored: track.isAudioTrack && !track.participant.onlyHasAudioTracks,
-				OV_screen: track.isScreenTrack
-			}"
-			[id]="'participant-' + track.participant.identity"
-			cdkDrag
-			cdkDragBoundary=".layout"
-			[cdkDragDisabled]="!track.isMinimized"
-			[cdkDragFreeDragPosition]="!track.isMinimized ? { x: 0, y: 0 } : null"
-		>
-			<ng-container *ngTemplateOutlet="streamTemplate; context: { $implicit: track }"></ng-container>
-		</div>
+		@for (track of localParticipant.tracks; track track) {
+			<div
+				#localLayoutElement
+				[ngClass]="{
+					local_participant: true,
+					OV_root: !track.isAudioTrack && !track.isMinimized,
+					OV_publisher: !track.isAudioTrack && !track.isMinimized,
+					OV_minimized: track.isMinimized,
+					OV_big: track.isPinned,
+					OV_ignored: track.isAudioTrack && !track.participant.onlyHasAudioTracks,
+					OV_screen: track.isScreenTrack
+				}"
+				[id]="'participant-' + track.participant.identity"
+				cdkDrag
+				cdkDragBoundary=".layout"
+				[cdkDragDisabled]="!track.isMinimized"
+				[cdkDragFreeDragPosition]="!track.isMinimized ? { x: 0, y: 0 } : null"
+			>
+				<ng-container *ngTemplateOutlet="streamTemplate; context: { $implicit: track }"></ng-container>
+			</div>
+		}
 
 		<!-- Render additional layout elements injected via ovAdditionalLayoutElement -->
 		@if (layoutAdditionalElementsTemplate) {
 			<ng-container *ngTemplateOutlet="layoutAdditionalElementsTemplate"></ng-container>
 		}
 
-		<div
-			*ngFor="let track of remoteParticipants | tracks; trackBy: trackParticipantElement"
-			class="remote-participant"
-			[id]="'participant-' + track.participant.identity"
-			[ngClass]="{
-				OV_root: !track.isAudioTrack,
-				OV_publisher: !track.isAudioTrack,
-				OV_big: track.isPinned,
-				OV_ignored: track.isAudioTrack && !track.participant.onlyHasAudioTracks,
-				OV_screen: track.isScreenTrack
-			}"
-		>
-			<ng-container *ngTemplateOutlet="streamTemplate; context: { $implicit: track }"></ng-container>
-		</div>
+		@for (track of remoteParticipants | tracks; track track) {
+			<div
+				class="remote-participant"
+				[id]="'participant-' + track.participant.identity"
+				[ngClass]="{
+					OV_root: !track.isAudioTrack,
+					OV_publisher: !track.isAudioTrack,
+					OV_big: track.isPinned,
+					OV_ignored: track.isAudioTrack && !track.participant.onlyHasAudioTracks,
+					OV_screen: track.isScreenTrack
+				}"
+			>
+				<ng-container *ngTemplateOutlet="streamTemplate; context: { $implicit: track }"></ng-container>
+			</div>
+		}
 	</div>
 
 	<!-- <ov-captions *ngIf="captionsEnabled" class="OV_ignored"></ov-captions> -->
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.html
index a663b4d18..9f620a7e0 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.html
@@ -8,25 +8,27 @@
 
 	<div class="activities-body-container">
 		<mat-accordion [multi]="false">
-			<ov-recording-activity
-				*ngIf="showRecordingActivity"
-				id="recording-activity"
-				[expanded]="expandedPanel === 'recording'"
-				(onRecordingStartRequested)="onRecordingStartRequested.emit($event)"
-				(onRecordingStopRequested)="onRecordingStopRequested.emit($event)"
-				(onRecordingDeleteRequested)="onRecordingDeleteRequested.emit($event)"
-				(onRecordingDownloadClicked)="onRecordingDownloadClicked.emit($event)"
-				(onRecordingPlayClicked)="onRecordingPlayClicked.emit($event)"
-				(onViewRecordingClicked)="onViewRecordingClicked.emit($event)"
-				(onViewRecordingsClicked)="onViewRecordingsClicked.emit()"
-			></ov-recording-activity>
-			<ov-broadcasting-activity
-				*ngIf="showBroadcastingActivity"
-				id="broadcasting-activity"
-				[expanded]="expandedPanel === 'broadcasting'"
-				(onBroadcastingStartRequested)="onBroadcastingStartRequested.emit($event)"
-				(onBroadcastingStopRequested)="onBroadcastingStopRequested.emit($event)"
-			></ov-broadcasting-activity>
+			@if (showRecordingActivity) {
+				<ov-recording-activity
+					id="recording-activity"
+					[expanded]="expandedPanel === 'recording'"
+					(onRecordingStartRequested)="onRecordingStartRequested.emit($event)"
+					(onRecordingStopRequested)="onRecordingStopRequested.emit($event)"
+					(onRecordingDeleteRequested)="onRecordingDeleteRequested.emit($event)"
+					(onRecordingDownloadClicked)="onRecordingDownloadClicked.emit($event)"
+					(onRecordingPlayClicked)="onRecordingPlayClicked.emit($event)"
+					(onViewRecordingClicked)="onViewRecordingClicked.emit($event)"
+					(onViewRecordingsClicked)="onViewRecordingsClicked.emit()"
+				></ov-recording-activity>
+			}
+			@if (showBroadcastingActivity) {
+				<ov-broadcasting-activity
+					id="broadcasting-activity"
+					[expanded]="expandedPanel === 'broadcasting'"
+					(onBroadcastingStartRequested)="onBroadcastingStartRequested.emit($event)"
+					(onBroadcastingStopRequested)="onBroadcastingStopRequested.emit($event)"
+				></ov-broadcasting-activity>
+			}
 		</mat-accordion>
 	</div>
 </div>
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
index cac42c815..b9a797651 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html
@@ -73,28 +73,30 @@
 				/>
 				<button
 					mat-icon-button
-					*ngIf="broadcastingStatus !== broadcastingStatusEnum.STARTED"
-					id="broadcasting-btn"
-					[disabled]="
-						!broadcastUrl ||
-						broadcastingStatus === broadcastingStatusEnum.STARTING ||
-						broadcastingStatus === broadcastingStatusEnum.STOPPING
-					"
-					(click)="startBroadcasting()"
-					matTooltip="{{ 'PANEL.STREAMING.START' | translate }}"
+					@if (broadcastingStatus !== broadcastingStatusEnum.STARTED) {
+						id="broadcasting-btn"
+						[disabled]="
+							!broadcastUrl ||
+							broadcastingStatus === broadcastingStatusEnum.STARTING ||
+							broadcastingStatus === broadcastingStatusEnum.STOPPING
+						"
+						(click)="startBroadcasting()"
+						matTooltip="{{ 'PANEL.STREAMING.START' | translate }}"
+					}
 				>
 					<mat-icon>play_circle</mat-icon>
 				</button>
 
-				<button
-					mat-icon-button
-					*ngIf="broadcastingStatus === broadcastingStatusEnum.STARTED"
-					id="stop-broadcasting-btn"
-					(click)="stopBroadcasting()"
-					matTooltip="{{ 'PANEL.STREAMING.STOP' | translate }}"
-				>
-					<mat-icon>stop_circle</mat-icon>
-				</button>
+				@if (broadcastingStatus === broadcastingStatusEnum.STARTED) {
+					<button
+						mat-icon-button
+						id="stop-broadcasting-btn"
+						(click)="stopBroadcasting()"
+						matTooltip="{{ 'PANEL.STREAMING.STOP' | translate }}"
+					>
+						<mat-icon>stop_circle</mat-icon>
+					</button>
+				}
 			</div>
 
 			<div>
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.html
index 8b3903655..8a2024993 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/chat-panel/chat-panel.component.html
@@ -11,17 +11,23 @@
 	</div>
 
 	<div class="messages-container" #chatScroll>
-		<div *ngFor="let data of messageList" class="message" [ngClass]="data.isLocal ? 'right' : 'left'">
-			<div class="msg-detail">
-				<div class="participant-name-container">
-					<p *ngIf="data.isLocal">{{ 'PANEL.CHAT.YOU' | translate }}</p>
-					<p *ngIf="!data.isLocal">{{ data.participantName }}</p>
-				</div>
-				<div class="chat-message">
-					<p [innerHTML]="data.message | linkify"></p>
+		@for (data of messageList; track data) {
+			<div class="message" [ngClass]="data.isLocal ? 'right' : 'left'">
+				<div class="msg-detail">
+					<div class="participant-name-container">
+						@if (data.isLocal) {
+							<p>{{ 'PANEL.CHAT.YOU' | translate }}</p>
+						}
+						@if (!data.isLocal) {
+							<p>{{ data.participantName }}</p>
+						}
+					</div>
+					<div class="chat-message">
+						<p [innerHTML]="data.message | linkify"></p>
+					</div>
 				</div>
 			</div>
-		</div>
+		}
 	</div>
 
 	<div class="input-container">
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.html
index 29455aeef..75c8509ab 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/panel.component.html
@@ -1,30 +1,29 @@
 <!-- CHAT panel -->
-<ng-container *ngIf="isChatPanelOpened">
+@if (isChatPanelOpened) {
 	<ng-container *ngTemplateOutlet="chatPanelTemplate"></ng-container>
-</ng-container>
-
+}
 
 <!-- PARTICIPANTS panel -->
-<ng-container *ngIf="isParticipantsPanelOpened">
+@if (isParticipantsPanelOpened) {
 	<ng-container *ngTemplateOutlet="participantsPanelTemplate"></ng-container>
-</ng-container>
+}
 
 <!-- Background effects panel -->
-<ng-container *ngIf="isBackgroundEffectsPanelOpened">
+@if (isBackgroundEffectsPanelOpened) {
 	<ng-container *ngTemplateOutlet="backgroundEffectsPanelTemplate"></ng-container>
-</ng-container>
+}
 
 <!-- Settings panel -->
-<ng-container *ngIf="isSettingsPanelOpened">
+@if (isSettingsPanelOpened) {
 	<ng-container *ngTemplateOutlet="settingsPanelTemplate"></ng-container>
-</ng-container>
+}
 
 <!-- Activities panel -->
-<ng-container *ngIf="isActivitiesPanelOpened">
+@if (isActivitiesPanelOpened) {
 	<ng-container *ngTemplateOutlet="activitiesPanelTemplate"></ng-container>
-</ng-container>
+}
 
 <!-- External additional panels  -->
-<ng-container *ngIf="additionalPanelsTemplate && isExternalPanelOpened">
+@if (additionalPanelsTemplate && isExternalPanelOpened) {
 	<ng-container *ngTemplateOutlet="additionalPanelsTemplate"></ng-container>
-</ng-container>
+}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html
index fb3e9aa18..b2f1a9d52 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/participants-panel/participants-panel/participants-panel.component.html
@@ -7,17 +7,25 @@
 	</div>
 
 	<div class="scrollable">
-		<div class="local-participant-container" *ngIf="localParticipant">
-			<ng-container *ngTemplateOutlet="participantPanelItemTemplate; context: { $implicit: localParticipant }"></ng-container>
-			<mat-divider *ngIf="true"></mat-divider>
-		</div>
+		@if (localParticipant) {
+			<div class="local-participant-container">
+				<ng-container *ngTemplateOutlet="participantPanelItemTemplate; context: { $implicit: localParticipant }"></ng-container>
+				@if (true) {
+					<mat-divider></mat-divider>
+				}
+			</div>
+		}
 		<ng-container *ngTemplateOutlet="participantPanelAfterLocalParticipantTemplate"></ng-container>
 
-		<div class="remote-participants-container" id="remote-participants-container" *ngIf="remoteParticipants.length > 0">
-			<div *ngFor="let participant of this.remoteParticipants" id="remote-participant-item">
-				<ng-container *ngTemplateOutlet="participantPanelItemTemplate; context: { $implicit: participant }"></ng-container>
+		@if (remoteParticipants.length > 0) {
+			<div class="remote-participants-container" id="remote-participants-container">
+				@for (participant of this.remoteParticipants; track participant.identity) {
+					<div id="remote-participant-item">
+						<ng-container *ngTemplateOutlet="participantPanelItemTemplate; context: { $implicit: participant }"></ng-container>
+					</div>
+				}
 			</div>
-		</div>
+		}
 	</div>
 </div>
 
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.html
index 452e5121d..4e0dcd9b3 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.html
@@ -24,32 +24,40 @@
 					[matTooltipDisabled]="!shouldHideMenuText"
 				>
 					<mat-icon matListItemIcon>manage_accounts</mat-icon>
-					<div *ngIf="!shouldHideMenuText" class="option-text">{{ 'PANEL.SETTINGS.GENERAL' | translate }}</div>
-				</mat-list-option>
-				<mat-list-option
-					*ngIf="showCameraButton"
-					class="option"
-					id="video-opt"
-					[selected]="selectedOption === settingsOptions.VIDEO"
-					[value]="settingsOptions.VIDEO"
-					matTooltip="{{ shouldHideMenuText ? ('PANEL.SETTINGS.VIDEO' | translate) : '' }}"
-					[matTooltipDisabled]="!shouldHideMenuText"
-				>
-					<mat-icon matListItemIcon>videocam</mat-icon>
-					<div *ngIf="!shouldHideMenuText" class="option-text">{{ 'PANEL.SETTINGS.VIDEO' | translate }}</div>
-				</mat-list-option>
-				<mat-list-option
-					*ngIf="showMicrophoneButton"
-					class="option"
-					id="audio-opt"
-					[selected]="selectedOption === settingsOptions.AUDIO"
-					[value]="settingsOptions.AUDIO"
-					matTooltip="{{ shouldHideMenuText ? ('PANEL.SETTINGS.AUDIO' | translate) : '' }}"
-					[matTooltipDisabled]="!shouldHideMenuText"
-				>
-					<mat-icon matListItemIcon>mic</mat-icon>
-					<div *ngIf="!shouldHideMenuText" class="option-text">{{ 'PANEL.SETTINGS.AUDIO' | translate }}</div>
+					@if (!shouldHideMenuText) {
+						<div class="option-text">{{ 'PANEL.SETTINGS.GENERAL' | translate }}</div>
+					}
 				</mat-list-option>
+				@if (showCameraButton) {
+					<mat-list-option
+						class="option"
+						id="video-opt"
+						[selected]="selectedOption === settingsOptions.VIDEO"
+						[value]="settingsOptions.VIDEO"
+						matTooltip="{{ shouldHideMenuText ? ('PANEL.SETTINGS.VIDEO' | translate) : '' }}"
+						[matTooltipDisabled]="!shouldHideMenuText"
+					>
+						<mat-icon matListItemIcon>videocam</mat-icon>
+						@if (!shouldHideMenuText) {
+							<div class="option-text">{{ 'PANEL.SETTINGS.VIDEO' | translate }}</div>
+						}
+					</mat-list-option>
+				}
+				@if (showMicrophoneButton) {
+					<mat-list-option
+						class="option"
+						id="audio-opt"
+						[selected]="selectedOption === settingsOptions.AUDIO"
+						[value]="settingsOptions.AUDIO"
+						matTooltip="{{ shouldHideMenuText ? ('PANEL.SETTINGS.AUDIO' | translate) : '' }}"
+						[matTooltipDisabled]="!shouldHideMenuText"
+					>
+						<mat-icon matListItemIcon>mic</mat-icon>
+						@if (!shouldHideMenuText) {
+							<div class="option-text">{{ 'PANEL.SETTINGS.AUDIO' | translate }}</div>
+						}
+					</mat-list-option>
+				}
 				<!-- <mat-list-option
 					*ngIf="showCaptions"
 					class="option"
@@ -66,52 +74,58 @@
 		</div>
 
 		<div class="item-content" [class.full-width]="isVerticalLayout">
-			<div *ngIf="selectedOption === settingsOptions.GENERAL" class="general-settings">
-				<div class="nickname-section">
-					<mat-label class="input-label">{{ 'PREJOIN.NICKNAME' | translate }}</mat-label>
-					<div class="nickname-input-container">
-						<ov-participant-name-input></ov-participant-name-input>
+			@if (selectedOption === settingsOptions.GENERAL) {
+				<div class="general-settings">
+					<div class="nickname-section">
+						<mat-label class="input-label">{{ 'PREJOIN.NICKNAME' | translate }}</mat-label>
+						<div class="nickname-input-container">
+							<ov-participant-name-input></ov-participant-name-input>
+						</div>
 					</div>
-				</div>
-				<div class="language-section">
-					<mat-list>
-						<mat-list-item class="lang-selector">
-							<mat-icon matListItemIcon>translate</mat-icon>
-							<div matListItemTitle>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
-							<ov-lang-selector matListItemMeta (onLangChanged)="onLangChanged.emit($event)"></ov-lang-selector>
-						</mat-list-item>
-					</mat-list>
-				</div>
-				@if (showThemeSelector) {
-					<div class="theme-section">
+					<div class="language-section">
 						<mat-list>
-							<mat-list-item class="theme-selector">
-								<mat-icon matListItemIcon class="material-symbols-outlined">routine</mat-icon>
-								<div matListItemTitle>{{ 'PANEL.SETTINGS.THEME' | translate }}</div>
-								<ov-theme-selector matListItemMeta></ov-theme-selector>
+							<mat-list-item class="lang-selector">
+								<mat-icon matListItemIcon>translate</mat-icon>
+								<div matListItemTitle>{{ 'PANEL.SETTINGS.LANGUAGE' | translate }}</div>
+								<ov-lang-selector matListItemMeta (onLangChanged)="onLangChanged.emit($event)"></ov-lang-selector>
 							</mat-list-item>
 						</mat-list>
 					</div>
-				}
-				<!-- Additional elements injected via directive -->
-				@if (generalAdditionalElementsTemplate) {
-					<div class="additional-elements-section">
-						<ng-container *ngTemplateOutlet="generalAdditionalElementsTemplate"></ng-container>
-					</div>
-				}
-			</div>
-			<div *ngIf="showCameraButton && selectedOption === settingsOptions.VIDEO" class="video-settings">
-				<ov-video-devices-select
-					(onVideoDeviceChanged)="onVideoDeviceChanged.emit($event)"
-					(onVideoEnabledChanged)="onVideoEnabledChanged.emit($event)"
-				></ov-video-devices-select>
-			</div>
-			<div *ngIf="showMicrophoneButton && selectedOption === settingsOptions.AUDIO" class="audio-settings">
-				<ov-audio-devices-select
-					(onAudioDeviceChanged)="onAudioDeviceChanged.emit($event)"
-					(onAudioEnabledChanged)="onAudioEnabledChanged.emit($event)"
-				></ov-audio-devices-select>
-			</div>
+					@if (showThemeSelector) {
+						<div class="theme-section">
+							<mat-list>
+								<mat-list-item class="theme-selector">
+									<mat-icon matListItemIcon class="material-symbols-outlined">routine</mat-icon>
+									<div matListItemTitle>{{ 'PANEL.SETTINGS.THEME' | translate }}</div>
+									<ov-theme-selector matListItemMeta></ov-theme-selector>
+								</mat-list-item>
+							</mat-list>
+						</div>
+					}
+					<!-- Additional elements injected via directive -->
+					@if (generalAdditionalElementsTemplate) {
+						<div class="additional-elements-section">
+							<ng-container *ngTemplateOutlet="generalAdditionalElementsTemplate"></ng-container>
+						</div>
+					}
+				</div>
+			}
+			@if (showCameraButton && selectedOption === settingsOptions.VIDEO) {
+				<div class="video-settings">
+					<ov-video-devices-select
+						(onVideoDeviceChanged)="onVideoDeviceChanged.emit($event)"
+						(onVideoEnabledChanged)="onVideoEnabledChanged.emit($event)"
+					></ov-video-devices-select>
+				</div>
+			}
+			@if (showMicrophoneButton && selectedOption === settingsOptions.AUDIO) {
+				<div class="audio-settings">
+					<ov-audio-devices-select
+						(onAudioDeviceChanged)="onAudioDeviceChanged.emit($event)"
+						(onAudioEnabledChanged)="onAudioEnabledChanged.emit($event)"
+					></ov-audio-devices-select>
+				</div>
+			}
 			<!-- <div *ngIf="selectedOption === settingsOptions.CAPTIONS && showCaptions" class="captions-settings">
 				<ov-captions-settings></ov-captions-settings>
 			</div> -->
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
index 4a843869e..284e9eea2 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html
@@ -41,27 +41,31 @@
 								<!-- Video Controls Overlay -->
 								<div class="video-overlay">
 									<div class="device-controls">
-										<div class="control-group" *ngIf="showCameraButton">
-											<ov-video-devices-select
-												[compact]="true"
-												(onVideoDeviceChanged)="videoDeviceChanged($event)"
-												(onVideoEnabledChanged)="videoEnabledChanged($event)"
-												(onVideoDevicesLoaded)="onVideoDevicesLoaded($event)"
-												class="device-selector"
-											>
-											</ov-video-devices-select>
-										</div>
+										@if (showCameraButton) {
+											<div class="control-group">
+												<ov-video-devices-select
+													[compact]="true"
+													(onVideoDeviceChanged)="videoDeviceChanged($event)"
+													(onVideoEnabledChanged)="videoEnabledChanged($event)"
+													(onVideoDevicesLoaded)="onVideoDevicesLoaded($event)"
+													class="device-selector"
+												>
+												</ov-video-devices-select>
+											</div>
+										}
 
-										<div class="control-group" *ngIf="showMicrophoneButton">
-											<ov-audio-devices-select
-												[compact]="true"
-												(onAudioDeviceChanged)="audioDeviceChanged($event)"
-												(onAudioEnabledChanged)="audioEnabledChanged($event)"
-												(onDeviceSelectorClicked)="onDeviceSelectorClicked()"
-												class="device-selector"
-											>
-											</ov-audio-devices-select>
-										</div>
+										@if (showMicrophoneButton) {
+											<div class="control-group">
+												<ov-audio-devices-select
+													[compact]="true"
+													(onAudioDeviceChanged)="audioDeviceChanged($event)"
+													(onAudioEnabledChanged)="audioEnabledChanged($event)"
+													(onDeviceSelectorClicked)="onDeviceSelectorClicked()"
+													class="device-selector"
+												>
+												</ov-audio-devices-select>
+											</div>
+										}
 									</div>
 
 									<!-- Virtual Background Button -->
@@ -93,22 +97,26 @@
 						<!-- Configuration Section -->
 						<div class="configuration-section">
 							<!-- Participant Name Input -->
-							<div class="participant-name-container input-section" *ngIf="showParticipantName">
-								<ov-participant-name-input
-									[isPrejoinPage]="true"
-									[error]="!!_error"
-									(onNameUpdated)="onParticipantNameChanged($event)"
-									(onEnterPressed)="onEnterPressed()"
-									class="name-input"
-								>
-								</ov-participant-name-input>
-							</div>
+							@if (showParticipantName) {
+								<div class="participant-name-container input-section">
+									<ov-participant-name-input
+										[isPrejoinPage]="true"
+										[error]="!!_error"
+										(onNameUpdated)="onParticipantNameChanged($event)"
+										(onEnterPressed)="onEnterPressed()"
+										class="name-input"
+									>
+									</ov-participant-name-input>
+								</div>
+							}
 
 							<!-- Error Message -->
-							<div *ngIf="!!_error" class="error-message" id="token-error">
-								<mat-icon class="error-icon">error_outline</mat-icon>
-								<span class="error-text">{{ _error }}</span>
-							</div>
+							@if (!!_error) {
+								<div class="error-message" id="token-error">
+									<mat-icon class="error-icon">error_outline</mat-icon>
+									<span class="error-text">{{ _error }}</span>
+								</div>
+							}
 
 							<!-- Join Button -->
 							<div class="join-section">
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.html
index 499a6866e..05fa86ef3 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/session/session.component.html
@@ -29,8 +29,10 @@
 			</mat-sidenav-content>
 		</mat-sidenav-container>
 
-		<div id="footer-container" *ngIf="toolbarTemplate">
-			<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
-		</div>
+		@if (toolbarTemplate) {
+			<div id="footer-container">
+				<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
+			</div>
+		}
 	</div>
 }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.html
index c95fb3771..b3f1b074d 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/audio-devices/audio-devices.component.html
@@ -56,7 +56,9 @@
 						>
 							<mat-icon class="device-icon">mic</mat-icon>
 							<span class="selected-device-name">{{ microphoneSelected?.label || 'No microphone selected' }}</span>
-							<mat-icon class="dropdown-icon" *ngIf="microphones.length > 1">expand_more</mat-icon>
+							@if (microphones.length > 1) {
+								<mat-icon class="dropdown-icon">expand_more</mat-icon>
+							}
 						</button>
 					</div>
 				} @else {
@@ -91,7 +93,9 @@
 				(click)="onMicrophoneSelected({ value: microphone })"
 				[class.selected]="microphone.device === microphoneSelected.device"
 			>
-				<mat-icon *ngIf="microphone.device === microphoneSelected.device">check</mat-icon>
+				@if (microphone.device === microphoneSelected.device) {
+					<mat-icon>check</mat-icon>
+				}
 				<span>{{ microphone.label }}</span>
 			</button>
 		}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.html
index dd65e256a..e222e4753 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/settings/video-devices/video-devices.component.html
@@ -55,7 +55,9 @@
 					>
 						<mat-icon class="device-icon">videocam</mat-icon>
 						<span class="selected-device-name">{{ cameraSelected?.label || 'No camera selected' }}</span>
-						<mat-icon class="dropdown-icon" *ngIf="cameras.length > 1">expand_more</mat-icon>
+						@if (cameras.length > 1) {
+							<mat-icon class="dropdown-icon">expand_more</mat-icon>
+						}
 					</button>
 				</div>
 			} @else {
@@ -87,7 +89,9 @@
 				(click)="onCameraSelected({ value: camera })"
 				[class.selected]="camera.device === cameraSelected?.device"
 			>
-				<mat-icon *ngIf="camera.device === cameraSelected?.device" class="check-icon">check</mat-icon>
+				@if (camera.device === cameraSelected?.device) {
+					<mat-icon class="check-icon">check</mat-icon>
+				}
 				<span>{{ camera.label }}</span>
 			</button>
 		}
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html
index 0ef95f53b..5dc268c1e 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html
@@ -1,83 +1,112 @@
-<div
-	*ngIf="_track.participant"
-	[ngClass]="{
-		OV_stream: !_track.isAudioTrack || (_track.isAudioTrack && _track.participant.onlyHasAudioTracks),
-		'no-size': !showVideo,
-		local: _track.participant.isLocal,
-		remote: !_track.participant.isLocal,
-		speaking: !isMinimal && showAudioDetection && _track.participant.isSpeaking && _track.isCameraTrack
-	}"
-	[id]="'stream-' + _track.source + '-' + _track.trackSid"
-	(mousemove)="mouseHover($event)"
-	#streamContainer
->
+@if (_track.participant) {
 	<div
-		*ngIf="!isMinimal && showParticipantName && !_track.isAudioTrack || (_track.isAudioTrack && _track.participant.onlyHasAudioTracks)"
-		id="participant-name-container"
-		class="participant-name"
-		[class.fullscreen]="isFullscreen"
+		[ngClass]="{
+			OV_stream: !_track.isAudioTrack || (_track.isAudioTrack && _track.participant.onlyHasAudioTracks),
+			'no-size': !showVideo,
+			local: _track.participant.isLocal,
+			remote: !_track.participant.isLocal,
+			speaking: !isMinimal && showAudioDetection && _track.participant.isSpeaking && _track.isCameraTrack
+		}"
+		[id]="'stream-' + _track.source + '-' + _track.trackSid"
+		(mousemove)="mouseHover($event)"
+		#streamContainer
 	>
-		<div class="participant-name-container">
-			<span id="participant-name">{{ _track.participant.name }}</span>
-			<span *ngIf="_track.isScreenTrack" id="participant-name">_SCREEN</span>
-		</div>
-	</div>
-
-	<div *ngIf="!isMinimal && showAudioDetection && _track.participant.isSpeaking && _track.isCameraTrack" id="audio-wave-container">
-		<ov-audio-wave></ov-audio-wave>
-	</div>
-
-	<ov-media-element
-		[track]="_track.track"
-		[showAvatar]="_track.participant.onlyHasAudioTracks || (_track.isCameraTrack && !_track.participant.isCameraEnabled)"
-		[avatarColor]="_track.participant.colorProfile"
-		[avatarName]="_track.participant.name"
-		[muted]="_track.isMutedForcibly"
-		[isLocal]="_track.participant.isLocal"
-		[hasEncryptionError]="_track.participant.hasEncryptionError"
-	></ov-media-element>
-
-	@if (!_track.participant.hasEncryptionError) {
-		<div class="status-icons">
-			<mat-icon id="status-mic" fontIcon="mic_off" *ngIf="!_track.participant?.isMicrophoneEnabled"></mat-icon>
-			<mat-icon id="status-muted-forcibly" fontIcon="volume_off" *ngIf="_track.isMutedForcibly"></mat-icon>
-			<mat-icon id="status-pinned" fontIcon="push_pin" *ngIf="_track.isPinned"></mat-icon>
-		</div>
-
-		<div class="stream-video-controls" *ngIf="!isMinimal && showVideoControls && mouseHovering">
-			<div class="flex-container">
-				<button
-					mat-icon-button
-					id="pin-btn"
-					(click)="toggleVideoPinned()"
-					[matTooltip]="_track.isPinned ? ('STREAM.UNPIN' | translate) : ('STREAM.PIN' | translate)"
-				>
-					<mat-icon *ngIf="_track.isPinned" fontSet="material-symbols-outlined" fontIcon="keep">keep_off</mat-icon>
-					<mat-icon *ngIf="!_track.isPinned" id="status-pinned" fontIcon="push_pin"></mat-icon>
-				</button>
-				<button
-					*ngIf="!_track.participant.isLocal"
-					mat-icon-button
-					id="silence-btn"
-					(click)="toggleMuteForcibly()"
-					[class.muted-btn]="_track.isMutedForcibly"
-					[matTooltip]="_track.isMutedForcibly ? ('STREAM.UNMUTE_SOUND' | translate) : ('STREAM.MUTE_SOUND' | translate)"
-				>
-					<mat-icon *ngIf="_track.isMutedForcibly">volume_off</mat-icon>
-					<mat-icon *ngIf="!_track.isMutedForcibly">volume_up</mat-icon>
-				</button>
-				<button
-					*ngIf="_track.participant.isLocal"
-					mat-icon-button
-					id="minimize-btn"
-					[disabled]="_track.isPinned"
-					(click)="toggleMinimize()"
-					[matTooltip]="_track.isMinimized ? ('STREAM.MAXIMIZE' | translate) : ('STREAM.MINIMIZE' | translate)"
-				>
-					<mat-icon *ngIf="_track.isMinimized">open_in_full</mat-icon>
-					<mat-icon *ngIf="!_track.isMinimized">close_fullscreen</mat-icon>
-				</button>
+		@if ((!isMinimal && showParticipantName && !_track.isAudioTrack) || (_track.isAudioTrack && _track.participant.onlyHasAudioTracks)) {
+			<div
+				id="participant-name-container"
+				class="participant-name"
+				[class.fullscreen]="isFullscreen"
+			>
+				<div class="participant-name-container">
+					<span id="participant-name">{{ _track.participant.name }}</span>
+					@if (_track.isScreenTrack) {
+						<span id="participant-name">_SCREEN</span>
+					}
+				</div>
 			</div>
-		</div>
-	}
-</div>
+		}
+
+		@if (!isMinimal && showAudioDetection && _track.participant.isSpeaking && _track.isCameraTrack) {
+			<div id="audio-wave-container">
+				<ov-audio-wave></ov-audio-wave>
+			</div>
+		}
+
+		<ov-media-element
+			[track]="_track.track"
+			[showAvatar]="_track.participant.onlyHasAudioTracks || (_track.isCameraTrack && !_track.participant.isCameraEnabled)"
+			[avatarColor]="_track.participant.colorProfile"
+			[avatarName]="_track.participant.name"
+			[muted]="_track.isMutedForcibly"
+			[isLocal]="_track.participant.isLocal"
+			[hasEncryptionError]="_track.participant.hasEncryptionError"
+		></ov-media-element>
+
+		@if (!_track.participant.hasEncryptionError) {
+			<div class="status-icons">
+				@if (!_track.participant?.isMicrophoneEnabled) {
+					<mat-icon id="status-mic" fontIcon="mic_off"></mat-icon>
+				}
+				@if (_track.isMutedForcibly) {
+					<mat-icon id="status-muted-forcibly" fontIcon="volume_off"></mat-icon>
+				}
+				@if (_track.isPinned) {
+					<mat-icon id="status-pinned" fontIcon="push_pin"></mat-icon>
+				}
+			</div>
+		}
+
+		@if (!isMinimal && showVideoControls && mouseHovering && !_track.participant.hasEncryptionError) {
+			<div class="stream-video-controls">
+				<div class="flex-container">
+					<button
+						mat-icon-button
+						id="pin-btn"
+						(click)="toggleVideoPinned()"
+						[matTooltip]="_track.isPinned ? ('STREAM.UNPIN' | translate) : ('STREAM.PIN' | translate)"
+					>
+						@if (_track.isPinned) {
+							<mat-icon fontSet="material-symbols-outlined" fontIcon="keep">keep_off</mat-icon>
+						}
+						@if (!_track.isPinned) {
+							<mat-icon id="status-pinned" fontIcon="push_pin"></mat-icon>
+						}
+					</button>
+					@if (!_track.participant.isLocal) {
+						<button
+							mat-icon-button
+							id="silence-btn"
+							(click)="toggleMuteForcibly()"
+							[class.muted-btn]="_track.isMutedForcibly"
+							[matTooltip]="_track.isMutedForcibly ? ('STREAM.UNMUTE_SOUND' | translate) : ('STREAM.MUTE_SOUND' | translate)"
+						>
+							@if (_track.isMutedForcibly) {
+								<mat-icon>volume_off</mat-icon>
+							}
+							@if (!_track.isMutedForcibly) {
+								<mat-icon>volume_up</mat-icon>
+							}
+						</button>
+					}
+					@if (_track.participant.isLocal) {
+						<button
+							mat-icon-button
+							id="minimize-btn"
+							[disabled]="_track.isPinned"
+							(click)="toggleMinimize()"
+							[matTooltip]="_track.isMinimized ? ('STREAM.MAXIMIZE' | translate) : ('STREAM.MINIMIZE' | translate)"
+						>
+							@if (_track.isMinimized) {
+								<mat-icon>open_in_full</mat-icon>
+							}
+							@if (!_track.isMinimized) {
+								<mat-icon>close_fullscreen</mat-icon>
+							}
+						</button>
+					}
+				</div>
+			</div>
+		}
+	</div>
+}
+
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts
index a7b1054de..4eb9931f2 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.ts
@@ -11,6 +11,7 @@ import { CdkOverlayService } from '../../services/cdk-overlay/cdk-overlay.servic
 import { OpenViduComponentsConfigService } from '../../services/config/directive-config.service';
 import { LayoutService } from '../../services/layout/layout.service';
 import { ParticipantService } from '../../services/participant/participant.service';
+import { TranslatePipe } from '../../pipes/translate.pipe';
 
 /**
  * The **StreamComponent** is hosted inside of the {@link LayoutComponent}.
@@ -21,7 +22,7 @@ import { ParticipantService } from '../../services/participant/participant.servi
 	templateUrl: './stream.component.html',
 	styleUrls: ['./stream.component.scss'],
 	standalone: true,
-	imports: [CommonModule, AppMaterialModule, AudioWaveComponent, MediaElementComponent]
+	imports: [CommonModule, AppMaterialModule, AudioWaveComponent, MediaElementComponent, TranslatePipe]
 })
 export class StreamComponent implements OnInit, OnDestroy {
 	/**
@@ -193,21 +194,18 @@ export class StreamComponent implements OnInit, OnDestroy {
 			.pipe(takeUntil(this.destroy$))
 			.subscribe((value: boolean) => {
 				this.showParticipantName = value;
-				// this.cd.markForCheck();
 			});
 
 		this.libService.displayAudioDetection$
 			.pipe(takeUntil(this.destroy$))
 			.subscribe((value: boolean) => {
 				this.showAudioDetection = value;
-				// this.cd.markForCheck();
 			});
 
 		this.libService.streamVideoControls$
 			.pipe(takeUntil(this.destroy$))
 			.subscribe((value: boolean) => {
 				this.showVideoControls = value;
-				// this.cd.markForCheck();
 			});
 	}
 }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.html
index f2c3bba7e..e7d86fa53 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.html
@@ -159,17 +159,22 @@
 		}
 
 		<!-- Captions button -->
-		<!-- <button
-			*ngIf="!isMinimal && showCaptionsButton"
-			[disabled]="isConnectionLost"
-			mat-menu-item
-			id="captions-btn"
-			(click)="onCaptionsToggle()"
-		>
-			<mat-icon>closed_caption</mat-icon>
-			<span *ngIf="captionsEnabled">{{ 'TOOLBAR.DISABLE_CAPTIONS' | translate }}</span>
-			<span *ngIf="!captionsEnabled">{{ 'TOOLBAR.ENABLE_CAPTIONS' | translate }}</span>
-		</button> -->
+		@if (!isMinimal && showCaptionsButton) {
+			<button
+				[disabled]="isConnectionLost"
+				mat-menu-item
+				id="captions-btn"
+				(click)="onCaptionsToggle()"
+			>
+				<mat-icon>closed_caption</mat-icon>
+				@if (captionsEnabled) {
+					<span>{{ 'TOOLBAR.DISABLE_CAPTIONS' | translate }}</span>
+				}
+				@if (!captionsEnabled) {
+					<span>{{ 'TOOLBAR.ENABLE_CAPTIONS' | translate }}</span>
+				}
+			</button>
+		}
 
 		<!-- Additional buttons injection inside menu (mobile only) -->
 		@if (showAdditionalButtonsInsideMenu() && additionalButtonsPosition === 'afterMenu') {
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.html
index 510a85487..d5a4cd49f 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.html
@@ -1,128 +1,136 @@
 <!-- Responsive container: show individual buttons on larger screens, collapsed menu on smaller screens -->
-<ng-container *ngIf="shouldShowCollapsed; else uncollapsedButtons">
-	<div class="collapsed-menu-container" *ngIf="visibleButtonsCount > 0">
+@if (shouldShowCollapsed) {
+	@if (visibleButtonsCount > 0) {
+		<div class="collapsed-menu-container">
+			<button
+				mat-icon-button
+				class="fab-menu-trigger"
+				[matMenuTriggerFor]="panelsMenu"
+				[disabled]="isConnectionLost"
+				[class.active-btn]="isAnyPanelOpened"
+				matTooltip="{{ 'TOOLBAR.PANELS' | translate }}"
+				#menuTrigger="matMenuTrigger"
+			>
+				<mat-icon class="material-symbols-outlined" [class.rotated]="menuTrigger.menuOpen">keyboard_arrow_up</mat-icon>
+			</button>
+
+			<!-- Vertical panels menu -->
+			<mat-menu #panelsMenu="matMenu" class="panels-menu">
+				<!-- Activities menu item -->
+				@if (!isMinimal && showActivitiesPanelButton) {
+					<button
+						mat-menu-item
+						class="panel-menu-item"
+						(click)="onToggleActivities()"
+						[disabled]="isConnectionLost"
+						[class.active-menu-item]="isActivitiesOpened"
+					>
+						<mat-icon>category</mat-icon>
+					</button>
+				}
+
+				<!-- Participants menu item -->
+				@if (!isMinimal && showParticipantsPanelButton) {
+					<button
+						mat-menu-item
+						class="panel-menu-item"
+						(click)="onToggleParticipants()"
+						[disabled]="isConnectionLost"
+						[class.active-menu-item]="isParticipantsOpened"
+					>
+						<mat-icon>people</mat-icon>
+					</button>
+				}
+
+				<!-- Chat menu item -->
+				@if (!isMinimal && showChatPanelButton) {
+					<button
+						mat-menu-item
+						class="panel-menu-item"
+						(click)="onToggleChat()"
+						[disabled]="isConnectionLost"
+						[class.active-menu-item]="isChatOpened"
+					>
+						<mat-icon
+							matBadge="{{ unreadMessages }}"
+							[matBadgeHidden]="unreadMessages === 0"
+							matBadgePosition="above before"
+							matBadgeSize="small"
+							matBadgeColor="accent"
+							aria-hidden="false"
+						>
+							chat
+						</mat-icon>
+					</button>
+				}
+
+				<!-- External additional panel buttons in menu -->
+				@if (toolbarAdditionalPanelButtonsTemplate) {
+					<ng-container *ngTemplateOutlet="toolbarAdditionalPanelButtonsTemplate"></ng-container>
+				}
+			</mat-menu>
+		</div>
+	}
+} @else {
+	<!-- Default activities button -->
+	@if (!isMinimal && showActivitiesPanelButton) {
 		<button
 			mat-icon-button
-			class="fab-menu-trigger"
-			[matMenuTriggerFor]="panelsMenu"
+			id="activities-panel-btn"
+			class="panel-button"
+			matTooltip="{{ 'TOOLBAR.ACTIVITIES' | translate }}"
+			(click)="onToggleActivities()"
 			[disabled]="isConnectionLost"
-			[class.active-btn]="isAnyPanelOpened"
-			matTooltip="{{ 'TOOLBAR.PANELS' | translate }}"
-			#menuTrigger="matMenuTrigger"
+			[class.active-btn]="isActivitiesOpened"
 		>
-			<mat-icon class="material-symbols-outlined" [class.rotated]="menuTrigger.menuOpen">keyboard_arrow_up</mat-icon>
+			<mat-icon>category</mat-icon>
 		</button>
+	}
 
-		<!-- Vertical panels menu -->
-		<mat-menu #panelsMenu="matMenu" class="panels-menu">
-			<!-- Activities menu item -->
-			<button
-				mat-menu-item
-				class="panel-menu-item"
-				*ngIf="!isMinimal && showActivitiesPanelButton"
-				(click)="onToggleActivities()"
-				[disabled]="isConnectionLost"
-				[class.active-menu-item]="isActivitiesOpened"
+	<!-- Default participants button -->
+	@if (!isMinimal && showParticipantsPanelButton) {
+		<button
+			mat-icon-button
+			class="panel-button"
+			id="participants-panel-btn"
+			matTooltip="{{ 'TOOLBAR.PARTICIPANTS' | translate }}"
+			(click)="onToggleParticipants()"
+			[disabled]="isConnectionLost"
+			[class.active-btn]="isParticipantsOpened"
+		>
+			<mat-icon>people</mat-icon>
+		</button>
+	}
+
+	<!-- Default chat button -->
+	@if (!isMinimal && showChatPanelButton) {
+		<button
+			mat-icon-button
+			class="panel-button"
+			id="chat-panel-btn"
+			matTooltip="{{ 'TOOLBAR.CHAT' | translate }}"
+			(click)="onToggleChat()"
+			[disabled]="isConnectionLost"
+			[class.active-btn]="isChatOpened"
+		>
+			<mat-icon
+				matBadge="{{ unreadMessages }}"
+				[matBadgeHidden]="unreadMessages === 0"
+				matBadgePosition="above before"
+				matBadgeSize="small"
+				matBadgeColor="accent"
+				aria-hidden="false"
 			>
-				<mat-icon>category</mat-icon>
-			</button>
+				chat
+			</mat-icon>
+		</button>
+	}
 
-			<!-- Participants menu item -->
-			<button
-				mat-menu-item
-				class="panel-menu-item"
-				*ngIf="!isMinimal && showParticipantsPanelButton"
-				(click)="onToggleParticipants()"
-				[disabled]="isConnectionLost"
-				[class.active-menu-item]="isParticipantsOpened"
-			>
-				<mat-icon>people</mat-icon>
-			</button>
-
-			<!-- Chat menu item -->
-			<button
-				mat-menu-item
-				class="panel-menu-item"
-				*ngIf="!isMinimal && showChatPanelButton"
-				(click)="onToggleChat()"
-				[disabled]="isConnectionLost"
-				[class.active-menu-item]="isChatOpened"
-			>
-				<mat-icon
-					matBadge="{{ unreadMessages }}"
-					[matBadgeHidden]="unreadMessages === 0"
-					matBadgePosition="above before"
-					matBadgeSize="small"
-					matBadgeColor="accent"
-					aria-hidden="false"
-				>
-					chat
-				</mat-icon>
-			</button>
-
-			<!-- External additional panel buttons in menu -->
-			<ng-container *ngIf="toolbarAdditionalPanelButtonsTemplate">
-				<ng-container *ngTemplateOutlet="toolbarAdditionalPanelButtonsTemplate"></ng-container>
-			</ng-container>
-		</mat-menu>
-	</div>
-</ng-container>
+	<!-- External additional panel buttons  -->
+	@if (toolbarAdditionalPanelButtonsTemplate) {
+		<ng-container *ngTemplateOutlet="toolbarAdditionalPanelButtonsTemplate"></ng-container>
+	}
+}
 
 <!-- Collapsed menu template for small screens -->
 <ng-template #uncollapsedButtons>
-	<!-- Default activities button -->
-	<button
-		mat-icon-button
-		id="activities-panel-btn"
-		class="panel-button"
-		*ngIf="!isMinimal && showActivitiesPanelButton"
-		matTooltip="{{ 'TOOLBAR.ACTIVITIES' | translate }}"
-		(click)="onToggleActivities()"
-		[disabled]="isConnectionLost"
-		[class.active-btn]="isActivitiesOpened"
-	>
-		<mat-icon>category</mat-icon>
-	</button>
-
-	<!-- Default participants button -->
-	<button
-		mat-icon-button
-		class="panel-button"
-		id="participants-panel-btn"
-		*ngIf="!isMinimal && showParticipantsPanelButton"
-		matTooltip="{{ 'TOOLBAR.PARTICIPANTS' | translate }}"
-		(click)="onToggleParticipants()"
-		[disabled]="isConnectionLost"
-		[class.active-btn]="isParticipantsOpened"
-	>
-		<mat-icon>people</mat-icon>
-	</button>
-
-	<!-- Default chat button -->
-	<button
-		mat-icon-button
-		class="panel-button"
-		id="chat-panel-btn"
-		*ngIf="!isMinimal && showChatPanelButton"
-		matTooltip="{{ 'TOOLBAR.CHAT' | translate }}"
-		(click)="onToggleChat()"
-		[disabled]="isConnectionLost"
-		[class.active-btn]="isChatOpened"
-	>
-		<mat-icon
-			matBadge="{{ unreadMessages }}"
-			[matBadgeHidden]="unreadMessages === 0"
-			matBadgePosition="above before"
-			matBadgeSize="small"
-			matBadgeColor="accent"
-			aria-hidden="false"
-		>
-			chat
-		</mat-icon>
-	</button>
-
-	<!-- External additional panel buttons  -->
-	<ng-container *ngIf="toolbarAdditionalPanelButtonsTemplate">
-		<ng-container *ngTemplateOutlet="toolbarAdditionalPanelButtonsTemplate"></ng-container>
-	</ng-container>
-</ng-template>
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html
index cdbe146fc..48ac774f3 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar.component.html
@@ -21,7 +21,9 @@
 							<div id="recording-tag" class="recording-tag" (click)="openRecordingActivityPanel()">
 								<mat-icon class="blink">radio_button_checked</mat-icon>
 								<span class="blink">REC</span>
-								<span *ngIf="recordingTime"> | {{ recordingTime | date: 'H:mm:ss' }}</span>
+								@if (recordingTime) {
+									<span> | {{ recordingTime | date: 'H:mm:ss' }}</span>
+								}
 							</div>
 						}
 
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html
index 0a64f08ef..32895b31f 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/videoconference/videoconference.component.html
@@ -8,10 +8,9 @@
 	} @else if (componentState.showPrejoin) {
 		<!-- Prejoin -->
 		<div [@inOutAnimation] id="pre-join-container">
-			<ng-container *ngIf="openviduAngularPreJoinTemplate; else defaultPreJoin">
+			@if (openviduAngularPreJoinTemplate) {
 				<ng-container *ngTemplateOutlet="openviduAngularPreJoinTemplate"></ng-container>
-			</ng-container>
-			<ng-template #defaultPreJoin>
+			} @else {
 				<ov-pre-join
 					[error]="componentState.error?.tokenError"
 					(onReadyToJoin)="_onReadyToJoin()"
@@ -21,7 +20,7 @@
 					(onAudioEnabledChanged)="onAudioEnabledChanged.emit($event)"
 					(onLangChanged)="onLangChanged.emit($event)"
 				></ov-pre-join>
-			</ng-template>
+			}
 		</div>
 	} @else if (componentState.error?.hasError) {
 		<!-- Error -->
@@ -44,21 +43,21 @@
 				(onParticipantLeft)="_onParticipantLeft($event)"
 			>
 				<ng-template #toolbar>
-					<ng-container *ngIf="openviduAngularToolbarTemplate">
+					@if (openviduAngularToolbarTemplate) {
 						<ng-container *ngTemplateOutlet="openviduAngularToolbarTemplate"></ng-container>
-					</ng-container>
+					}
 				</ng-template>
 
 				<ng-template #panel>
-					<ng-container *ngIf="openviduAngularPanelTemplate">
+					@if (openviduAngularPanelTemplate) {
 						<ng-container *ngTemplateOutlet="openviduAngularPanelTemplate"></ng-container>
-					</ng-container>
+					}
 				</ng-template>
 
 				<ng-template #layout>
-					<ng-container *ngIf="openviduAngularLayoutTemplate">
+					@if (openviduAngularLayoutTemplate) {
 						<ng-container *ngTemplateOutlet="openviduAngularLayoutTemplate"></ng-container>
-					</ng-container>
+					}
 				</ng-template>
 			</ov-session>
 		</div>