Passing JSON Object into Angular 2 Component

Question

I need to pass JSON object from one component to another using RxJS Subject and Observables. Here is my code:

meta-form.component.ts

import { SharedService } from "../../../shared/shared.service";

@Component({
    selector: 'meta-form',
    template: require("./meta-form.component.html"),
    styles: [require("./meta-form.component.css")],
    providers: [SharedService]
})
export class MetaFormComponent implements OnInit {
    public metaForm: FormGroup;

    constructor(private _fb: FormBuilder, private sharedService: SharedService) { }

    ngOnInit() {
        this.metaForm = this._fb.group({
            params: this._fb.array([
                this.initParam(),
            ])
        })
    }

    initParam(): any {
        return this._fb.group({
            description: ['', Validators.required],
            type: ['', Validators.required]
        })
    }

    sendJSON() {
        let json = JSON.stringify(this.metaForm.value);
        this.sharedService.MetaData(json);
    }
}

save-form.component

import { SharedService } from "../../../shared/shared.service";

import 'rxjs/Rx';

@Component({
    selector: 'save-form',
    template: require("./save-form.component.html"),
    styles: [require("./save-form.component.css")],
    providers: [SharedService]
})
export class SaveFormComponent implements OnInit {
    schema: string[];

    constructor(private sharedService: SharedService) {
        sharedService.metaData$.subscribe((res) => this.schema = res);
    }

    ngOnInit() {
    }
}

and shared.service.ts

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

@Injectable()
export class SharedService {

    private metaData = new Subject<string[]>();
    metaData$ = this.metaData.asObservable();

    MetaData(jsonData) {
        this.metaData.next(jsonData);
    }
}

When I am trying to print JSON at the save-form.component - nothing happens. What am I doing wrong? Thanks for the help.

UPDATE: 1) No errors in the console 2) In save-form.component.html I have this:

<div>{{schema | json}}</div>

3) My JSON schema output will look smth like this

{
  "params": [
    {
      "description": "desc1",
      "type": "string"
    }
  ]
}

Is there any error in the log? Also, can you include how you're trying to print the JSON and an example of what the JSON actually takes the shape of? — silentsod
– silentsod, Commented Nov 21, 2016 at 23:19
In SaveComponent, is schema really a string array, or should it just be a string? It looks like the observable is just pushing out a string. — Brad Rem
– Brad Rem, Commented Nov 21, 2016 at 23:50

Paul Samsotha · Accepted Answer · 2016-11-22 01:24:47Z

4

What am I doing wrong?

You are declaring the service in the @Component.providers

@Component({
    providers: [SharedService]
})

This means that you want that component to get its own instance of the service. So when the component is created, a new service will be created.

If you want them to share the same service, then declare the service at the module level

@NgModule({
    providers: [ SharedService ]
})
class AppModule {}

answered Nov 22, 2016 at 1:24

Paul Samsotha

210k39 gold badges503 silver badges756 bronze badges

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

Collectives™ on Stack Overflow

Passing JSON Object into Angular 2 Component

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related