Refactor template syntax to use @if directives for conditional rendering

- Updated panel.component.html to replace *ngIf with @if for chat, participants, background effects, settings, activities, and external panels.
- Modified participants-panel.component.html to use @if for local and remote participants rendering.
- Changed settings-panel.component.html to utilize @if for menu options based on visibility conditions.
- Refactored pre-join.component.html to implement @if for participant name input and error message display.
- Adjusted session.component.html to use @if for toolbar template rendering.
- Updated audio-devices.component.html and video-devices.component.html to replace *ngIf with @if for dropdown icons.
- Refactored stream.component.html to use @if for participant name and audio wave display.
- Modified toolbar-media-buttons.component.html and toolbar-panel-buttons.component.html to implement @if for button visibility.
- Updated toolbar.component.html to use @if for recording time display.
- Refactored videoconference.component.html to replace *ngIf with @if for pre-join and template rendering.

openvidu-components-angular/projects/openvidu-components-angular/src/lib/admin/admin-login/admin-login.component.html

@@ -1,30 +1,37 @@
 <mat-toolbar class="header"> {{ title || ('ADMIN.DASHBOARD_TITLE' | translate) }} </mat-toolbar>
 
 <div class="center-container">
-	<div *ngIf="loading" class="outer">
+	@if (loading) {
+		<div class="outer">
 			<div class="middle">
 				<div class="inner">
 					<mat-spinner [diameter]="50"></mat-spinner>
 				</div>
 			</div>
 		</div>
+	}
 
-	<mat-card *ngIf="!loading" class="card-container" appearance="outlined">
+	@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" />
-					<mat-error *ngIf="loginForm.get('username')?.hasError('required')">
+						@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" />
-					<mat-error *ngIf="loginForm.get('password')?.hasError('required')">
+						@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">
@@ -34,4 +41,5 @@
 				</form>
 			</mat-card-content>
 		</mat-card>
+	}
 </div>

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/layout/layout.component.html

@@ -1,8 +1,8 @@
 <div class="container" [ngClass]="{ withCaptions: captionsEnabled, withMargin: localParticipant.isMinimized }">
 	<div id="layout" class="layout" #layout>
+		@for (track of localParticipant.tracks; track track) {
 			<div
 				#localLayoutElement
-			*ngFor="let track of localParticipant.tracks; trackBy: trackParticipantElement"
 				[ngClass]="{
 					local_participant: true,
 					OV_root: !track.isAudioTrack && !track.isMinimized,
@@ -20,14 +20,15 @@
 			>
 				<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>
 		}
 
+		@for (track of remoteParticipants | tracks; track track) {
 			<div
-			*ngFor="let track of remoteParticipants | tracks; trackBy: trackParticipantElement"
 				class="remote-participant"
 				[id]="'participant-' + track.participant.identity"
 				[ngClass]="{
@@ -40,6 +41,7 @@
 			>
 				<ng-container *ngTemplateOutlet="streamTemplate; context: { $implicit: track }"></ng-container>
 			</div>
+		}
 	</div>
 
 	<!-- <ov-captions *ngIf="captionsEnabled" class="OV_ignored"></ov-captions> -->

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/activities-panel.component.html

@@ -8,8 +8,8 @@
 
 	<div class="activities-body-container">
 		<mat-accordion [multi]="false">
+			@if (showRecordingActivity) {
 				<ov-recording-activity
-				*ngIf="showRecordingActivity"
 					id="recording-activity"
 					[expanded]="expandedPanel === 'recording'"
 					(onRecordingStartRequested)="onRecordingStartRequested.emit($event)"
@@ -20,13 +20,15 @@
 					(onViewRecordingClicked)="onViewRecordingClicked.emit($event)"
 					(onViewRecordingsClicked)="onViewRecordingsClicked.emit()"
 				></ov-recording-activity>
+			}
+			@if (showBroadcastingActivity) {
 				<ov-broadcasting-activity
-				*ngIf="showBroadcastingActivity"
 					id="broadcasting-activity"
 					[expanded]="expandedPanel === 'broadcasting'"
 					(onBroadcastingStartRequested)="onBroadcastingStartRequested.emit($event)"
 					(onBroadcastingStopRequested)="onBroadcastingStopRequested.emit($event)"
 				></ov-broadcasting-activity>
+			}
 		</mat-accordion>
 	</div>
 </div>

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/activities-panel/broadcasting-activity/broadcasting-activity.component.html

@@ -73,7 +73,7 @@
 				/>
 				<button
 					mat-icon-button
-					*ngIf="broadcastingStatus !== broadcastingStatusEnum.STARTED"
+					@if (broadcastingStatus !== broadcastingStatusEnum.STARTED) {
 						id="broadcasting-btn"
 						[disabled]="
 							!broadcastUrl ||
@@ -82,19 +82,21 @@
 						"
 						(click)="startBroadcasting()"
 						matTooltip="{{ 'PANEL.STREAMING.START' | translate }}"
+					}
 				>
 					<mat-icon>play_circle</mat-icon>
 				</button>
 
+				@if (broadcastingStatus === broadcastingStatusEnum.STARTED) {
 					<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>
+				}
 			</div>
 
 			<div>

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'">
+		@for (data of messageList; track data) {
+			<div 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>
+						@if (data.isLocal) {
-					<p *ngIf="!data.isLocal">{{ data.participantName }}</p>
+							<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 class="input-container">

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>
+}

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">
+		@if (localParticipant) {
+			<div class="local-participant-container">
 				<ng-container *ngTemplateOutlet="participantPanelItemTemplate; context: { $implicit: localParticipant }"></ng-container>
-			<mat-divider *ngIf="true"></mat-divider>
+				@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">
+		@if (remoteParticipants.length > 0) {
-			<div *ngFor="let participant of this.remoteParticipants" id="remote-participant-item">
+			<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>
 

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/panel/settings-panel/settings-panel.component.html

@@ -24,10 +24,12 @@
 					[matTooltipDisabled]="!shouldHideMenuText"
 				>
 					<mat-icon matListItemIcon>manage_accounts</mat-icon>
-					<div *ngIf="!shouldHideMenuText" class="option-text">{{ 'PANEL.SETTINGS.GENERAL' | translate }}</div>
+					@if (!shouldHideMenuText) {
+						<div class="option-text">{{ 'PANEL.SETTINGS.GENERAL' | translate }}</div>
+					}
 				</mat-list-option>
+				@if (showCameraButton) {
 					<mat-list-option
-					*ngIf="showCameraButton"
 						class="option"
 						id="video-opt"
 						[selected]="selectedOption === settingsOptions.VIDEO"
@@ -36,10 +38,13 @@
 						[matTooltipDisabled]="!shouldHideMenuText"
 					>
 						<mat-icon matListItemIcon>videocam</mat-icon>
-					<div *ngIf="!shouldHideMenuText" class="option-text">{{ 'PANEL.SETTINGS.VIDEO' | translate }}</div>
+						@if (!shouldHideMenuText) {
+							<div class="option-text">{{ 'PANEL.SETTINGS.VIDEO' | translate }}</div>
+						}
 					</mat-list-option>
+				}
+				@if (showMicrophoneButton) {
 					<mat-list-option
-					*ngIf="showMicrophoneButton"
 						class="option"
 						id="audio-opt"
 						[selected]="selectedOption === settingsOptions.AUDIO"
@@ -48,8 +53,11 @@
 						[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.AUDIO' | translate }}</div>
+						}
 					</mat-list-option>
+				}
 				<!-- <mat-list-option
 					*ngIf="showCaptions"
 					class="option"
@@ -66,7 +74,8 @@
 		</div>
 
 		<div class="item-content" [class.full-width]="isVerticalLayout">
-			<div *ngIf="selectedOption === settingsOptions.GENERAL" class="general-settings">
+			@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">
@@ -100,18 +109,23 @@
 						</div>
 					}
 				</div>
-			<div *ngIf="showCameraButton && selectedOption === settingsOptions.VIDEO" class="video-settings">
+			}
+			@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>
-			<div *ngIf="showMicrophoneButton && selectedOption === settingsOptions.AUDIO" class="audio-settings">
+			}
+			@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> -->

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/pre-join/pre-join.component.html

@@ -41,7 +41,8 @@
 								<!-- Video Controls Overlay -->
 								<div class="video-overlay">
 									<div class="device-controls">
-										<div class="control-group" *ngIf="showCameraButton">
+										@if (showCameraButton) {
+											<div class="control-group">
 												<ov-video-devices-select
 													[compact]="true"
 													(onVideoDeviceChanged)="videoDeviceChanged($event)"
@@ -51,8 +52,10 @@
 												>
 												</ov-video-devices-select>
 											</div>
+										}
 
-										<div class="control-group" *ngIf="showMicrophoneButton">
+										@if (showMicrophoneButton) {
+											<div class="control-group">
 												<ov-audio-devices-select
 													[compact]="true"
 													(onAudioDeviceChanged)="audioDeviceChanged($event)"
@@ -62,6 +65,7 @@
 												>
 												</ov-audio-devices-select>
 											</div>
+										}
 									</div>
 
 									<!-- Virtual Background Button -->
@@ -93,7 +97,8 @@
 						<!-- Configuration Section -->
 						<div class="configuration-section">
 							<!-- Participant Name Input -->
-							<div class="participant-name-container input-section" *ngIf="showParticipantName">
+							@if (showParticipantName) {
+								<div class="participant-name-container input-section">
 									<ov-participant-name-input
 										[isPrejoinPage]="true"
 										[error]="!!_error"
@@ -103,12 +108,15 @@
 									>
 									</ov-participant-name-input>
 								</div>
+							}
 
 							<!-- Error Message -->
-							<div *ngIf="!!_error" class="error-message" id="token-error">
+							@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">

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">
+		@if (toolbarTemplate) {
+			<div id="footer-container">
 				<ng-container *ngTemplateOutlet="toolbarTemplate"></ng-container>
 			</div>
+		}
 	</div>
 }

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>
 		}

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>
 		}

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/stream/stream.component.html

@@ -1,5 +1,5 @@
+@if (_track.participant) {
 	<div
-	*ngIf="_track.participant"
 		[ngClass]="{
 			OV_stream: !_track.isAudioTrack || (_track.isAudioTrack && _track.participant.onlyHasAudioTracks),
 			'no-size': !showVideo,
@@ -11,21 +11,26 @@
 		(mousemove)="mouseHover($event)"
 		#streamContainer
 	>
+		@if ((!isMinimal && showParticipantName && !_track.isAudioTrack) || (_track.isAudioTrack && _track.participant.onlyHasAudioTracks)) {
 			<div
-		*ngIf="!isMinimal && showParticipantName && !_track.isAudioTrack || (_track.isAudioTrack && _track.participant.onlyHasAudioTracks)"
 				id="participant-name-container"
 				class="participant-name"
 				[class.fullscreen]="isFullscreen"
 			>
 				<div class="participant-name-container">
 					<span id="participant-name">{{ _track.participant.name }}</span>
-			<span *ngIf="_track.isScreenTrack" id="participant-name">_SCREEN</span>
+					@if (_track.isScreenTrack) {
+						<span id="participant-name">_SCREEN</span>
+					}
 				</div>
 			</div>
+		}
 
-	<div *ngIf="!isMinimal && showAudioDetection && _track.participant.isSpeaking && _track.isCameraTrack" id="audio-wave-container">
+		@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"
@@ -39,12 +44,20 @@
 
 		@if (!_track.participant.hasEncryptionError) {
 			<div class="status-icons">
-			<mat-icon id="status-mic" fontIcon="mic_off" *ngIf="!_track.participant?.isMicrophoneEnabled"></mat-icon>
+				@if (!_track.participant?.isMicrophoneEnabled) {
-			<mat-icon id="status-muted-forcibly" fontIcon="volume_off" *ngIf="_track.isMutedForcibly"></mat-icon>
+					<mat-icon id="status-mic" fontIcon="mic_off"></mat-icon>
-			<mat-icon id="status-pinned" fontIcon="push_pin" *ngIf="_track.isPinned"></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>
+		}
 
-		<div class="stream-video-controls" *ngIf="!isMinimal && showVideoControls && mouseHovering">
+		@if (!isMinimal && showVideoControls && mouseHovering && !_track.participant.hasEncryptionError) {
+			<div class="stream-video-controls">
 				<div class="flex-container">
 					<button
 						mat-icon-button
@@ -52,32 +65,48 @@
 						(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>
+						@if (_track.isPinned) {
-					<mat-icon *ngIf="!_track.isPinned" id="status-pinned" fontIcon="push_pin"></mat-icon>
+							<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
-					*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>
+							@if (_track.isMutedForcibly) {
-					<mat-icon *ngIf="!_track.isMutedForcibly">volume_up</mat-icon>
+								<mat-icon>volume_off</mat-icon>
+							}
+							@if (!_track.isMutedForcibly) {
+								<mat-icon>volume_up</mat-icon>
+							}
 						</button>
+					}
+					@if (_track.participant.isLocal) {
 						<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>
+							@if (_track.isMinimized) {
-					<mat-icon *ngIf="!_track.isMinimized">close_fullscreen</mat-icon>
+								<mat-icon>open_in_full</mat-icon>
+							}
+							@if (!_track.isMinimized) {
+								<mat-icon>close_fullscreen</mat-icon>
+							}
 						</button>
+					}
 				</div>
 			</div>
 		}
 	</div>
+}
+

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();
 			});
 	}
 }

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
+		@if (!isMinimal && showCaptionsButton) {
-			*ngIf="!isMinimal && showCaptionsButton"
+			<button
 				[disabled]="isConnectionLost"
 				mat-menu-item
 				id="captions-btn"
 				(click)="onCaptionsToggle()"
 			>
 				<mat-icon>closed_caption</mat-icon>
-			<span *ngIf="captionsEnabled">{{ 'TOOLBAR.DISABLE_CAPTIONS' | translate }}</span>
+				@if (captionsEnabled) {
-			<span *ngIf="!captionsEnabled">{{ 'TOOLBAR.ENABLE_CAPTIONS' | translate }}</span>
+					<span>{{ 'TOOLBAR.DISABLE_CAPTIONS' | translate }}</span>
-		</button> -->
+				}
+				@if (!captionsEnabled) {
+					<span>{{ 'TOOLBAR.ENABLE_CAPTIONS' | translate }}</span>
+				}
+			</button>
+		}
 
 		<!-- Additional buttons injection inside menu (mobile only) -->
 		@if (showAdditionalButtonsInsideMenu() && additionalButtonsPosition === 'afterMenu') {

openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-panel-buttons/toolbar-panel-buttons.component.html

@@ -1,6 +1,7 @@
 <!-- Responsive container: show individual buttons on larger screens, collapsed menu on smaller screens -->
-<ng-container *ngIf="shouldShowCollapsed; else uncollapsedButtons">
+@if (shouldShowCollapsed) {
-	<div class="collapsed-menu-container" *ngIf="visibleButtonsCount > 0">
+	@if (visibleButtonsCount > 0) {
+		<div class="collapsed-menu-container">
 			<button
 				mat-icon-button
 				class="fab-menu-trigger"
@@ -16,34 +17,36 @@
 			<!-- Vertical panels menu -->
 			<mat-menu #panelsMenu="matMenu" class="panels-menu">
 				<!-- Activities menu item -->
+				@if (!isMinimal && showActivitiesPanelButton) {
 					<button
 						mat-menu-item
 						class="panel-menu-item"
-				*ngIf="!isMinimal && showActivitiesPanelButton"
 						(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"
-				*ngIf="!isMinimal && showParticipantsPanelButton"
 						(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"
-				*ngIf="!isMinimal && showChatPanelButton"
 						(click)="onToggleChat()"
 						[disabled]="isConnectionLost"
 						[class.active-menu-item]="isChatOpened"
@@ -59,23 +62,22 @@
 							chat
 						</mat-icon>
 					</button>
+				}
 
 				<!-- External additional panel buttons in menu -->
-			<ng-container *ngIf="toolbarAdditionalPanelButtonsTemplate">
+				@if (toolbarAdditionalPanelButtonsTemplate) {
 					<ng-container *ngTemplateOutlet="toolbarAdditionalPanelButtonsTemplate"></ng-container>
-			</ng-container>
+				}
 			</mat-menu>
 		</div>
-</ng-container>
+	}
-
+} @else {
-<!-- Collapsed menu template for small screens -->
-<ng-template #uncollapsedButtons>
 	<!-- Default activities button -->
+	@if (!isMinimal && showActivitiesPanelButton) {
 		<button
 			mat-icon-button
 			id="activities-panel-btn"
 			class="panel-button"
-		*ngIf="!isMinimal && showActivitiesPanelButton"
 			matTooltip="{{ 'TOOLBAR.ACTIVITIES' | translate }}"
 			(click)="onToggleActivities()"
 			[disabled]="isConnectionLost"
@@ -83,13 +85,14 @@
 		>
 			<mat-icon>category</mat-icon>
 		</button>
+	}
 
 	<!-- Default participants button -->
+	@if (!isMinimal && showParticipantsPanelButton) {
 		<button
 			mat-icon-button
 			class="panel-button"
 			id="participants-panel-btn"
-		*ngIf="!isMinimal && showParticipantsPanelButton"
 			matTooltip="{{ 'TOOLBAR.PARTICIPANTS' | translate }}"
 			(click)="onToggleParticipants()"
 			[disabled]="isConnectionLost"
@@ -97,13 +100,14 @@
 		>
 			<mat-icon>people</mat-icon>
 		</button>
+	}
 
 	<!-- Default chat button -->
+	@if (!isMinimal && showChatPanelButton) {
 		<button
 			mat-icon-button
 			class="panel-button"
 			id="chat-panel-btn"
-		*ngIf="!isMinimal && showChatPanelButton"
 			matTooltip="{{ 'TOOLBAR.CHAT' | translate }}"
 			(click)="onToggleChat()"
 			[disabled]="isConnectionLost"
@@ -120,9 +124,13 @@
 				chat
 			</mat-icon>
 		</button>
+	}
 
 	<!-- External additional panel buttons  -->
-	<ng-container *ngIf="toolbarAdditionalPanelButtonsTemplate">
+	@if (toolbarAdditionalPanelButtonsTemplate) {
 		<ng-container *ngTemplateOutlet="toolbarAdditionalPanelButtonsTemplate"></ng-container>
-	</ng-container>
+	}
-</ng-template>
+}
+
+<!-- Collapsed menu template for small screens -->
+<ng-template #uncollapsedButtons>

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>
 						}
 

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>
+			} @else {
-			<ng-template #defaultPreJoin>
 				<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>