How to set select value for PrimeNG p-dropdown while updating data

Question

I have p-dropdown for showing countries. I bind the select options correctly there it works fine but I need to set default selected where selected is true while update the data

  <p-dropdown name="category" [options]="Category" [(ngModel)]="category >
  </p-dropdown>

0:{disabled: false, group: null, selected: false, text: 'Laptop', value: '2'}
1:{disabled: false, group: null, selected: true, text:

score 0 · Answer 1 · answered Jun 21 '23 at 14:16

First of all, you may use template driven forms instead reactive forms.

Following your showcase, you can do the following:

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  cities: any[];

  selectedCity: any;

  constructor() {
    this.cities = [
      { selected: false, name: 'New York', code: 'NY' },
      { selected: false, name: 'Rome', code: 'RM' },
      { selected: true, name: 'London', code: 'LDN' },
      { selected: false, name: 'Istanbul', code: 'IST' },
      { selected: false, name: 'Paris', code: 'PRS' },
    ];

    this.selectedCity = this.cities.filter(x => x.selected);
  }
  
  
  
}

<p-dropdown
  dataKey="selected"
  [options]="cities"
  [(ngModel)]="selectedCity"
  placeholder="Select a City"
  optionLabel="name"
></p-dropdown>

It will work but it is not the best way to it... as I mentioned before, use template driven form instead.

Documentation: Angular Forms

How to set select value for PrimeNG p-dropdown while updating data

1 Answers1