1node -v
2npm -v
3

1npm install -g @angular/cli
2

1ng version
2

1ng new angular-chat-app
2cd angular-chat-app
3

1ng generate service chat
2ng generate component message
3ng generate component user
4

1npm install socket.io-client
2

1import { Injectable } from '@angular/core';
2import { io } from 'socket.io-client';
3import { Observable } from 'rxjs';
4
5@Injectable({
6  providedIn: 'root'
7})
8export class ChatService {
9  private socket = io('http://localhost:3000'); // Replace with your server URL
10
11  joinRoom(data:any):
12   void{
13    this.socket.emit('join', data);
14   }
15
16  sendMessage(data:any):
17  void{
18   this.socket.emit('message',data);
19  }
20
21  getMessage(): Observable<any> {
22    return new Observable(observer => {
23      this.socket.on('new message', (data:any) => {
24        observer.next(data);
25      });
26    });
27  }
28
29  getJoinedUsers(): Observable<any> {
30    return new Observable(observer => {
31      this.socket.on('user joined', (data:any) => {
32        observer.next(data);
33      });
34    });
35  }
36
37  leaveRoom(data:any):
38  void{
39    this.socket.emit('leave',data);
40  }
41}
42

1// Example usage in a component
2import { Component, OnInit } from '@angular/core';
3import { ChatService } from './chat.service';
4
5@Component({
6  selector: 'app-chat',
7  templateUrl: './chat.component.html',
8  styleUrls: ['./chat.component.css']
9})
10export class ChatComponent implements OnInit {
11
12  constructor(private chatService: ChatService) { }
13
14  ngOnInit(): void {
15    this.chatService.getMessage().subscribe((msg:any) => {
16      console.log(msg);
17    });
18  }
19
20  sendMessage(){
21    this.chatService.sendMessage({message: 'test'});
22  }
23
24}
25

1npm install @angular/fire firebase
2

1import { NgModule } from '@angular/core';
2import { BrowserModule } from '@angular/platform-browser';
3import { AngularFireModule } from '@angular/fire/compat';
4import { AngularFireDatabaseModule } from '@angular/fire/compat/database';
5import { environment } from '../environments/environment';
6
7import { AppComponent } from './app.component';
8
9@NgModule({
10  declarations: [
11    AppComponent
12  ],
13  imports: [
14    BrowserModule,
15    AngularFireModule.initializeApp(environment.firebase),
16    AngularFireDatabaseModule
17  ],
18  providers: [],
19  bootstrap: [AppComponent]
20})
21export class AppModule { }
22

1import { Injectable } from '@angular/core';
2import { AngularFireDatabase } from '@angular/fire/compat/database';
3import { Observable } from 'rxjs';
4
5@Injectable({
6  providedIn: 'root'
7})
8export class ChatService {
9
10  constructor(private db: AngularFireDatabase) { }
11
12  sendMessage(message: string, user: string) {
13    this.db.list('/messages').push({ user: user, message: message });
14  }
15
16  getMessages(): Observable<any[]> {
17    return this.db.list('/messages').valueChanges();
18  }
19}
20

1ng add @angular/material
2

1// Example of using Angular Material components in your template
2<mat-card>
3  <mat-card-content>
4    <mat-form-field>
5      <input matInput placeholder="Message" [(ngModel)]="messageText">
6    </mat-form-field>
7    <button mat-raised-button color="primary" (click)="sendMessage()">Send</button>
8  </mat-card-content>
9</mat-card>
10
11<mat-list>
12  <mat-list-item *ngFor="let message of messages">
13    {{ message.user }}: {{ message.message }}
14  </mat-list-item>
15</mat-list>
16

1npm install @angular/fire/compat/auth
2

1// Example of setting up Firebase Authentication in your component
2import { Component } from '@angular/core';
3import { AngularFireAuth } from '@angular/fire/compat/auth';
4
5@Component({
6  selector: 'app-login',
7  templateUrl: './login.component.html',
8  styleUrls: ['./login.component.css']
9})
10export class LoginComponent {
11
12  constructor(public auth: AngularFireAuth) {}
13
14  login() {
15    this.auth.signInWithEmailAndPassword('test@example.com', 'password'); //Replace
16  }
17
18  logout() {
19    this.auth.signOut();
20  }
21}
22

1// Example of protecting chat routes using Angular Guards
2import { Injectable } from '@angular/core';
3import { CanActivate, Router } from '@angular/router';
4import { AngularFireAuth } from '@angular/fire/compat/auth';
5import { Observable } from 'rxjs';
6import { map } from 'rxjs/operators';
7
8@Injectable({
9  providedIn: 'root'
10})
11export class AuthGuard implements CanActivate {
12
13  constructor(private auth: AngularFireAuth, private router: Router) {}
14
15  canActivate(): Observable<boolean> {
16    return this.auth.authState.pipe(
17      map(user => {
18        if (user) {
19          return true;
20        } else {
21          this.router.navigate(['/login']);
22          return false;
23        }
24      })
25    );
26  }
27}
28