Sending the id from a component to a service in Angular

Question

Sending the id from a component to a service in Angular

In my current project, I am working on a chat application using Angular with WebSocket integration. Let me provide an overview of the architecture I have designed for this project. I created a module called 'chatting' which contains a list of users. When I select a user from this list, another component named 'message' opens up.

Now, my goal is to send the user's id along with the message to the backend using a service. The user's id is obtained from the URL parameter using this.route.snapshot.params['id'] in the message.ts file.

My question: How can I pass this id to the service.ts file?

Note: I have attempted to implement this functionality using various WebSocket methods but it has not been successful.

------ My Attempt ------

message.component.ts

this.idUser = this.route.snapshot.params['id'];
sendMessage(event: any, avatar: string, idUser:Number) {
    let obj: Message = {
      text: event.message,
      avatar: avatar,
      username: this.username,
      idUser: this.idUser
    } ;
console.log("id set in message:", obj.idUser)
    this.chatService.sendMessage(obj);
  }

service.ts

idUser: Number = 0;
initializeWebSocketConnection() {
   
    const serverUrl = 'http://localhost:8020/chat-websocket/' + this.idUser;
    console.log("id in service:", serverUrl)
    const ws = new SockJS(serverUrl);
    this.stompClient = Stomp.over(ws);
    const that = this;

    this.stompClient.connect({}, function(frame: any) {
      let message: any;
      that.stompClient.subscribe('/chat/messages', function (message: any) {
        if (message.body) {
          const obj = JSON.parse(message.body);
          that.addMessage(obj.text, obj.username, obj.avatar, obj.idUser);
        }
      });
    });
  }

  addMessage(message: any, username: string, avatar: string, idUser: Number) {
    this.messages.push({
      text: message,
      date: new Date(),
      user: {
        name: username,
        avatar: avatar,
        idUser: idUser
      }
    });
  }

  // Send a chat message using stomp client
  sendMessage(msg: Message) {
    this.stompClient.send('/app/sendmsg', {}, JSON.stringify(msg));
  }}

interface IMessage {

  text: string;
  date: Date;
  user: IUser;
}

interface IUser {
  idUser: Number;
  name: string;
  avatar: string;
}

angular typescript

Answer 1

Answer №1

For detailed information on routing with parameters, please refer to the following link: https://angular.io/guide/router#link-parameters-array

To Configure:

{ path: 'yourURL/:id', component: YourComponent }

Make Active:

<a [routerLink]="['yourURL', yourId]"></a>

Resulting URL:

http://localhost:4200/yourURL/1

Retrieve ID:

this.route.snapshot.snapshot.get('id');

navigation.component.ts

Below is the code snippet for navigating with parameters:

this.route.navigate(['yourURL, this.yourId]);

If you are working in a template, follow the code below:

<a [routerLink]="['yourURL', yourId]"></a>

message.component.ts

In the message component, make sure to retrieve the parameter ID as follows:

constructor(private route: ActivatedRoute,private chatService:ChatService) {}

  ngOnInit(): void {
    this.route.paramMap.pipe(
    switchMap(params => {
    this.idUser = Number(params.get('id'));
   })
  );
}

After obtaining the ID, pass it on to service.ts using this.idUser:

 this.chatService.sendMessage(this.idUser);

Answer 2

For detailed information on routing with parameters, please refer to the following link: https://angular.io/guide/router#link-parameters-array

To Configure:

{ path: 'yourURL/:id', component: YourComponent }

Make Active:

<a [routerLink]="['yourURL', yourId]"></a>

Resulting URL:

http://localhost:4200/yourURL/1

Retrieve ID:

this.route.snapshot.snapshot.get('id');

navigation.component.ts

Below is the code snippet for navigating with parameters:

this.route.navigate(['yourURL, this.yourId]);

If you are working in a template, follow the code below:

<a [routerLink]="['yourURL', yourId]"></a>

message.component.ts

In the message component, make sure to retrieve the parameter ID as follows:

constructor(private route: ActivatedRoute,private chatService:ChatService) {}

  ngOnInit(): void {
    this.route.paramMap.pipe(
    switchMap(params => {
    this.idUser = Number(params.get('id'));
   })
  );
}

After obtaining the ID, pass it on to service.ts using this.idUser:

 this.chatService.sendMessage(this.idUser);

Answer 3

Answer №2

To determine the setup method, consider whether you are utilizing the service directly or through a store (for example: or https://rxjs.dev). If opting for direct websocket service usage, inject it in the constructor and invoke the method upon initializing the message component. You may need a listener on the router to monitor changes. On the other hand, if using a store, create a Subject (https://rxjs.dev/guide/subject) within the websocket and subscribe reactively to ensure new data is forwarded to the backend.

User id inclusion occurs within the message passing; if this id differs from, say, a chat id and is essential for establishing a connection, then adjust your service to incorporate a setup method enabling id passage for closing and reopening with the updated id.


interface Message {
  text: string;
  date: Date;
  user: User;
}

interface User {
  id: number;
  name: string;
  avatar: string;
}

export class MessageComponent implements OnInit {
  userId = 0;
  username = '';

  constructor(
    private route: ActivatedRoute,
    private service: Service
  ) {
  }

  ngOnInit(): void {
    this.userId = this.route.snapshot.params.id;
  }

  sendMessage(event: any, message: string, avatar: string): void {
    console.log('id send message:', this.userId);

    this.service.sendMessage({
      text: message,
      date: new Date(),
      user: {
        id: this.userId, // refactor in your backend userId or just id
        name: this.username,
        avatar,
      }
    });
  }
}



@Injectable({
  providedIn: 'root'
})
export class Service {
  readonly SERVER_URL = 'http://localhost:8020/chat-websocket/'; // fixme: use window.
  sender: Subject<Message> = new Subject<Message>();
  messages: Message[] = [];

  stompClient: any;

  constructor() {
    this.initializeWebSocketConnection();
  }

  initializeWebSocketConnection(): void {
    // I don't know what initial setup you required just using your code
    this.stompClient = Stomp.over(new SockJS(serverUrl));

    this.stompClient.connect({}, (frame: any) => {

      // subscriber for new messages you want to send, user id is passed here.
      this.sender.subscribe(
        next => this.stompClient.send(next.user.id + '/app/sendmsg', {}, JSON.stringify(next))
      );

      this.stompClient.subscribe('/chat/messages', (message: any) => {
        // fixme: you probably could use a mapper here
        if (message.body) {
          const obj = JSON.parse(message.body);
          this.addMessage(obj.text, obj.username, obj.avatar, obj.idUser);
        }
      });
    });
  }

  addMessage(message: any, username: string, avatar: string, userId: number): void {
    this.messages.push({
      text: message,
      date: new Date(), // fixme: backend should set timestamps
      user: {
        id: userId,
        name: username,
        avatar
      }
    });
  }

  // Send a chat message using stomp client
  sendMessage(message: Message): void {
    this.sender.next(message);
  }
}

Answer 4

To determine the setup method, consider whether you are utilizing the service directly or through a store (for example: or https://rxjs.dev). If opting for direct websocket service usage, inject it in the constructor and invoke the method upon initializing the message component. You may need a listener on the router to monitor changes. On the other hand, if using a store, create a Subject (https://rxjs.dev/guide/subject) within the websocket and subscribe reactively to ensure new data is forwarded to the backend.

User id inclusion occurs within the message passing; if this id differs from, say, a chat id and is essential for establishing a connection, then adjust your service to incorporate a setup method enabling id passage for closing and reopening with the updated id.


interface Message {
  text: string;
  date: Date;
  user: User;
}

interface User {
  id: number;
  name: string;
  avatar: string;
}

export class MessageComponent implements OnInit {
  userId = 0;
  username = '';

  constructor(
    private route: ActivatedRoute,
    private service: Service
  ) {
  }

  ngOnInit(): void {
    this.userId = this.route.snapshot.params.id;
  }

  sendMessage(event: any, message: string, avatar: string): void {
    console.log('id send message:', this.userId);

    this.service.sendMessage({
      text: message,
      date: new Date(),
      user: {
        id: this.userId, // refactor in your backend userId or just id
        name: this.username,
        avatar,
      }
    });
  }
}



@Injectable({
  providedIn: 'root'
})
export class Service {
  readonly SERVER_URL = 'http://localhost:8020/chat-websocket/'; // fixme: use window.
  sender: Subject<Message> = new Subject<Message>();
  messages: Message[] = [];

  stompClient: any;

  constructor() {
    this.initializeWebSocketConnection();
  }

  initializeWebSocketConnection(): void {
    // I don't know what initial setup you required just using your code
    this.stompClient = Stomp.over(new SockJS(serverUrl));

    this.stompClient.connect({}, (frame: any) => {

      // subscriber for new messages you want to send, user id is passed here.
      this.sender.subscribe(
        next => this.stompClient.send(next.user.id + '/app/sendmsg', {}, JSON.stringify(next))
      );

      this.stompClient.subscribe('/chat/messages', (message: any) => {
        // fixme: you probably could use a mapper here
        if (message.body) {
          const obj = JSON.parse(message.body);
          this.addMessage(obj.text, obj.username, obj.avatar, obj.idUser);
        }
      });
    });
  }

  addMessage(message: any, username: string, avatar: string, userId: number): void {
    this.messages.push({
      text: message,
      date: new Date(), // fixme: backend should set timestamps
      user: {
        id: userId,
        name: username,
        avatar
      }
    });
  }

  // Send a chat message using stomp client
  sendMessage(message: Message): void {
    this.sender.next(message);
  }
}

Sending the id from a component to a service in Angular

Answer №1

Answer №2

Similar questions

Using Angular 4 Query Parameters without Route Parameters

Listening for Backdrop Click in Angular NgBootstrap Modal

Issues encountered with the `npm install` command in Azure build pipelines for a simple Angular application

Acquiring an element through ViewChild() within Angular

Attempting to publish and install a unique angular2 component using NPM and Angular-CLI results in successful compilation only on the initial try

agm-circle has such a high drag sensitivity in angular 4

Best practices for transferring objects between components while navigating routes in Angular

Obtaining the component instance ('this') from a template

Need help with npm installation woes? In search of tips on ensuring version compatibility for Angular V16?

If the value is null, pass it as is; if it is not null, convert it to a date using the

What is the best way to shorten text in Angular?

Can Angular 9 be used to compile a latex document?

Plugin for managing network connectivity in Ionic framework

Tips for incorporating runtime configuration into an Angular module and effectively leveraging it

Comparing RxJS and Async/Await: Which one is the better choice?

An error in typescript involving a "const" assertion and a string array

Are MobX Observables interconnected with RxJS ones in any way?

Issue: The observer's callback function is not being triggered when utilizing the rxjs interval

Exploring TypeScript: Implementing a runtime data mapping in place of an interface

Integrate TypeScript into the current project