openvidu-components: Migrated to standalone and control flow syntax

openvidu-components/install.sh

@@ -1,3 +1,5 @@
+#!/bin/bash
+
 TUTORIALS=(
   'openvidu-additional-panels'
   'openvidu-admin-dashboard'

openvidu-components/openvidu-additional-panels/src/app/app.component.ts

@@ -1,42 +1,60 @@
-import { HttpClient } from "@angular/common/http";
-import { Component } from "@angular/core";
-import { lastValueFrom } from "rxjs";
+import { HttpClient } from '@angular/common/http';
+import { Component } from '@angular/core';
+import { lastValueFrom } from 'rxjs';
 
-import { PanelEvent, PanelService } from "openvidu-angular";
+import { PanelStatusInfo, PanelService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from 'openvidu-angular';
 import { environment } from 'src/environments/environment';
 
-@Component({
-	selector: "app-root",
-	template: `
-			<!-- OpenVidu Video Conference Component -->
-			<ov-videoconference [token]="token" [toolbarDisplaySessionName]="false" (onTokenRequested)="onTokenRequested($event)">
-			<!-- Additional Toolbar Buttons -->
-			<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
-				<button mat-icon-button (click)="toggleMyPanel('my-panel1')">
-				<mat-icon>360</mat-icon>
-				</button>
-				<button mat-icon-button (click)="toggleMyPanel('my-panel2')">
-				<mat-icon>star</mat-icon>
-				</button>
-			</div>
+import { MatIcon } from '@angular/material/icon';
+import { MatIconButton } from '@angular/material/button';
 
-			<!-- Additional Panels -->
-			<div *ovAdditionalPanels id="my-panels">
-				<div id="my-panel1" *ngIf="showExternalPanel">
-				<h2>NEW PANEL 1</h2>
-				<p>This is my new additional panel</p>
-				</div>
-				<div id="my-panel2" *ngIf="showExternalPanel2">
-				<h2>NEW PANEL 2</h2>
-				<p>This is another new panel</p>
-				</div>
-			</div>
-			</ov-videoconference>
-	`,
-	styleUrls: ["./app.component.scss"]
+@Component({
+    selector: 'app-root',
+    template: `
+		<!-- OpenVidu Video Conference Component -->
+		<ov-videoconference
+		  [token]="token"
+		  [toolbarDisplaySessionName]="false"
+		  (onTokenRequested)="onTokenRequested($event)"
+		  >
+		  <!-- Additional Toolbar Buttons -->
+		  <div *ovToolbarAdditionalPanelButtons style="text-align: center;">
+		    <button mat-icon-button (click)="toggleMyPanel('my-panel1')">
+		      <mat-icon>360</mat-icon>
+		    </button>
+		    <button mat-icon-button (click)="toggleMyPanel('my-panel2')">
+		      <mat-icon>star</mat-icon>
+		    </button>
+		  </div>
+		
+		  <!-- Additional Panels -->
+		  <div *ovAdditionalPanels id="my-panels">
+		    @if (showExternalPanel) {
+		      <div id="my-panel1">
+		        <h2>NEW PANEL 1</h2>
+		        <p>This is my new additional panel</p>
+		      </div>
+		    }
+		    @if (showExternalPanel2) {
+		      <div id="my-panel2">
+		        <h2>NEW PANEL 2</h2>
+		        <p>This is another new panel</p>
+		      </div>
+		    }
+		  </div>
+		</ov-videoconference>
+		`,
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [
+    OpenViduAngularModule,
+    ApiDirectiveModule,
+    OpenViduAngularDirectiveModule,
+    MatIconButton,
+    MatIcon
+],
 })
 export class AppComponent {
-
 	// Define the URL of the application server
 	APPLICATION_SERVER_URL = environment.applicationServerUrl;
 
@@ -48,7 +66,10 @@ export class AppComponent {
 	showExternalPanel: boolean = false;
 	showExternalPanel2: boolean = false;
 
-	constructor(private httpClient: HttpClient, private panelService: PanelService) { }
+	constructor(
+		private httpClient: HttpClient,
+		private panelService: PanelService
+	) {}
 
 	ngOnInit() {
 		this.subscribeToPanelToggling();
@@ -62,7 +83,7 @@ export class AppComponent {
 
 	// Subscribe to panel toggling events
 	subscribeToPanelToggling() {
-		this.panelService.panelOpenedObs.subscribe((ev: PanelEvent) => {
+		this.panelService.panelStatusObs.subscribe((ev: PanelStatusInfo) => {
 			this.showExternalPanel = ev.isOpened && ev.panelType === 'my-panel1';
 			this.showExternalPanel2 = ev.isOpened && ev.panelType === 'my-panel2';
 		});
@@ -77,13 +98,22 @@ export class AppComponent {
 	async getToken(roomName: string, participantName: string): Promise<any> {
 		try {
 			// Send a POST request to the server to obtain a token
-			return lastValueFrom(this.httpClient.post<any>(this.APPLICATION_SERVER_URL + 'api/sessions', { roomName, participantName }));
+			return lastValueFrom(
+				this.httpClient.post<any>(
+					this.APPLICATION_SERVER_URL + 'api/sessions',
+					{ roomName, participantName }
+				)
+			);
 		} catch (error: any) {
 			// Handle errors, e.g., if the server is not reachable
 			if (error.status === 404) {
-				throw { status: error.status, message: 'Cannot connect with the backend. ' + error.url + ' not found' };
+				throw {
+					status: error.status,
+					message:
+						'Cannot connect with the backend. ' + error.url + ' not found',
+				};
 			}
 			throw error;
 		}
 	}
-}
+}

openvidu-components/openvidu-additional-panels/src/app/app.module.ts

@@ -1,31 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
-import { environment } from 'src/environments/environment';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-import { HttpClientModule } from '@angular/common/http';
-
-const config: OpenViduAngularConfig = {
-  production: environment.production
-};
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    MatButtonModule,
-    MatIconModule,
-    HttpClientModule,
-    OpenViduAngularModule.forRoot(config)
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

openvidu-components/openvidu-additional-panels/src/main.ts

@@ -1,12 +1,32 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { environment as environment_1 } from 'src/environments/environment';
+import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
+import { withInterceptorsFromDi, provideHttpClient } from '@angular/common/http';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+
+const config: OpenViduAngularConfig = {
+  production: environment.production
+};
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, MatButtonModule, MatIconModule, OpenViduAngularModule.forRoot(config)),
+        provideAnimations(),
+        provideHttpClient(withInterceptorsFromDi())
+    ]
+})
   .catch(err => console.error(err));

openvidu-components/openvidu-admin-dashboard/src/app/app.component.ts

@@ -1,24 +1,29 @@
 import { Component } from "@angular/core";
-import { RecordingInfo } from "openvidu-angular";
+import { RecordingInfo, OpenViduAngularModule, ApiDirectiveModule } from "openvidu-angular";
+
 
 @Component({
-	selector: "app-root",
-	template: `
+    selector: "app-root",
+    template: `
 		<!-- Reference documentation: https://docs.openvidu.io/en/stable/api/openvidu-angular/components/AdminLoginComponent.html -->
-		<ov-admin-login
-			*ngIf="!logged"
-			(onLoginButtonClicked)="onLoginClicked($event)"
-		></ov-admin-login>
-
+		@if (!logged) {
+		  <ov-admin-login
+		    (onLoginButtonClicked)="onLoginClicked($event)"
+		  ></ov-admin-login>
+		}
+		
 		<!-- Reference documentation: https://docs.openvidu.io/en/stable/api/openvidu-angular/components/AdminDashboardComponent.html -->
-		<ov-admin-dashboard
-			*ngIf="logged"
-			[recordingsList]="recordings"
-			(onLogoutClicked)="onLogoutClicked()"
-			(onRefreshRecordingsClicked)="onRefreshRecordingsClicked()"
-			(onDeleteRecordingClicked)="onDeleteRecordingClicked($event)"
-		></ov-admin-dashboard>
-	`
+		@if (logged) {
+		  <ov-admin-dashboard
+		    [recordingsList]="recordings"
+		    (onLogoutClicked)="onLogoutClicked()"
+		    (onRefreshRecordingsClicked)="onRefreshRecordingsClicked()"
+		    (onDeleteRecordingClicked)="onDeleteRecordingClicked($event)"
+		  ></ov-admin-dashboard>
+		}
+		`,
+    standalone: true,
+    imports: [OpenViduAngularModule, ApiDirectiveModule]
 })
 export class AppComponent {
 	title = "openvidu-admin-dashboard";

openvidu-components/openvidu-admin-dashboard/src/app/app.module.ts

@@ -1,26 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { environment } from 'src/environments/environment';
-
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { AppComponent } from './app.component';
-import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
-
-const config: OpenViduAngularConfig = {
-  production: environment.production
-};
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    OpenViduAngularModule.forRoot(config),
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

openvidu-components/openvidu-admin-dashboard/src/main.ts

@@ -1,12 +1,28 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { environment as environment_1 } from 'src/environments/environment';
+import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+
+const config: OpenViduAngularConfig = {
+  production: environment.production
+};
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));

openvidu-components/openvidu-custom-activities-panel/src/app/app.component.ts

@@ -2,10 +2,11 @@ import { HttpClient } from "@angular/common/http";
 import { Component } from "@angular/core";
 import { lastValueFrom } from "rxjs";
 import { environment } from 'src/environments/environment';
+import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
 
 @Component({
-	selector: "app-root",
-	template: `
+    selector: "app-root",
+    template: `
 		<ov-videoconference
 			[token]="token"
 			[toolbarRecordingButton]="false"
@@ -21,7 +22,9 @@ import { environment } from 'src/environments/environment';
 			</div>
 		</ov-videoconference>
 	`,
-	styleUrls: ['./app.component.scss']
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule]
 })
 export class AppComponent {
 

openvidu-components/openvidu-custom-activities-panel/src/app/app.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
-import { environment } from 'src/environments/environment';
-
-const config: OpenViduAngularConfig = {
-  production: environment.production
-};
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    OpenViduAngularModule.forRoot(config)
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

openvidu-components/openvidu-custom-activities-panel/src/main.ts

@@ -1,12 +1,28 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { environment as environment_1 } from 'src/environments/environment';
+import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+
+const config: OpenViduAngularConfig = {
+  production: environment.production
+};
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));

openvidu-components/openvidu-custom-chat-panel/src/app/app.component.ts

@@ -2,33 +2,42 @@ import { HttpClient } from "@angular/common/http";
 import { Component } from "@angular/core";
 import { lastValueFrom } from "rxjs";
 
-import { DataPacket_Kind, DataPublishOptions, DataTopic, ParticipantService, RemoteParticipant, Room, RoomEvent } from "openvidu-angular";
+import { DataPacket_Kind, DataPublishOptions, DataTopic, ParticipantService, RemoteParticipant, Room, RoomEvent, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
 import { environment } from 'src/environments/environment';
 
+
 @Component({
-	selector: 'app-root',
-	template: `
+    selector: 'app-root',
+    template: `
 		<!-- OpenVidu Video Conference Component -->
 		<ov-videoconference
-			(onRoomCreated)="onRoomCreated($event)"
-			[token]="token"
-			[toolbarDisplaySessionName]="false"
-			(onTokenRequested)="onTokenRequested($event)"
-		>
-			<!-- Chat Panel -->
-			<div *ovChatPanel id="my-panel">
-			<h3>Chat</h3>
-			<div>
-				<ul>
-				<li *ngFor="let msg of messages">{{ msg }}</li>
-				</ul>
-			</div>
-			<input value="Hello" #input />
-			<button (click)="send(input.value)">Send</button>
-			</div>
+		  (onRoomCreated)="onRoomCreated($event)"
+		  [token]="token"
+		  [toolbarDisplaySessionName]="false"
+		  (onTokenRequested)="onTokenRequested($event)"
+		  >
+		  <!-- Chat Panel -->
+		  <div *ovChatPanel id="my-panel">
+		    <h3>Chat</h3>
+		    <div>
+		      <ul>
+		        @for (msg of messages; track msg) {
+		          <li>{{ msg }}</li>
+		        }
+		      </ul>
+		    </div>
+		    <input value="Hello" #input />
+		    <button (click)="send(input.value)">Send</button>
+		  </div>
 		</ov-videoconference>
-	`,
-	styleUrls: ['./app.component.scss'],
+		`,
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [
+    OpenViduAngularModule,
+    ApiDirectiveModule,
+    OpenViduAngularDirectiveModule
+],
 })
 export class AppComponent {
 	// Define the URL of the application server

openvidu-components/openvidu-custom-chat-panel/src/app/app.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
-import { environment } from 'src/environments/environment';
-
-const config: OpenViduAngularConfig = {
-  production: environment.production
-};
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    OpenViduAngularModule.forRoot(config)
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

openvidu-components/openvidu-custom-chat-panel/src/main.ts

@@ -1,12 +1,28 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { environment as environment_1 } from 'src/environments/environment';
+import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+
+const config: OpenViduAngularConfig = {
+  production: environment.production
+};
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));

openvidu-components/openvidu-custom-layout/src/app/app.component.ts

@@ -1,38 +1,50 @@
 import { HttpClient } from "@angular/common/http";
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { lastValueFrom, Subscription } from "rxjs";
-import { ParticipantModel, ParticipantService } from "openvidu-angular";
+import { ParticipantModel, ParticipantService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
 import { environment } from 'src/environments/environment';
+import { NgClass } from "@angular/common";
 
 @Component({
-	selector: 'app-root',
-	template: `
+    selector: 'app-root',
+    template: `
 		<!-- OpenVidu Video Conference Component -->
 		<ov-videoconference
-			[token]="token"
-			(onTokenRequested)="onTokenRequested($event)"
-		>
-			<!-- Custom Layout for Video Streams -->
-			<div *ovLayout>
-				<div class="container">
-					<!-- Local Participant's Tracks -->
-					<div *ngFor="let track of localParticipant.tracks" class="item"
-					[ngClass]="{'hidden': track.isAudioTrack && !track.participant.onlyHasAudioTracks}"
-					>
-						<ov-stream [track]="track"></ov-stream>
-					</div>
-
-					<!-- Remote Participants' Tracks -->
-					<div *ngFor="let track of remoteParticipants | tracks" class="item"
-					[ngClass]="{'hidden': track.isAudioTrack && !track.participant.onlyHasAudioTracks}"
-					>
-						<ov-stream [track]="track"></ov-stream>
-					</div>
-				</div>
-			</div>
+		  [token]="token"
+		  (onTokenRequested)="onTokenRequested($event)"
+		  >
+		  <!-- Custom Layout for Video Streams -->
+		  <div *ovLayout>
+		    <div class="container">
+		      <!-- Local Participant's Tracks -->
+		      @for (track of localParticipant.tracks; track track) {
+		        <div class="item"
+		          [ngClass]="{'hidden': track.isAudioTrack && !track.participant.onlyHasAudioTracks}"
+		          >
+		          <ov-stream [track]="track"></ov-stream>
+		        </div>
+		      }
+		
+		      <!-- Remote Participants' Tracks -->
+		      @for (track of remoteParticipants | tracks; track track) {
+		        <div class="item"
+		          [ngClass]="{'hidden': track.isAudioTrack && !track.participant.onlyHasAudioTracks}"
+		          >
+		          <ov-stream [track]="track"></ov-stream>
+		        </div>
+		      }
+		    </div>
+		  </div>
 		</ov-videoconference>
-	`,
-	styleUrls: ['./app.component.scss'],
+		`,
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [
+    OpenViduAngularModule,
+    ApiDirectiveModule,
+    OpenViduAngularDirectiveModule,
+    NgClass
+],
 })
 export class AppComponent implements OnInit, OnDestroy {
 	// Define the URL of the application server

openvidu-components/openvidu-custom-layout/src/app/app.module.ts

@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
-import { environment } from 'src/environments/environment';
-
-const config: OpenViduAngularConfig = {
-  production: environment.production
-};
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    OpenViduAngularModule.forRoot(config)
-
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

openvidu-components/openvidu-custom-layout/src/main.ts

@@ -1,12 +1,28 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { environment as environment_1 } from 'src/environments/environment';
+import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+
+const config: OpenViduAngularConfig = {
+  production: environment.production
+};
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));

openvidu-components/openvidu-custom-panels/src/app/app.component.ts

@@ -3,10 +3,11 @@ import { Component } from "@angular/core";
 import { lastValueFrom } from "rxjs";
 
 import { environment } from 'src/environments/environment';
+import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
 
 @Component({
-	selector: "app-root",
-	template: `
+    selector: "app-root",
+    template: `
 		<!-- OpenVidu Video Conference Component -->
 		<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
 			<!-- Custom Panels -->
@@ -26,8 +27,9 @@ import { environment } from 'src/environments/environment';
 			</ov-panel>
 		</ov-videoconference>
 	`,
-	styleUrls: ["./app.component.scss"]
-
+    styleUrls: ["./app.component.scss"],
+    standalone: true,
+    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule]
 })
 export class AppComponent {
 	// Define the URL of the application server

openvidu-components/openvidu-custom-panels/src/app/app.module.ts

@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
-import { environment } from 'src/environments/environment';
-
-const config: OpenViduAngularConfig = {
-  production: environment.production
-};
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    OpenViduAngularModule.forRoot(config)
-
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

openvidu-components/openvidu-custom-panels/src/main.ts

@@ -1,12 +1,28 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { environment as environment_1 } from 'src/environments/environment';
+import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+
+const config: OpenViduAngularConfig = {
+  production: environment.production
+};
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));

openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.component.ts

@@ -2,32 +2,40 @@ import { HttpClient } from "@angular/common/http";
 import { Component } from "@angular/core";
 import { lastValueFrom } from "rxjs";
 
-import { OpenViduService } from "openvidu-angular";
+import { OpenViduService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
 import { environment } from 'src/environments/environment';
 
-@Component({
-	selector: "app-root",
-	template: `
-		<!-- OpenVidu Video Conference Component -->
-		<ov-videoconference
-			*ngIf="connected"
-			[token]="token"
-			[toolbarDisplaySessionName]="false"
-			(onTokenRequested)="onTokenRequested($event)"
-		>
-			<!-- Participant Panel Item Elements -->
-			<div *ovParticipantPanelItemElements="let participant">
-				<!-- Leave Button for Local Participant -->
-				<button *ngIf="participant.isLocal" (click)="leaveSession()">
-					Leave
-				</button>
-			</div>
-		</ov-videoconference>
 
+@Component({
+    selector: "app-root",
+    template: `
+		<!-- OpenVidu Video Conference Component -->
+		@if (connected) {
+		  <ov-videoconference
+		    [token]="token"
+		    [toolbarDisplaySessionName]="false"
+		    (onTokenRequested)="onTokenRequested($event)"
+		    >
+		    <!-- Participant Panel Item Elements -->
+		    <div *ovParticipantPanelItemElements="let participant">
+		      <!-- Leave Button for Local Participant -->
+		      @if (participant.isLocal) {
+		        <button (click)="leaveSession()">
+		          Leave
+		        </button>
+		      }
+		    </div>
+		  </ov-videoconference>
+		}
+		
 		<!-- Session Disconnected Message -->
-		<div *ngIf="!connected" style="text-align: center;">Session disconnected</div>
-	`,
-	styles: []
+		@if (!connected) {
+		  <div style="text-align: center;">Session disconnected</div>
+		}
+		`,
+    styles: [],
+    standalone: true,
+    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule]
 })
 export class AppComponent {
 	// Define the URL of the application server

openvidu-components/openvidu-custom-participant-panel-item-elements/src/app/app.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
-import { environment } from 'src/environments/environment';
-
-const config: OpenViduAngularConfig = {
-  production: environment.production
-};
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    OpenViduAngularModule.forRoot(config)
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

openvidu-components/openvidu-custom-participant-panel-item-elements/src/main.ts

@@ -1,12 +1,28 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { environment as environment_1 } from 'src/environments/environment';
+import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+
+const config: OpenViduAngularConfig = {
+  production: environment.production
+};
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));

openvidu-components/openvidu-custom-participant-panel-item/src/app/app.component.ts

@@ -3,10 +3,14 @@ import { Component } from "@angular/core";
 import { lastValueFrom } from "rxjs";
 
 import { environment } from 'src/environments/environment';
+import { MatIcon } from "@angular/material/icon";
+import { MatMenuTrigger, MatMenu, MatMenuItem } from "@angular/material/menu";
+import { MatIconButton } from "@angular/material/button";
+import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
 
 @Component({
-	selector: 'app-root',
-	template: `
+    selector: 'app-root',
+    template: `
 		<!-- OpenVidu Video Conference Component -->
 		<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
 			<!-- Participant Panel Items -->
@@ -24,7 +28,9 @@ import { environment } from 'src/environments/environment';
 			</div>
 		</ov-videoconference>
   `,
-	styles: []
+    styles: [],
+    standalone: true,
+    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule, MatIconButton, MatMenuTrigger, MatIcon, MatMenu, MatMenuItem]
 })
 export class AppComponent {
 	// Define the URL of the application server

openvidu-components/openvidu-custom-participant-panel-item/src/app/app.module.ts

@@ -1,32 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-
-import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
-import { environment } from 'src/environments/environment';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { MatMenuModule } from '@angular/material/menu';
-import { MatIconModule } from '@angular/material/icon';
-import { MatButtonModule } from '@angular/material/button';
-
-const config: OpenViduAngularConfig = {
-  production: environment.production
-};
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    MatButtonModule,
-    MatMenuModule,
-    MatIconModule,
-    OpenViduAngularModule.forRoot(config)
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

openvidu-components/openvidu-custom-participant-panel-item/src/main.ts

@@ -1,12 +1,31 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { environment as environment_1 } from 'src/environments/environment';
+import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
+import { MatIconModule } from '@angular/material/icon';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatButtonModule } from '@angular/material/button';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+
+const config: OpenViduAngularConfig = {
+  production: environment.production
+};
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, MatButtonModule, MatMenuModule, MatIconModule, OpenViduAngularModule.forRoot(config)),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));

openvidu-components/openvidu-custom-participants-panel/src/app/app.component.ts

@@ -2,28 +2,33 @@ import { HttpClient } from "@angular/common/http";
 import { Component, OnDestroy, OnInit } from "@angular/core";
 import { lastValueFrom, Subscription } from "rxjs";
 
-import { ParticipantModel, ParticipantService } from "openvidu-angular";
+import { ParticipantModel, ParticipantService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
 import { environment } from 'src/environments/environment';
 
+
 @Component({
-	selector: 'app-root',
-	template: `
+    selector: 'app-root',
+    template: `
 		<!-- OpenVidu Video Conference Component -->
 		<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
-
-			<!-- Custom Participants Panel -->
-			<div *ovParticipantsPanel id="my-panel">
-				<ul id="local">
-					<li>{{localParticipant.name}}</li>
-				</ul>
-				<ul id="remote">
-					<li *ngFor="let p of remoteParticipants">{{p.name}}</li>
-				</ul>
-			</div>
-
+		
+		  <!-- Custom Participants Panel -->
+		  <div *ovParticipantsPanel id="my-panel">
+		    <ul id="local">
+		      <li>{{localParticipant.name}}</li>
+		    </ul>
+		    <ul id="remote">
+		      @for (p of remoteParticipants; track p) {
+		        <li>{{p.name}}</li>
+		      }
+		    </ul>
+		  </div>
+		
 		</ov-videoconference>
-  `,
-	styleUrls: ['./app.component.scss']
+		`,
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule]
 })
 export class AppComponent implements OnInit, OnDestroy {
 	// Define the URL of the application server

openvidu-components/openvidu-custom-participants-panel/src/app/app.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
-import { environment } from 'src/environments/environment';
-
-const config: OpenViduAngularConfig = {
-  production: environment.production
-};
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    OpenViduAngularModule.forRoot(config)
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

openvidu-components/openvidu-custom-participants-panel/src/main.ts

@@ -1,12 +1,28 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { environment as environment_1 } from 'src/environments/environment';
+import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+
+const config: OpenViduAngularConfig = {
+  production: environment.production
+};
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));

openvidu-components/openvidu-custom-stream/src/app/app.component.ts

@@ -3,10 +3,11 @@ import { Component } from '@angular/core';
 import { lastValueFrom } from "rxjs";
 
 import { environment } from 'src/environments/environment';
+import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
 
 @Component({
-	selector: 'app-root',
-	template: `
+    selector: 'app-root',
+    template: `
 		<!-- OpenVidu Video Conference Component -->
     	<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
 
@@ -23,7 +24,9 @@ import { environment } from 'src/environments/environment';
 
 		</ov-videoconference>
   `,
-	styleUrls: ['./app.component.scss']
+    styleUrls: ['./app.component.scss'],
+    standalone: true,
+    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule]
 })
 export class AppComponent {
 	// Define the URL of the application server

openvidu-components/openvidu-custom-stream/src/app/app.module.ts

@@ -1,26 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
-import { environment } from 'src/environments/environment';
-
-const config: OpenViduAngularConfig = {
-  production: environment.production
-};
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    OpenViduAngularModule.forRoot(config)
-
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

openvidu-components/openvidu-custom-stream/src/main.ts

@@ -1,12 +1,28 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { environment as environment_1 } from 'src/environments/environment';
+import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+
+const config: OpenViduAngularConfig = {
+  production: environment.production
+};
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));

openvidu-components/openvidu-custom-toolbar/src/app/app.component.ts

@@ -2,19 +2,21 @@ import { HttpClient } from "@angular/common/http";
 import { Component } from "@angular/core";
 import { lastValueFrom } from "rxjs";
 
-import { ParticipantService } from "openvidu-angular";
+import { ParticipantService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
 import { environment } from 'src/environments/environment';
 
 @Component({
-	selector: 'app-root',
-	template: `
+    selector: 'app-root',
+    template: `
 		<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
 			<div *ovToolbar style="text-align: center;">
 				<button (click)="toggleVideo()">Toggle Video</button>
 				<button (click)="toggleAudio()">Toggle Audio</button>
 			</div>
 		</ov-videoconference>
-	`
+	`,
+    standalone: true,
+    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule]
 })
 export class AppComponent {
 

openvidu-components/openvidu-custom-toolbar/src/app/app.module.ts

@@ -1,25 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
-import { environment } from 'src/environments/environment';
-
-const config: OpenViduAngularConfig = {
-  production: environment.production
-};
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    OpenViduAngularModule.forRoot(config)
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

openvidu-components/openvidu-custom-toolbar/src/main.ts

@@ -1,12 +1,28 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { environment as environment_1 } from 'src/environments/environment';
+import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+
+const config: OpenViduAngularConfig = {
+  production: environment.production
+};
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));

openvidu-components/openvidu-custom-ui/src/app/app.component.ts

@@ -3,11 +3,14 @@ import { Component } from "@angular/core";
 import { lastValueFrom } from "rxjs";
 
 import { environment } from 'src/environments/environment';
+import { OpenViduAngularModule, ApiDirectiveModule } from "openvidu-angular";
 
 @Component({
-  selector: 'app-root',
-  template: '<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)"></ov-videoconference>',
-  styles: ['']
+    selector: 'app-root',
+    template: '<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)"></ov-videoconference>',
+    styles: [''],
+    standalone: true,
+    imports: [OpenViduAngularModule, ApiDirectiveModule]
 })
 export class AppComponent {
 

openvidu-components/openvidu-custom-ui/src/app/app.module.ts

@@ -1,27 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { AppComponent } from './app.component';
-
-import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
-import { environment } from 'src/environments/environment';
-
-const config: OpenViduAngularConfig = {
-    production: environment.production
-};
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    OpenViduAngularModule.forRoot(config)
-
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

openvidu-components/openvidu-custom-ui/src/main.ts

@@ -1,12 +1,28 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { environment as environment_1 } from 'src/environments/environment';
+import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+
+const config: OpenViduAngularConfig = {
+    production: environment.production
+};
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));

openvidu-components/openvidu-toggle-hand/src/app/app.component.html

@@ -1,18 +1,22 @@
 <ov-videoconference (onRoomCreated)="handleRemoteHand($event)" [prejoin]="true" [token]="token" (onTokenRequested)="onTokenRequested($event)">
 
-	<div *ovToolbarAdditionalButtons>
-		<button toolbar-btn mat-icon-button (click)="handleLocalHand()" [class.active-btn]="hasHandRaised">
-			<mat-icon matTooltip="Toggle hand">front_hand</mat-icon>
-		</button>
-	</div>
+  <div *ovToolbarAdditionalButtons>
+    <button toolbar-btn mat-icon-button (click)="handleLocalHand()" [class.active-btn]="hasHandRaised">
+      <mat-icon matTooltip="Toggle hand">front_hand</mat-icon>
+    </button>
+  </div>
 
-	<div *ovStream="let track" style="height: 100%">
-		<ov-stream [track]="track"></ov-stream>
-		<mat-icon @inOutHandAnimation *ngIf="track.participant.hasHandRaised" id="hand-notification">front_hand</mat-icon>
-	</div>
+  <div *ovStream="let track" style="height: 100%">
+    <ov-stream [track]="track"></ov-stream>
+    @if (track.participant.hasHandRaised) {
+      <mat-icon @inOutHandAnimation id="hand-notification">front_hand</mat-icon>
+    }
+  </div>
 
-	<div *ovParticipantPanelItemElements="let participant">
-		<mat-icon *ngIf="participant.hasHandRaised">front_hand</mat-icon>
-	</div>
+  <div *ovParticipantPanelItemElements="let participant">
+    @if (participant.hasHandRaised) {
+      <mat-icon>front_hand</mat-icon>
+    }
+  </div>
 
 </ov-videoconference>

openvidu-components/openvidu-toggle-hand/src/app/app.component.spec.ts

@@ -4,10 +4,8 @@ import { AppComponent } from './app.component';
 describe('AppComponent', () => {
   beforeEach(async(() => {
     TestBed.configureTestingModule({
-      declarations: [
-        AppComponent
-      ],
-    }).compileComponents();
+    imports: [AppComponent],
+}).compileComponents();
   }));
 
   it('should create the app', () => {

openvidu-components/openvidu-toggle-hand/src/app/app.component.ts

@@ -3,31 +3,36 @@ import { HttpClient } from "@angular/common/http";
 import { Component } from "@angular/core";
 import { lastValueFrom } from "rxjs";
 
-import { DataPacket_Kind, DataPublishOptions, ParticipantService, RemoteParticipant, Room, RoomEvent } from "openvidu-angular";
+import { DataPacket_Kind, DataPublishOptions, ParticipantService, RemoteParticipant, Room, RoomEvent, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
 import { ParticipantAppModel } from "./models/participant-app.model";
 
 import { environment } from 'src/environments/environment';
 
+import { MatIcon } from "@angular/material/icon";
+import { MatIconButton } from "@angular/material/button";
+
 enum DataTopicApp {
 	HAND_TOGGLE = 'handToggle'
 }
 
 @Component({
-	selector: 'app-root',
-	templateUrl: './app.component.html',
-	styleUrls: ['./app.component.css'],
-	animations: [
-		trigger('inOutHandAnimation', [
-			transition(':enter', [
-				style({ opacity: 0, transform: 'translateY(-100%)' }),
-				animate('300ms ease-in-out', style({ opacity: 1, transform: 'translateY(0)' }))
-			]),
-			transition(':leave', [
-				style({ opacity: 1, transform: 'translateY(0)' }),
-				animate('300ms ease-in-out', style({ opacity: 0, transform: 'translateY(-100%)' }))
-			])
-		])
-	]
+    selector: 'app-root',
+    templateUrl: './app.component.html',
+    styleUrls: ['./app.component.css'],
+    animations: [
+        trigger('inOutHandAnimation', [
+            transition(':enter', [
+                style({ opacity: 0, transform: 'translateY(-100%)' }),
+                animate('300ms ease-in-out', style({ opacity: 1, transform: 'translateY(0)' }))
+            ]),
+            transition(':leave', [
+                style({ opacity: 1, transform: 'translateY(0)' }),
+                animate('300ms ease-in-out', style({ opacity: 0, transform: 'translateY(-100%)' }))
+            ])
+        ])
+    ],
+    standalone: true,
+    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule, MatIconButton, MatIcon]
 })
 export class AppComponent {
 

openvidu-components/openvidu-toggle-hand/src/app/app.module.ts

@@ -1,24 +0,0 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { AppComponent } from './app.component';
-import { OpenViduAngularConfig, OpenViduAngularModule, ParticipantProperties } from 'openvidu-angular';
-import { environment } from 'src/environments/environment';
-import { ParticipantAppModel } from './models/participant-app.model';
-
-const config: OpenViduAngularConfig = {
-	production: environment.production,
-	participantFactory: (props: ParticipantProperties) => new ParticipantAppModel(props)
-};
-
-@NgModule({
-	declarations: [AppComponent],
-	imports: [BrowserModule, MatButtonModule, MatIconModule, BrowserAnimationsModule, OpenViduAngularModule.forRoot(config)],
-	providers: [],
-	bootstrap: [AppComponent]
-})
-export class AppModule { }

openvidu-components/openvidu-toggle-hand/src/main.ts

@@ -1,12 +1,32 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { ParticipantAppModel } from './app/models/participant-app.model';
+import { environment as environment_1 } from 'src/environments/environment';
+import { OpenViduAngularModule, OpenViduAngularConfig, ParticipantProperties } from 'openvidu-angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+
+const config: OpenViduAngularConfig = {
+	production: environment.production,
+	participantFactory: (props: ParticipantProperties) => new ParticipantAppModel(props)
+};
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, MatButtonModule, MatIconModule, OpenViduAngularModule.forRoot(config)),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));

openvidu-components/openvidu-toggle-hand/src/styles.scss

@@ -10,7 +10,7 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$openvidu-components-primary: mat-palette($mat-blue-grey, 50, 300);
+$openvidu-components-primary: mat-palette($mat-blue-grey, 500, 300);
 $openvidu-components-accent: mat-palette($mat-amber, 500, 700, A100);
 
 // The warn palette is optional (defaults to red).

openvidu-components/openvidu-toolbar-buttons/src/app/app.component.ts

@@ -2,12 +2,14 @@ import { HttpClient } from "@angular/common/http";
 import { Component } from "@angular/core";
 import { lastValueFrom } from "rxjs";
 
-import { ParticipantService } from "openvidu-angular";
+import { ParticipantService, OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
 import { environment } from 'src/environments/environment';
+import { MatIcon } from "@angular/material/icon";
+import { MatIconButton } from "@angular/material/button";
 
 @Component({
-	selector: 'app-root',
-	template: `
+    selector: 'app-root',
+    template: `
     	<ov-videoconference [token]="token" (onTokenRequested)="onTokenRequested($event)">
 			<div *ovToolbarAdditionalButtons style="text-align: center;">
 				<button mat-icon-button (click)="toggleVideo()">
@@ -19,7 +21,9 @@ import { environment } from 'src/environments/environment';
 			</div>
 		</ov-videoconference>
   `,
-	styles: []
+    styles: [],
+    standalone: true,
+    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule, MatIconButton, MatIcon]
 })
 export class AppComponent {
 

openvidu-components/openvidu-toolbar-buttons/src/app/app.module.ts

@@ -1,29 +0,0 @@
-import { NgModule } from '@angular/core';
-import { BrowserModule } from '@angular/platform-browser';
-
-import { AppComponent } from './app.component';
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-import { OpenViduAngularConfig, OpenViduAngularModule } from 'openvidu-angular';
-import { environment } from 'src/environments/environment';
-import { MatButtonModule } from '@angular/material/button';
-import { MatIconModule } from '@angular/material/icon';
-
-const config: OpenViduAngularConfig = {
-  production: environment.production
-};
-
-@NgModule({
-  declarations: [
-    AppComponent
-  ],
-  imports: [
-    BrowserModule,
-    BrowserAnimationsModule,
-    MatButtonModule,
-    MatIconModule,
-    OpenViduAngularModule.forRoot(config)
-  ],
-  providers: [],
-  bootstrap: [AppComponent]
-})
-export class AppModule { }

openvidu-components/openvidu-toolbar-buttons/src/main.ts

@@ -1,12 +1,30 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { environment as environment_1 } from 'src/environments/environment';
+import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
+import { MatIconModule } from '@angular/material/icon';
+import { MatButtonModule } from '@angular/material/button';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+
+const config: OpenViduAngularConfig = {
+  production: environment.production
+};
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, MatButtonModule, MatIconModule, OpenViduAngularModule.forRoot(config)),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));

openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.component.ts

@@ -3,17 +3,20 @@ import { Component } from "@angular/core";
 import { lastValueFrom } from "rxjs";
 
 import { environment } from 'src/environments/environment';
+import { OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule } from "openvidu-angular";
 
 @Component({
-  selector: "app-root",
-  template: `
+    selector: "app-root",
+    template: `
 		<ov-videoconference [token]="token" [toolbarDisplaySessionName]="false" (onTokenRequested)="onTokenRequested($event)">
 			<div *ovToolbarAdditionalPanelButtons style="text-align: center;">
 				<button (click)="onButtonClicked()">MY PANEL</button>
 			</div>
 		</ov-videoconference>
 	`,
-  styles: []
+    styles: [],
+    standalone: true,
+    imports: [OpenViduAngularModule, ApiDirectiveModule, OpenViduAngularDirectiveModule]
 })
 export class AppComponent {
 

openvidu-components/openvidu-toolbar-panel-buttons/src/app/app.module.ts

@@ -1,24 +0,0 @@
-import { NgModule } from "@angular/core";
-import { BrowserModule } from "@angular/platform-browser";
-
-import { AppComponent } from "./app.component";
-import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
-
-import { OpenViduAngularConfig, OpenViduAngularModule } from "openvidu-angular";
-import { environment } from "src/environments/environment";
-
-const config: OpenViduAngularConfig = {
-	production: environment.production,
-};
-
-@NgModule({
-	declarations: [AppComponent],
-	imports: [
-		BrowserModule,
-		BrowserAnimationsModule,
-		OpenViduAngularModule.forRoot(config),
-	],
-	providers: [],
-	bootstrap: [AppComponent],
-})
-export class AppModule {}

openvidu-components/openvidu-toolbar-panel-buttons/src/main.ts

@@ -1,12 +1,28 @@
-import { enableProdMode } from '@angular/core';
+import { enableProdMode, importProvidersFrom } from '@angular/core';
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
 
-import { AppModule } from './app/app.module';
+
 import { environment } from './environments/environment';
+import { AppComponent } from './app/app.component';
+import { environment as environment_1 } from 'src/environments/environment';
+import { OpenViduAngularModule, OpenViduAngularConfig } from 'openvidu-angular';
+import { provideAnimations } from '@angular/platform-browser/animations';
+import { BrowserModule, bootstrapApplication } from '@angular/platform-browser';
+
+const config: OpenViduAngularConfig = {
+	production: environment.production,
+};
+
+
 
 if (environment.production) {
   enableProdMode();
 }
 
-platformBrowserDynamic().bootstrapModule(AppModule)
+bootstrapApplication(AppComponent, {
+    providers: [
+        importProvidersFrom(BrowserModule, OpenViduAngularModule.forRoot(config)),
+        provideAnimations()
+    ]
+})
   .catch(err => console.error(err));