Master Angular Signals in 60 Seconds

Angular signals are an important concept in Angular programming as they help to manage communication between different components in an Angular application. In this tutorial, we will learn how to use signals to create custom communication channels between components in Angular.

Step 1: Install the SignalR package
First, you need to install the SignalR package in your Angular application. You can do this by running the following command in the terminal:

npm install @aspnet/signalr

Step 2: Set up the SignalR service
Next, you need to create a SignalR service in your Angular application. This service will be responsible for managing the connection to the SignalR server and handling incoming and outgoing messages. Here is an example code for the SignalR service:

import { Injectable } from '@angular/core';
import * as signalR from '@aspnet/signalr';

@Injectable({
  providedIn: 'root'
})
export class SignalRService {
  private hubConnection: signalR.HubConnection

  constructor() {
    this.hubConnection = new signalR.HubConnectionBuilder()
      .withUrl('http://localhost:5000/chathub')
      .build();

    this.hubConnection.start()
      .then(() => console.log('SignalR connection started'))
      .catch(err => console.error('Error while starting SignalR connection: ' + err))
  }

  public sendMessage(message: string) {
    this.hubConnection.invoke('SendMessage', message)
      .catch(err => console.error('Error while sending message: ' + err));
  }

  public onMessageReceived(callback: (message: string) => void) {
    this.hubConnection.on('ReceiveMessage', callback);
  }
}

Step 3: Using the SignalR service in components
Now that you have set up the SignalR service, you can use it in your Angular components to send and receive messages. Here is an example code for using the SignalR service in a component:

import { Component, OnInit } from '@angular/core';
import { SignalRService } from './signalr.service';

@Component({
  selector: 'app-chat',
  templateUrl: './chat.component.html',
  styleUrls: ['./chat.component.css']
})
export class ChatComponent implements OnInit {
  public message: string;

  constructor(private signalRService: SignalRService) { }

  ngOnInit() {
    this.signalRService.onMessageReceived((message: string) => {
      console.log('Message received: ' + message);
    });
  }

  public sendMessage() {
    this.signalRService.sendMessage(this.message);
    this.message = '';
  }
}

In this example, the ChatComponent sends messages using the sendMessage method of the SignalR service and receives messages using the onMessageReceived method.

That’s it! You have now learned how to use Angular signals to create custom communication channels between components in Angular. Happy coding!