How to pass JSON to @Input in angular?

Question

Is there any way to assign a json file as a value to @Input directly?

Say i am having config.json as follows,

{
    "video": [
        {
            "videoSrc": "assets/video/test.mp4",
            "videoType": "video/mp4",
            "videoPlayPause": true,
            "videoStartOver": true,
            "videoWidth": 300,
            "videoHeight": 225 
        }
    ],
    "image": [
        {
            "imageSrc": "assets/image/test.jpg",
            "imageType": "jpg",
            "imgWidth": 300,
            "imgHeight": 225 
        }
    ]
}

In video-component i am in the need to get the video object from the file,

In video-component.ts i have the following code,

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

    @Component({
      selector: 'mrt-video-playback',
      templateUrl: './video-playback.component.html',
      styleUrls: ['./video-playback.component.scss']
    })
    export class VideoPlaybackComponent implements OnInit {

      @Input() videoConfiguration: object = config.json;

 }

In html i have,

<div> {{videoConfiguration}} </div>

I know that the below line is wrong,

@Input() videoConfiguration: object = config.json;

But i am given one such thing that i should get the object from json and need to store it to @Input.

In config.json file i need to get the video object and need to pass it to html as it is video component i am in the need to pass the values from video to the html. As i have used @Input, it can also be used in other component.

do you want to pass the data from parent to child or you want to emit data to child to parent — Chellappan வ
– Chellappan வ, Commented Jul 10, 2018 at 11:04
@ChellappanV, Yes i want to pass data from parent to child.. — Maniraj Murugan
– Maniraj Murugan, Commented Jul 10, 2018 at 11:08

Chellappan வ · Accepted Answer · 2018-07-10 11:29:02Z

1

IF you want to pass the data from child to parent then you have to use Output property Binding I have included the example here Check this out: https://stackblitz.com/edit/angular-o1ghlv

edited Jul 10, 2018 at 11:29

answered Jul 10, 2018 at 11:14

Chellappan வ

27.9k4 gold badges39 silver badges69 bronze badges

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

1 Comment

Maniraj Murugan Over a year ago

Can u provide solution for emit data to child to parent as because i am expecting solution for both aspects and it would be much more helpful as i am a beginner.

khush · Accepted Answer · 2018-07-10 11:24:11Z

You can use JSON.parse(),

 @Input() videoConfiguration: object;

 constructor(private _http:Http){}

 ngOnInit(){
      this._http.get('assets/config.json')
      .subscribe((response) => { 
               this.videoConfiguration = JSON.parse(response.video)
      });
 }

But if you pass input to selector 'mrt-video-playback', then that will override its value,

<mrt-video-playback [videoConfiguration]="anyObject">

OR

You can also pass this value to selector,

<mrt-video-playback [videoConfiguration]="configJson"> </mrt-video-playback>
 ngOnInit(){
          this._http.get('assets/config.json')
          .subscribe((response) => { 
                   this.configJson = JSON.parse(response.video)
          });
     }

Collectives™ on Stack Overflow

How to pass JSON to @Input in angular?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related