Pass JSON data from App Component to another component in Angular 6

Question

I have two components, 1. App Component 2. Main Component

app.component.ts

  ngOnInit () {
      this.httpService.get('./assets/batch_json_data.json').subscribe(data => {
         this.batchJson = data as string [];    
       }

I am able to get the JSON from a file into 'batchJson' and need to pass this to my main component for further operations.

There is no event or anything that triggers this.

I have not implemented anything yet, I am trying to read @Input, @Output etc but do not understand how it works and need to go through it some more.

I have just declared basics in the main.component.ts

import { Component, OnInit, ViewChild, Input } from '@angular/core';
import { AppComponent } from '../app.component';

export class MainComponent implements OnInit {
}

Please help me out, I am an absolute rookie in Angular and am unable to try anything because my concepts are not clear and I did browse Stack Overflow, the answers are not matching my requirements.

Marshal · Accepted Answer · 2018-10-11 15:15:10Z

2

One solution could be to use a public BehaviorSubject in your app.component.ts.

public batchJson$ = new BehaviorSubject<JSON>(null);
   ngOnInit () {
      this.httpService.get('./assets/batch_json_data.json').subscribe(data => {
         this.batchJson = data as string [];  
         this.batchJson$.next(JSON.parse(data));
       }

Then in your main.component.ts

constructor(private _appComponent : AppComponent )

ngOnInit(){
  this._appComponent.batchJson$.subscribe((data)=>{
   if(data != null){
    //set data to local variable here
  }  
 })
}

Typically I store this kind of logic in a Service, using this in a component will definitely get you pointed in the right direction to learning this concept. Preferably your component should be responsible for interacting with the UI and rendering data, while your services handle retrieving and distributing data.

edited Oct 11, 2018 at 15:15

answered Oct 11, 2018 at 15:10

Marshal

11.2k3 gold badges40 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Sumit Vekariya · Accepted Answer · 2018-10-11 15:32:26Z

1

You can use rxjs subject to emit the data through out the app and fetch it anywhere by using subject.getValue() method.

answered Oct 11, 2018 at 15:32

Sumit Vekariya

4882 silver badges12 bronze badges

Comments

Sunil · Accepted Answer · 2018-10-11 16:19:41Z

1

First of all you should spare time on understanding the concept of any technology before you start working on it. Else you would be spending most of the time seeking help.

I had created demo here - https://stackblitz.com/edit/angular-lko7pa. I hope it will help you out.

answered Oct 11, 2018 at 16:19

Sunil

11.3k2 gold badges29 silver badges48 bronze badges

Comments

General Grievance · Accepted Answer · 2024-04-09 19:33:59Z

1

You can implement common service which does all related http operations and you can inject this service in any component you want and read the json.

Make sure you return the http.get and you subscribe to it where ever you call this method.

If you are not aware of services , you can read about creating and injecting services in angular

edited Apr 9, 2024 at 19:33

General Grievance

5,12039 gold badges39 silver badges60 bronze badges

answered Oct 11, 2018 at 15:00

user10490459

Collectives™ on Stack Overflow

Pass JSON data from App Component to another component in Angular 6

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest