get the data from one component to other in angular 7

Question

I have 2 components namely A and B. The component A catches a event when some some event is fired. I mean to say it shows some message as "Job 1 is Running". So here whatever the message the comonent A is showing the same message i have to show it on the component B. For that i have written the code something like this: Here in when i click the event run button it will check the entry.status == 'In_progress', if this condition matches then in the component A i will get the message as "Job 1 is running" something like. I want to catch the same message in component B also. For that i have added some code see below:

componentA.component.ts

tasks(){
this.tasksRes = results['data'];
this.count = 0;
      for (let entry of this.tasksRes) {
        if (entry.status == 'In_progress') {
          this.count = this.count + 1;
        }
      }
}

connect(){
      let source = new EventSource('/api/v1/events/register');
      source.addEventListener('message', message => {
          this.tasks();
      });
  }

componentA.component.html

<ul class="p-0" *ngFor="let task of tasksRes">
<li>
<span class="text-muted">{{task.eventType}}</span>
</li>
<ul>

The above code shows the message as "Job 1 running".

I am trying to get the "task.eventType" in component B also. so how can we achieve it. How can i get the same status here in component B also. Help is highly appreciated.

Thanks

Possible duplicate of [Angular 4 pass data between 2 not related components](https://stackoverflow.com/questions/44414226/angular-4-pass-data-between-2-not-related-components) — Sangwin Gawande, Nov 30 '18 at 08:35

score 1 · Answer 1 · answered Nov 30 '18 at 07:12

Firstly you should create service.

export class TaskService  {
  onTaskValueChange: BehaviorSubject<any> = new BehaviorSubject(
    null
  );

  constructor(  ) {}
  taskChange(task: any): void {
    this.onTaskValueChange.next(task);
  }

}

Then when the task value change, call the function in A component.

taskService.taskChange(task);

And subscribe it in B component.

    onTaskValueChange: Subscription;

    this.onTaskValueChange= this.taskService.onTaskValueChange.subscribe(task => {

//Do it something.

        });

Do not forget to add Task Service as provider in module and add Task Service in constuctors. Inject it. In ngOnDestroy() function , you need to unsubscribe service as following code.

 this.onTaskValueChange.unsubscribe();

Also you can subscribe anywhere in the project.

score 1 · Answer 2 · answered Nov 30 '18 at 07:15

I have a very simple example of a service detailed in this blog post: https://blogs.msmvps.com/deborahk/build-a-simple-angular-service-to-share-data/

import { Injectable } from '@angular/core';
@Injectable() 
export class DataService {
  serviceData: string; 
}

Or in Angular v6+

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

@Injectable({
  providedIn: 'root'
}) 
export class DataService {
  serviceData: string; 
}

Either component can read or write to this property.

Here is an example component:

import {Component} from '@angular/core'
import { DataService } from './data.service';

@Component({ 
 template: ``, 
}) 
export class A {

  get data():string { 
    return this.dataService.serviceData; 
  } 
  set data(value: string) { 
    this.dataService.serviceData = value; 
  } 

  constructor(public dataService: DataService) { } 
}

get the data from one component to other in angular 7

2 Answers2