How to use one component data in another component in angular 6?

Question

I have a component.ts file which is making a http call & retrieving json data as response. I need to use this response in another component.ts file. Can anyone tell me how to process this? first component.ts:

  @Component({
selector: 'app-cat',
templateUrl: './first.component.html',
styleUrls: ['./first.component.css']
 })
 export class firstComponent extends Lifecycle {
  this.http.get('/name',{responseType:"json"}).subscribe(
   response => {
        console.log("data :"+response);
        console.log("data stringify:"+JSON.stringify(response));

   });  
   }

I need to use the json content which is in the response in my second component file. Can anybody tell me how to proceed this in angular6?

Answer 1

****Create separate service for making calls and in that service create a method as such

  public getData(): Observable<> {

        return this.http.get('/name',{responseType:"json"}).subscribe(
   response => {
        console.log("data :"+response);
        console.log("data stringify:"+JSON.stringify(response));

   }); 
     }

****And in your component declare service in constructor //don't forget to import it

public jsonData:any;
constructor(private Service: Service ) {
    }
getData() {  
        this.Service.getData().subscribe(data => {  
            console.log("Data is ",data);
this.jsonData = data;
        },  
            error => console.log(error)  
        );  
    }

Finally,you can use jsonData to work with your data.

Answer 2

Parent to Child: Sharing Data via Input

parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `
    <app-child [childMessage]="parentMessage"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent{
  parentMessage = "message from parent"
  constructor() { }
}

child.component.ts

import { Component, Input } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
      Say {{ message }}
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  @Input() childMessage: string;

  constructor() { }

}

Sharing Data via Output() and EventEmitter

parent.component.ts

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

@Component({
  selector: 'app-parent',
  template: `
    Message: {{message}}
    <app-child (messageEvent)="receiveMessage($event)"></app-child>
  `,
  styleUrls: ['./parent.component.css']
})
export class ParentComponent {

  constructor() { }

  message:string;

  receiveMessage($event) {
    this.message = $event
  }
}

child.component.ts

import { Component, Output, EventEmitter } from '@angular/core';

@Component({
  selector: 'app-child',
  template: `
      <button (click)="sendMessage()">Send Message</button>
  `,
  styleUrls: ['./child.component.css']
})
export class ChildComponent {

  message: string = "Hola Mundo!"

  @Output() messageEvent = new EventEmitter<string>();

  constructor() { }

  sendMessage() {
    this.messageEvent.emit(this.message)
  }
}

please visit https://angularfirebase.com/lessons/sharing-data-between-angular-components-four-methods/ for other methods.

Answer 3

Use Input & Output Decorators

Basic concept ---> DEMO

app.component.html:

<app-component1 (elm)="catch1Data($event)">

</app-component1>
<app-component2 [elm]="datatocomp2" *ngIf="datatocomp2"></app-component2>

parent component : {{datatocomp2 | json}}

app.component.ts:

 datatocomp2: any;

  catch1Data(data) {
    console.log(data)
    this.datatocomp2 = data;
  }

component1.ts:

@Output () elm : EventEmitter<any> = new EventEmitter<any>();

  objectData: any;

  constructor() { }

  ngOnInit() {
    let objectData = {
      comp: 'component 1',
      data: 'anything'
    }

    this.objectData = objectData;
    this.elm.emit(objectData)
  }

component2.ts:

 @Input() elm: any;

  constructor() { }

  ngOnInit() {
    console.log(this.elm);
  }

Answer 4

Solution 1 using a common injectible service

Shared.service.ts

@Injectible()
class SharedService {
function getData():any{
       return this.http.get('/name',{responseType:"json"}).subscribe(
           response => {
                console.log("data :"+response);
                console.log("data stringify:"+JSON.stringify(response));

           });   

     }      

}

Solution 2 using a parent child component

Second.component.ts

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

@Component({
  selector: 'app-first-component',
  template: `<p>{{data}}</p>`
})
export class SecondComponent{
data:any={};
ngOnInit(){this.getData();}

function getData():any{
 this.http.get('/name',{responseType:"json"}).subscribe(
   response => {
        console.log("data :"+response);
        console.log("data stringify:"+JSON.stringify(response));
        this.data=data
   }); 
 } 
}

parent.component.ts

import { Component }                from '@angular/core';
import { SecondComponent }  from './second.component';

@Component({
  selector: 'app-first-component',
  template: `
  <h3>Get data (via local variable)</h3>
  <button (click)="second.getData()">GetData</button>
  <app-first-component #second></app-first-component>
  `
})
export class FirstComponent{ }

Answer 5

You can create store service for your 'global' data:

store.service.ts

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

@Injectable()
export class StoreService {
  protected store: Map<string, any> = new Map();

  constructor() { }


  public get(key: string): any {
    return this.store.get(key);
  }

  public set(key: string, value: any) {
    this.store.set(key, value);
  }

}

And then in yours component (lets call it X) you save data to store:

x.component.ts

import { Component, OnInit } from '@angular/core';
import { HttpClinet } from '@angular/common/http';
import { StoreService } from './store-service.service.ts';

@Component({
  selector: 'app-x',
  templateUrl: './x.component.html',
  styleUrls: ['./x.component.css']
})
export class XComponent implements OnInit {

  constructor(
    private store: StoreService,
    private http: HttpClient,
  ) { }

  ngOnInit() {
  }

  getResource() {
      this.http.get('/name',{responseType:"json"}).subscribe(
        response => {
        this.store.set('response', response);
        console.log("data :"+response);
        console.log("data stringify:"+JSON.stringify(response));

   }); 

}

And then in yours other component (lets call it Y) you get your data:

y.component.ts

import { Component, OnInit } from '@angular/core';
import { StoreService } from './store-service.service.ts';

@Component({
  selector: 'app-y',
  templateUrl: './y.component.html',
  styleUrls: ['./y.component.css']
})
export class YComponent implements OnInit {

  constructor(
    private store: StoreService
  ) { }

  ngOnInit() {
  }

  getSavedResponse() {
     // ask store for the resource
     return this.store.get('response');
   }); 

}

This is just simple example, if you know the structure of your response got by http call it would be good idea to make model of it. Using the store any component can get or set store data.

If you need something more complex look for: @ngrx/store

Cases when you would not need store service:

• If you do that http call in parent component then you can use child inputs to pass the data.

• If you make that call in child component then use @Output and EventEmitter, to pass up the data (just one level, you can not do this to pass to grandparent)

Regards.