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.