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 47fceea14..d3eaeb015 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
@@ -4,14 +4,14 @@
 		id="camera-btn"
 		mat-icon-button
 		(click)="onCameraToggle()"
-		[disabled]="isConnectionLost || !hasVideoDevices || cameraMuteChanging"
-		[class.disabled]="!isCameraEnabled"
+		[disabled]="isConnectionLost() || !hasVideoDevices() || cameraMuteChanging()"
+		[class.disabled]="!isCameraEnabled()"
 		[class.mobile-btn]="isMobileView()"
-		[matTooltip]="isCameraEnabled ? ('TOOLBAR.STOP_VIDEO' | translate) : ('TOOLBAR.START_VIDEO' | translate)"
-		[matTooltipDisabled]="!hasVideoDevices"
+		[matTooltip]="isCameraEnabled() ? ('TOOLBAR.STOP_VIDEO' | translate) : ('TOOLBAR.START_VIDEO' | translate)"
+		[matTooltipDisabled]="!hasVideoDevices()"
 	>
-		<mat-icon [id]="isCameraEnabled ? 'videocam' : 'videocam_off'">
-			{{ isCameraEnabled ? 'videocam' : 'videocam_off' }}
+		<mat-icon [id]="isCameraEnabled() ? 'videocam' : 'videocam_off'">
+			{{ isCameraEnabled() ? 'videocam' : 'videocam_off' }}
 		</mat-icon>
 	</button>
 }
@@ -22,28 +22,28 @@
 		id="mic-btn"
 		mat-icon-button
 		(click)="onMicrophoneToggle()"
-		[disabled]="isConnectionLost || !hasAudioDevices || microphoneMuteChanging"
-		[class.disabled]="!isMicrophoneEnabled"
+		[disabled]="isConnectionLost() || !hasAudioDevices() || microphoneMuteChanging()"
+		[class.disabled]="!isMicrophoneEnabled()"
 		[class.mobile-btn]="isMobileView()"
-		[matTooltip]="isMicrophoneEnabled ? ('TOOLBAR.MUTE_AUDIO' | translate) : ('TOOLBAR.UNMUTE_AUDIO' | translate)"
-		[matTooltipDisabled]="!hasAudioDevices"
+		[matTooltip]="isMicrophoneEnabled() ? ('TOOLBAR.MUTE_AUDIO' | translate) : ('TOOLBAR.UNMUTE_AUDIO' | translate)"
+		[matTooltipDisabled]="!hasAudioDevices()"
 	>
-		<mat-icon [id]="isMicrophoneEnabled ? 'mic' : 'mic_off'">
-			{{ isMicrophoneEnabled ? 'mic' : 'mic_off' }}
+		<mat-icon [id]="isMicrophoneEnabled() ? 'mic' : 'mic_off'">
+			{{ isMicrophoneEnabled() ? 'mic' : 'mic_off' }}
 		</mat-icon>
 	</button>
 }
 
 <!-- Screenshare button - Only visible on tablet+ or when active -->
 @if (showScreenshareButtonDirect()) {
-	@if (isFirefoxBrowser) {
+	@if (isFirefoxBrowser()) {
 		<button
 			mat-icon-button
 			id="screenshare-btn"
-			[disabled]="isConnectionLost"
-			[class.active-btn]="isScreenShareEnabled"
+			[disabled]="isConnectionLost()"
+			[class.active-btn]="isScreenShareEnabled()"
 			[class.mobile-btn]="isMobileView()"
-			matTooltip="{{ isScreenShareEnabled ? ('TOOLBAR.DISABLE_SCREEN' | translate) : ('TOOLBAR.ENABLE_SCREEN' | translate) }}"
+			matTooltip="{{ isScreenShareEnabled() ? ('TOOLBAR.DISABLE_SCREEN' | translate) : ('TOOLBAR.ENABLE_SCREEN' | translate) }}"
 			(click)="onScreenShareToggle()"
 		>
 			<mat-icon>screen_share</mat-icon>
@@ -52,12 +52,12 @@
 		<button
 			mat-icon-button
 			id="screenshare-btn"
-			[matMenuTriggerFor]="isScreenShareEnabled ? screenshareMenu : null"
-			[disabled]="isConnectionLost"
-			[class.active-btn]="isScreenShareEnabled"
+			[matMenuTriggerFor]="isScreenShareEnabled() ? screenshareMenu : null"
+			[disabled]="isConnectionLost()"
+			[class.active-btn]="isScreenShareEnabled()"
 			[class.mobile-btn]="isMobileView()"
-			matTooltip="{{ isScreenShareEnabled ? ('TOOLBAR.DISABLE_SCREEN' | translate) : ('TOOLBAR.ENABLE_SCREEN' | translate) }}"
-			(click)="!isScreenShareEnabled && onScreenShareToggle()"
+			matTooltip="{{ isScreenShareEnabled() ? ('TOOLBAR.DISABLE_SCREEN' | translate) : ('TOOLBAR.ENABLE_SCREEN' | translate) }}"
+			(click)="!isScreenShareEnabled() && onScreenShareToggle()"
 		>
 			<mat-icon>screen_share</mat-icon>
 		</button>
@@ -78,8 +78,8 @@
 }
 
 <!-- Additional buttons injection from parent component (desktop/tablet only) -->
-@if (showAdditionalButtonsOutside() && additionalButtonsPosition === 'beforeMenu') {
-	<ng-container *ngTemplateOutlet="toolbarAdditionalButtonsTemplate; context: { $implicit: additionalButtonsPosition }"></ng-container>
+@if (showAdditionalButtonsOutside() && additionalButtonsPosition() === 'beforeMenu') {
+	<ng-container *ngTemplateOutlet="toolbarAdditionalButtonsTemplate(); context: { $implicit: additionalButtonsPosition() }"></ng-container>
 }
 
 <!-- More options button -->
@@ -88,7 +88,7 @@
 		mat-icon-button
 		id="more-options-btn"
 		[matMenuTriggerFor]="settingsMenu"
-		[disabled]="isConnectionLost"
+		[disabled]="isConnectionLost()"
 		[class.mobile-btn]="isMobileView()"
 		matTooltip="{{ 'TOOLBAR.MORE_OPTIONS' | translate }}"
 	>
@@ -96,38 +96,38 @@
 	</button>
 	<mat-menu #settingsMenu="matMenu" id="more-options-menu">
 		<!-- Additional buttons injection inside menu (mobile only) -->
-		@if (showAdditionalButtonsInsideMenu() && additionalButtonsPosition === 'beforeMenu') {
-			<ng-container *ngTemplateOutlet="toolbarAdditionalButtonsTemplate; context: { $implicit: additionalButtonsPosition }">
+		@if (showAdditionalButtonsInsideMenu() && additionalButtonsPosition() === 'beforeMenu') {
+			<ng-container *ngTemplateOutlet="toolbarAdditionalButtonsTemplate(); context: { $implicit: additionalButtonsPosition() }">
 			</ng-container>
 		}
 
 		<!-- Fullscreen button -->
-		@if (showFullscreenButton) {
+		@if (showFullscreenButton()) {
 			<button mat-menu-item id="fullscreen-btn" (click)="onFullscreenToggle()">
-				<mat-icon>{{ isFullscreenActive ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
-				<span>{{ isFullscreenActive ? ('TOOLBAR.EXIT_FULLSCREEN' | translate) : ('TOOLBAR.FULLSCREEN' | translate) }}</span>
+				<mat-icon>{{ isFullscreenActive() ? 'fullscreen_exit' : 'fullscreen' }}</mat-icon>
+				<span>{{ isFullscreenActive() ? ('TOOLBAR.EXIT_FULLSCREEN' | translate) : ('TOOLBAR.FULLSCREEN' | translate) }}</span>
 			</button>
 		}
 
 		<!-- Recording button -->
-		@if (showRecordingButton) {
+		@if (showRecordingButton()) {
 			<button
 				mat-menu-item
 				id="recording-btn"
 				[disabled]="
-					recordingStatus === _recordingStatus.STARTING ||
-					recordingStatus === _recordingStatus.STOPPING ||
-					!hasRoomTracksPublished
+					recordingStatus() === _recordingStatus.STARTING ||
+					recordingStatus() === _recordingStatus.STOPPING ||
+					!hasRoomTracksPublished()
 				"
-				[matTooltip]="!hasRoomTracksPublished ? ('TOOLBAR.NO_TRACKS_PUBLISHED' | translate) : ''"
+				[matTooltip]="!hasRoomTracksPublished() ? ('TOOLBAR.NO_TRACKS_PUBLISHED' | translate) : ''"
 				(click)="onRecordingToggle()"
 			>
 				<mat-icon color="warn">radio_button_checked</mat-icon>
 				<span>
 					{{
-						recordingStatus === _recordingStatus.STOPPED ||
-						recordingStatus === _recordingStatus.STOPPING ||
-						recordingStatus === _recordingStatus.FAILED
+						recordingStatus() === _recordingStatus.STOPPED ||
+						recordingStatus() === _recordingStatus.STOPPING ||
+						recordingStatus() === _recordingStatus.FAILED
 							? ('TOOLBAR.START_RECORDING' | translate)
 							: ('TOOLBAR.STOP_RECORDING' | translate)
 					}}
@@ -136,7 +136,7 @@
 		}
 
 		<!-- View recordings button -->
-		@if (showViewRecordingsButton) {
+		@if (showViewRecordingsButton()) {
 			<button mat-menu-item id="view-recordings-btn" (click)="onViewRecordingsClick()">
 				<mat-icon>video_library</mat-icon>
 				<span>{{ 'TOOLBAR.VIEW_RECORDINGS' | translate }}</span>
@@ -144,19 +144,19 @@
 		}
 
 		<!-- Broadcasting button -->
-		@if (showBroadcastingButton) {
+		@if (showBroadcastingButton()) {
 			<button
 				mat-menu-item
 				id="toolbar-broadcasting-btn"
-				[disabled]="broadcastingStatus === _broadcastingStatus.STARTING || recordingStatus === _broadcastingStatus.STOPPING"
+				[disabled]="broadcastingStatus() === _broadcastingStatus.STARTING || recordingStatus() === _broadcastingStatus.STOPPING"
 				(click)="onBroadcastingToggle()"
 			>
 				<mat-icon>sensors</mat-icon>
 				<span>
 					{{
-						broadcastingStatus === _broadcastingStatus.STOPPED ||
-						broadcastingStatus === _broadcastingStatus.STOPPING ||
-						broadcastingStatus === _broadcastingStatus.FAILED
+						broadcastingStatus() === _broadcastingStatus.STOPPED ||
+						broadcastingStatus() === _broadcastingStatus.STOPPING ||
+						broadcastingStatus() === _broadcastingStatus.FAILED
 							? ('PANEL.STREAMING.START' | translate)
 							: ('PANEL.STREAMING.STOP' | translate)
 					}}
@@ -165,8 +165,8 @@
 		}
 
 		<!-- Virtual background button -->
-		@if (showBackgroundEffectsButton) {
-			<button mat-menu-item id="virtual-bg-btn" [disabled]="!isCameraEnabled" (click)="onBackgroundEffectsToggle()">
+		@if (showBackgroundEffectsButton()) {
+			<button mat-menu-item id="virtual-bg-btn" [disabled]="!isCameraEnabled()" (click)="onBackgroundEffectsToggle()">
 				<mat-icon><span class="material-symbols-outlined">background_replace</span></mat-icon>
 				<span>{{ 'TOOLBAR.BACKGROUND' | translate }}</span>
 			</button>
@@ -186,8 +186,8 @@
 		</button> -->
 
 		<!-- Additional buttons injection inside menu (mobile only) -->
-		@if (showAdditionalButtonsInsideMenu() && additionalButtonsPosition === 'afterMenu') {
-			<ng-container *ngTemplateOutlet="toolbarAdditionalButtonsTemplate; context: { $implicit: additionalButtonsPosition }">
+		@if (showAdditionalButtonsInsideMenu() && additionalButtonsPosition() === 'afterMenu') {
+			<ng-container *ngTemplateOutlet="toolbarAdditionalButtonsTemplate(); context: { $implicit: additionalButtonsPosition() }">
 			</ng-container>
 		}
 
@@ -197,12 +197,12 @@
 		}
 
 		<!-- Divider before settings -->
-		@if (showSettingsButton) {
+		@if (showSettingsButton()) {
 			<mat-divider class="divider"></mat-divider>
 		}
 
 		<!-- Settings button -->
-		@if (showSettingsButton) {
+		@if (showSettingsButton()) {
 			<button mat-menu-item id="toolbar-settings-btn" (click)="onSettingsToggle()">
 				<mat-icon>settings</mat-icon>
 				<span>{{ 'TOOLBAR.SETTINGS' | translate }}</span>
@@ -212,12 +212,12 @@
 }
 
 <!-- Additional buttons injection from parent component (desktop/tablet only) -->
-@if (showAdditionalButtonsOutside() && additionalButtonsPosition === 'afterMenu') {
-	<ng-container *ngTemplateOutlet="toolbarAdditionalButtonsTemplate"></ng-container>
+@if (showAdditionalButtonsOutside() && additionalButtonsPosition() === 'afterMenu') {
+	<ng-container *ngTemplateOutlet="toolbarAdditionalButtonsTemplate()"></ng-container>
 }
 
 <!-- Leave session button -->
-@if (showLeaveButton) {
+@if (showLeaveButton()) {
 	<button
 		mat-icon-button
 		(click)="onLeaveClick()"
@@ -229,6 +229,6 @@
 	</button>
 }
 
-@if (toolbarLeaveButtonTemplate) {
-	<ng-container *ngTemplateOutlet="toolbarLeaveButtonTemplate"></ng-container>
+@if (toolbarLeaveButtonTemplate()) {
+	<ng-container *ngTemplateOutlet="toolbarLeaveButtonTemplate()"></ng-container>
 }
diff --git a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.ts b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.ts
index d166d4bb3..4a0575689 100644
--- a/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.ts
+++ b/openvidu-components-angular/projects/openvidu-components-angular/src/lib/components/toolbar/toolbar-media-buttons/toolbar-media-buttons.component.ts
@@ -1,4 +1,4 @@
-import { Component, ContentChild, EventEmitter, Input, Output, TemplateRef, computed, inject } from '@angular/core';
+import { Component, ContentChild, EventEmitter, Output, TemplateRef, computed, inject, input } from '@angular/core';
 import { RecordingStatus } from '../../../models/recording.model';
 import { BroadcastingStatus } from '../../../models/broadcasting.model';
 import { ToolbarAdditionalButtonsPosition } from '../../../models/toolbar.model';
@@ -16,62 +16,62 @@ import { ToolbarMoreOptionsAdditionalMenuItemsDirective } from '../../../directi
 })
 export class ToolbarMediaButtonsComponent {
 	// Camera related inputs
-	@Input() showCameraButton: boolean = true;
-	@Input() isCameraEnabled: boolean = true;
-	@Input() cameraMuteChanging: boolean = false;
+	showCameraButton = input<boolean>(true);
+	isCameraEnabled = input<boolean>(true);
+	cameraMuteChanging = input<boolean>(false);
 
 	// Microphone related inputs
-	@Input() showMicrophoneButton: boolean = true;
-	@Input() isMicrophoneEnabled: boolean = true;
-	@Input() microphoneMuteChanging: boolean = false;
+	showMicrophoneButton = input<boolean>(true);
+	isMicrophoneEnabled = input<boolean>(true);
+	microphoneMuteChanging = input<boolean>(false);
 
 	// Screenshare related inputs
-	@Input() showScreenshareButton: boolean = true;
-	@Input() isScreenShareEnabled: boolean = false;
-	@Input() isFirefoxBrowser: boolean = false;
+	showScreenshareButton = input<boolean>(true);
+	isScreenShareEnabled = input<boolean>(false);
+	isFirefoxBrowser = input<boolean>(false);
 
 	// Device availability inputs
-	@Input() hasVideoDevices: boolean = true;
-	@Input() hasAudioDevices: boolean = true;
+	hasVideoDevices = input<boolean>(true);
+	hasAudioDevices = input<boolean>(true);
 
 	// Connection state inputs
-	@Input() isConnectionLost: boolean = false;
+	isConnectionLost = input<boolean>(false);
 
 	// UI state inputs
-	@Input() isMinimal: boolean = false;
+	isMinimal = input<boolean>(false);
 
 	// More options menu inputs
-	@Input() showMoreOptionsButton: boolean = true;
-	@Input() showFullscreenButton: boolean = true;
-	@Input() showRecordingButton: boolean = true;
-	@Input() showViewRecordingsButton: boolean = false;
-	@Input() showBroadcastingButton: boolean = true;
-	@Input() showBackgroundEffectsButton: boolean = true;
-	@Input() showCaptionsButton: boolean = true;
-	@Input() showSettingsButton: boolean = true;
+	showMoreOptionsButton = input<boolean>(true);
+	showFullscreenButton = input<boolean>(true);
+	showRecordingButton = input<boolean>(true);
+	showViewRecordingsButton = input<boolean>(false);
+	showBroadcastingButton = input<boolean>(true);
+	showBackgroundEffectsButton = input<boolean>(true);
+	showCaptionsButton = input<boolean>(true);
+	showSettingsButton = input<boolean>(true);
 
 	// Fullscreen state
-	@Input() isFullscreenActive: boolean = false;
+	isFullscreenActive = input<boolean>(false);
 
 	// Recording related inputs
-	@Input() recordingStatus: RecordingStatus = RecordingStatus.STOPPED;
-	@Input() hasRoomTracksPublished: boolean = false;
+	recordingStatus = input<RecordingStatus>(RecordingStatus.STOPPED);
+	hasRoomTracksPublished = input<boolean>(false);
 
 	// Broadcasting related inputs
-	@Input() broadcastingStatus: BroadcastingStatus = BroadcastingStatus.STOPPED;
+	broadcastingStatus = input<BroadcastingStatus>(BroadcastingStatus.STOPPED);
 
 	// Captions
-	@Input() captionsEnabled: boolean = false;
+	captionsEnabled = input<boolean>(false);
 
 	// Leave button
-	@Input() showLeaveButton: boolean = true;
+	showLeaveButton = input<boolean>(true);
 
 	// Additional buttons template
-	@Input() toolbarAdditionalButtonsTemplate: TemplateRef<any> | null = null;
-	@Input() additionalButtonsPosition: ToolbarAdditionalButtonsPosition | undefined;
+	toolbarAdditionalButtonsTemplate = input<TemplateRef<any> | null>(null);
+	additionalButtonsPosition = input<ToolbarAdditionalButtonsPosition | undefined>(undefined);
 
 	// Leave button template
-	@Input() toolbarLeaveButtonTemplate: TemplateRef<any> | null = null;
+	toolbarLeaveButtonTemplate = input<TemplateRef<any> | null>(null);
 
 	/**
 	 * @internal
@@ -101,34 +101,34 @@ export class ToolbarMediaButtonsComponent {
 	readonly isDesktopView = computed(() => this.viewportService.isDesktop());
 
 	// Essential buttons that always stay visible
-	readonly showCameraButtonDirect = computed(() => this.showCameraButton && !this.isMinimal);
+	readonly showCameraButtonDirect = computed(() => this.showCameraButton() && !this.isMinimal());
 
-	readonly showMicrophoneButtonDirect = computed(() => this.showMicrophoneButton && !this.isMinimal);
+	readonly showMicrophoneButtonDirect = computed(() => this.showMicrophoneButton() && !this.isMinimal());
 
 	// Screenshare button - visible on tablet+ or when already active
 	readonly showScreenshareButtonDirect = computed(
-		() => this.showScreenshareButton && !this.isMinimal && (!this.isMobileView() || this.isScreenShareEnabled)
+		() => this.showScreenshareButton() && !this.isMinimal() && (!this.isMobileView() || this.isScreenShareEnabled())
 	);
 
 	// More options button - always visible when not minimal
-	readonly showMoreOptionsButtonDirect = computed(() => this.showMoreOptionsButton && !this.isMinimal);
+	readonly showMoreOptionsButtonDirect = computed(() => this.showMoreOptionsButton() && !this.isMinimal());
 
 	// Check if there are active features that should show a badge on More Options
 	readonly hasActiveFeatures = computed(
 		() =>
-			this.isScreenShareEnabled ||
-			this.recordingStatus === this._recordingStatus.STARTED ||
-			this.broadcastingStatus === this._broadcastingStatus.STARTED
+			this.isScreenShareEnabled() ||
+			this.recordingStatus() === this._recordingStatus.STARTED ||
+			this.broadcastingStatus() === this._broadcastingStatus.STARTED
 	);
 
 	// Check if additional buttons should be shown outside (desktop/tablet) or inside More Options (mobile)
 	readonly showAdditionalButtonsOutside = computed(() => {
-		return !this.isMobileView() && this.toolbarAdditionalButtonsTemplate;
+		return !this.isMobileView() && this.toolbarAdditionalButtonsTemplate();
 	});
 
 	// Check if additional buttons should be shown inside More Options menu (mobile only)
 	readonly showAdditionalButtonsInsideMenu = computed(() => {
-		return this.isMobileView() && this.toolbarAdditionalButtonsTemplate;
+		return this.isMobileView() && this.toolbarAdditionalButtonsTemplate();
 	});
 
 	// Media button outputs