Share3

Tweet

How to use Angular 4, Angular 5 and Angular 6 PrimeNg dropdown

This tutorial will tell you how to use primeng dropdown module to make life easy for managing dropdown.

To start with this you have to install prime ng module

Installing npm for primeng

npm i primeng --save

Import DropdownModule into parent module

import { DropdownModule } from 'primeng/primeng';
@NgModule({
  imports: [    
    DropdownModule
  ]
});

component.ts file:

listVariable:any;
selectedOption:any = 'Default Option';

/**
* Function to get List of variables
*/
getListVariable() {
    this.repoCommon.getVariableList().subscribe(response => {
        this.listVariable = response;
    });
}

onChangeValue() {
    /* Do some operation on selected value */
}

component.html file:
Add Below line where we want to show dropdown

Please find below explanation of attributes used in p-dropdown

[options]: Assign list of array with id and name key:pair combination
this.listVariable = [
            {name: 'var1', code: '1'},
            {name: 'var2', code: '2'}
        ];

placeholder: Add Placeholder

[(ngModel)]: Assign variable with default value and you will get changed value in this variable

(onChange): Call change Function to do some operations