Sending data to components through services using the subject in Angular

Question

I have a component that displays a message for a few seconds, my problem is that I can not subscribe to the service and perform the necessary operations, how to do this?

This was a short example, I want to call the message component at all stages of the project, how do I do that?

homeComponent.ts:

    export class HomeComponent  {
      constractor(privat _service:IHomeService){}
      getMessage(){
        this._service.get();
      }
    }

homeComponent.html:

<p (click)="getMessage()">
 show Message 
</p>

homeService.ts:

@Injectable()
export class HomeService {
  openMessage=new Subject<string>();
  get() {
    setTimeout(()=>{
      this.openMessage.next("test")
    },1000)
  }
}

messageComponent.ts:

export class MessageComponent  {
  constructor(private _service:HomeService){
    this._service.openMessage.subscribe((res)=>{
      this.name=res;
      this.flag=true;
      setTimeout(()=>{
        this.flag=false;
      },4000)
    })
  }
  name = '';
  flag:boolean=false
}

messageComponent.html:

<p [ngStyle]="flag?'display:block':'display:none'">
  {{name}}
</p>

I think this does not happen because the message component is not loaded How do I load it in the service?

Where is the `messageComponent`'s selector included? Something like `` — ruth, Apr 22 '21 at 07:37
I do not want to include it anywhere, I want to load in the service, because it is for the whole project and not a specific part — jon, Apr 22 '21 at 07:42
Check the difference of a `Subject` and `BehaviourSubject` from this [link](https://stackoverflow.com/questions/43348463/what-is-the-difference-between-subject-and-behaviorsubject).You may need to replace `Subject` with `BehaviourSubject`. — tufonas, Apr 22 '21 at 09:24

score 0 · Answer 1 · answered Apr 22 '21 at 07:24

0

Where are you loading messageComponent?

homeComponent.html:
    <p (click)="getMessage()">
     show Message  // if you loading message component here then you should use message component's selector here
    </p>

answered Apr 22 '21 at 07:24

Azeem

46
5

score 0 · Answer 2 · answered Apr 22 '21 at 07:24

0

You don't "load" a component in a service, services in Angular store logics, they don't consume components.

If MessageComponent is responsibile for displaying the message in the UI then you just need to use it in your template. Assuming its selector is message-component you can add it to your HomeComponent template:

<p (click)="getMessage()">
 <message-component></message-component>
</p>

answered Apr 22 '21 at 07:24

lbsn

2,322
1
11
19

This was a small example, I use it in many places and I can not do it anywhere in the import, iodine in the service, how to do it? – jon Apr 22 '21 at 07:38
Sorry, it is not clear to me what's your issue here. Reusing components is the point of having a component for that specific UI fragment. Again, you can not "load" components in a service. You can dynamically load a component in your UI instead of using a selector in your template, if that's your problem. I suggest you add some more details on what you're trying to accomplish. – lbsn Apr 22 '21 at 08:03

Mattew Eon · Answer 3 · 2021-04-22T07:36:35.640

You are missing the Observable var in your service. Here is how you should do it :

import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';

@Injectable()
export class HomeService {
  private openMessage: Subject<string> = new Subject<string>();
  public $openMessage: Observable<string> = this.openMessage.asObservable();

  public sendMessage(message: string) {
    this.openMessage.next(message);
  }
}

And then you will be able to call the subscribe() method to the $openMessage variable declared in your class. Here is how to update your MessageComponent.ts :

export class MessageComponent {
  public name: string = '';
  public flag: boolean = false;

  constructor(private _service:HomeService){
    this._service.$openMessage.subscribe((message)=>{
      this.message = res;
      this.flag = true;
      setTimeout(()=>{
        this.flag=false;
      },4000)
    })
  }
}

`Subject`s are Observables and you can subscribe to them, they expose a `subscribe()` method. What you're doing here is certainly a good practice in order to encapsulate the ability to _emit_ a new value but has nothing to do with the ability to _subscribe_ — lbsn, Apr 22 '21 at 07:36
No, I tried, but it does not work, because it must be imported first, how can I do this import in the service? — jon, Apr 22 '21 at 07:39

Sending data to components through services using the subject in Angular

3 Answers3