angularprimengangular-ngmodelp-dropdown

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

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?

Solution

  • 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.