Share data with a static component - Angular

Question

My component where all pages are loaded is like below:

<app-header></app-header>
<div>

  <router-outlet></router-outlet>
</div>
<app-footer></app-footer>

My need is to display some alerts below header bar inside header component on any action that triggers messageservice in any of the components that replace router outlet. I have a common messageService which is used across components and is also added as provider in app.module.ts

My problem is, header is static , means no event occurs except on page load. Due to this, even when messageService is triggered, even when i place subscribe in constructor or onInit, definitely subscription wouldn't happen. I am unsure how can i get value from subscription in header component. Please favour .

try subscribing messageService in ngOnInit of header component — Piyush Jain
I tried onInit. OnInit seem to be called only once on page load. after that, just only router outlet undergoes page load and all, header doesn't. so onInit doesn't get called. — Gayathri
It appears you don't really understand how observables work. If your header subscribes to the messageService in ngOnInit, it will receive every message sent by the service. It is an asynchronous subscribtion. Can you show the messageService code, the header code, and an exemple of how a component sends a message ? Can you explain what do you technically mean by "header is static" ? — Random
I actually had setter as assignment to variable say "message" and getter as Observable.of(message) to subscribe. With subject, it's working on OnInit. Thanks all. — Gayathri

Johns Mathew Johns Mathew · Accepted Answer · 2019-08-29T07:43:27

You can subscribe to MessageService from ngOnInit of header component. ngOnInit is called only once, but the subscription will remain active until the header is destroyed. Ensure that the object storing the message in MessageService is subscribable (like a Subject).

For eg. if your MessageService has a message$ property which is updated when a message is to be displayed.

export class MessageService {

  private _message$ = new Subject();

  constructor() { }

  public setMessage(msg: string) {
    this._message$.next(msg);
  }

  public getMessage(): Observable<string> {
    return this._message$.asObservable();
  }

}

You can subscribe to the getMessage method in your header and assign it to headerMessage. You can use headerMessage to display the message in header html

export class HeaderComponent implements OnInit {

  headerMessage: string;

  constructor(private messageService: MessageService) { }

  ngOnInit() {
    this.messageService.getMessage().subscribe(message => this.headerMessage = message);
  }

}

When you need to set a new message in the header from some other component, you can inject MessageService to the component and use the below code to do the same.

this.messageService.setMessage('sample message');

This would trigger the getMessage subscription in the headerComponent and the headerMessage property will be updated to the new message - 'sample message'.

Share data with a static component - Angular

1 Answers