Angular component multiple instance binding input problem

Question

I am using an Angular Wrapper for JSON Editor like this:

<div *ngFor="let act of editedActions" class="w-100-p p-24">
  {{act.test_step_id}}
  <json-editor [options]="editorOptions" [(data)]="act.action_json" [(eventParams)]="act.test_step_id" (jsonChange)="changeStepActions($event)"></json-editor>
  <button mat-raised-button class="w-100-p mt-24" color="primary" (click)="editRecordJson(act.test_step_id)">
    <span>Update</span>
  </button>
</div>

The problem is that eventParams should be different for each editor but it is not varying.

I think problem is this component code (but not sure) (This line is in the component taken from github):

@ViewChild('jsonEditorContainer', { static: true }) jsonEditorContainer: ElementRef;

The component is behaving like a singleton. Any help?

Edit: I edited this repo and added jsonchange event. Details here

where do you define jsonEditorContainer in your template, I can't see it. Also if you want multiple instances from within your ngFor you should use ViewChildren — Poul Kruijt
– Poul Kruijt, Commented Feb 3, 2020 at 13:49
it is defined in the component in the github link: github.com/mariohmol/ang-jsoneditor/blob/master/ang-jsoneditor/… — osmanraifgunes
– osmanraifgunes, Commented Feb 3, 2020 at 14:30
What is eventParams? Is an Input\Output of ang-jsoneditor? a custom directive? I can't find anything about it. — Shalom Peles
– Shalom Peles, Commented Feb 3, 2020 at 16:21
I edited it to try if i can get parameter by manually passing to event. It is same for the editRecordJson event. — osmanraifgunes
– osmanraifgunes, Commented Feb 3, 2020 at 16:28

255kb - Mockoon · Accepted Answer · 2020-02-03 16:39:58Z

1

You may want to use @ViewChildren with a direct reference to the component instead of a template variable string, to get all the JSON editors references:

@ViewChildren(JsonEditorComponent) jsonEditorContainers: QueryList<ElementRef>;

// ...

jsonEditorContainers.find(...);

It returns a QueryList that allows you to iterate through all ElementRef, and monitor the changes with an Observable changes.

edited Feb 3, 2020 at 16:39

answered Feb 3, 2020 at 15:24

255kb - Mockoon

6,9922 gold badges25 silver badges32 bronze badges

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

4 Comments

osmanraifgunes Over a year ago

But @viewchildren is in the component that is not written by me. It is from open source component.

255kb - Mockoon Over a year ago

Ok I missed that, I modified my answer. I think you should query with (JsonEditorComponent) instead of a template variable string ('jsonEditorContainer') like they demonstrate in the repository readme's example.

osmanraifgunes Over a year ago

I can get instances of editors. But still event is not sending parameters (or eventParams) dynamicly. How can I know which data is edited?

255kb - Mockoon Over a year ago

Then I don't know how to solve your problem. I have the same questions than PierreDuc, where does eventParams come from? If it does not exist on the library's component you cannot bind to it.

Poul Kruijt · Accepted Answer · 2020-02-03 17:27:15Z

1

What is eventParams? What is jsonChange? I could be wrong, but data doesn't seem to be two way bindable either, according to the source code.

It seems like you might be looking for something like this:

<div *ngFor="let act of editedActions" class="w-100-p p-24">
  <json-editor [options]="editorOptions" 
               [data]="act.action_json"
               (change)="changeStepActions($event, act.test_step_id)">
  </json-editor>
</div>

You can then read the test_step_id in your changeStepActions method. If this works, I don't know how you made it compile in the first place.. are you using a CUSTOM_ELEMENTS_SCHEMA?

answered Feb 3, 2020 at 17:27

Poul Kruijt

72.3k12 gold badges152 silver badges152 bronze badges

1 Comment

osmanraifgunes Over a year ago

jsonchange is an event added by me. You can see in this pull reuest : github.com/mariohmol/ang-jsoneditor/pull/58 . eventparams is just an @input to controller. I tried return it at jsonchage event but it also did not work.

Shashank S Chandel · Accepted Answer · 2020-10-21 11:27:46Z

1

Its not necessary to use @ViewChildren for that you have to rewrite the entire code of component, make sure while using @ViewChild you pass correct editor reference.

As following

@ViewChild('carEditor' ) carEditor: JsonEditorComponent;
@ViewChild('mobileEditor') mobileEditor: JsonEditorComponent;

Stackblitz example for refernce :

Click here for code example

answered Oct 21, 2020 at 11:27

Shashank S Chandel

3174 silver badges21 bronze badges

Comments

Daniel Rosa · Accepted Answer · 2021-12-15 16:33:56Z

1

To use multiple jsoneditors in your view you cannot use the same editor options.

You should have something like:

<div *ngFor="let prd of data.products" class="w-100-p p-24" >
  <json-editor [options]="makeOptions()" [data]="prd" (change)="showJson($event)"></json-editor>
</div>
makeOptions = () => {
  return new JsonEditorOptions();
}

answered Dec 15, 2021 at 16:33

Daniel Rosa

712 bronze badges

Collectives™ on Stack Overflow

Angular component multiple instance binding input problem

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related