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?

Answer 1

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> 

Answer 2

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>

Answer 3

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)
    })
  }
}