Add input clear button to PrimeNG p-dropdown

2.3k Views Asked by At

I am using PrimeNG and I can't add some button to clear input. Here is my html:

<p-dropdown (keyup)='search($event)'  
                        id = "dropdown"
                        (onChange)="changeSubject($event.value)" 
                        [options]="subjects" 
                        [(ngModel)]="selectedSubject" 
                        filterBy = 'subjects'
                        [filter] = 'true'
                        [autoDisplayFirst] = 'defaultFilter'
                        #dropdown
                        placeholder="{{selectedWord}}"
                        [style]="{'width':'100%', 'height': '30px'}">
            </p-dropdown>
1

There are 1 best solutions below

0
On

You can add showClear propriety and set it to true :

<p-dropdown (keyup)='search($event)'  
                    id = "dropdown"
                    (onChange)="changeSubject($event.value)" 
                    [options]="subjects" 
                    [(ngModel)]="selectedSubject" 
                    filterBy = 'subjects'
                    [filter] = 'true'
                    [autoDisplayFirst] = 'defaultFilter'
                    #dropdown
                    placeholder="{{selectedWord}}"
                    [style]="{'width':'100%', 'height': '30px'}"
                    showClear="true">
        </p-dropdown>