Angular - Value binding issue while using ng-template and ngTemplateOutlet

Question

I created a live example on Stackblitz with dropdown from primeng.
My issue is that whenever I change the value from the dropdown without ng-template it works fine and all dropdowns are modified, but if I change the value from a dropdown which is inside of ng-template, the value won't be globally updated, being updated only in that dropdown.

Does anyone know the reason for this? Or how to fix this?

Using $implicit in the context object will set its value as default, in your case selectedCity1, but will not bind it to data. — riorudo
– riorudo, Commented Jan 17, 2023 at 11:18
@riorudo Thanks for the answer. I found out that ng-template has almost the same behaviour as a component, therefore, I also need to emit the updated value — manjiro sano
– manjiro sano, Commented Jan 17, 2023 at 12:55

manjiro sano · Accepted Answer · 2023-01-17 13:06:28Z

0

If anyone finds this question, the answer is that the value should be emitted after updated by adding (ngModelChange) or (onChange):

  <p-dropdown
    [options]="data.options"
    [(ngModel)]="data.value"
    optionLabel="name"
    (ngModelChange)="onChange($event)"
  >
  </p-dropdown>

or

  <p-dropdown
    [options]="data.options"
    [(ngModel)]="data.value"
    optionLabel="name"
    (onChange)="onChange($event)"
  >
  </p-dropdown>

Or create a component and using Output/Input for communication between parent and child component.

answered Jan 17, 2023 at 13:06

manjiro sano

8428 silver badges20 bronze badges

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

Collectives™ on Stack Overflow

Angular - Value binding issue while using ng-template and ngTemplateOutlet

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