How to use PrimeNG's Dropdown correctly

Question

I've followed this and this question but their problem is slightly different from mine. In fact the first question doesn't even have proper answer. In spite of following everything correctly from the primeng documentation I am getting this error:

And here is my code.

app.module.ts

//... 
import {DropdownModule} from 'primeng/dropdown';

@NgModule({
  declarations: [
    AppComponent,
    ...
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    ...,
    DropdownModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

I've also installed @angular/cdk using command: npm install @angular/cdk --save

package.json

"dependencies": {
    ...
    "@angular/cdk": "^8.2.3",
    ...
    "primeicons": "^2.0.0",
    "primeng": "^8.1.1",
    ...
  },

And my app.component.html is:

  <p-dropdown [options]="cities1" [(ngModel)]="selectedCity1"></p-dropdown>

and my app.component.ts is:

import { Component, OnInit } from '@angular/core';
import {SelectItem} from 'primeng/api';

interface City {
  name: string;
  code: string;
}

@Component({
  ...
})    
export class ContainerComponent implements OnInit {

  cities1: SelectItem[];
  selectedCity1: City;

  constructor() {
    this.cities1 = [
      {label:'Select City', value:null},
      {label:'New York', value:{id:1, name: 'New York', code: 'NY'}},
      {label:'Rome', value:{id:2, name: 'Rome', code: 'RM'}},
      ...
  ];
  }

  ngOnInit() {
  }
}

Please correct me.

PS: I found a stackblitz also. But unable to learn much from it.

The Fabio The Fabio · Accepted Answer · 2019-11-10T12:05:17

I created a minimal stackbitz with a primeNg dropdown so you can see it in isolation.

You need to add css to the angular.json file and a some dependencies to the package.json file as per PrimeNg Get started section.

That should set you in the right direction

How to use PrimeNG's Dropdown correctly

1 Answers