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, Jan 17 '23 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, Jan 17 '23 at 12:55

score 0 · Accepted Answer · answered Jan 17 '23 at 13:06

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.

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

1 Answers1