How to set a value for multi select drop down in PrimeNg and force a filter for that value automatically?

Question

I have a multi select drop down with pre defined values. I want one of those values to be selected by default. All the data should be sorted with this pre-selected filter value by default. Later, when a user adds or removes the filters, the data should get updated accordingly. The second part is taken care of by PrimeNg automatically.

Answer 1

I am providing a solution for the first one.

I have a working solution. Adding this question so that it will help others.

Here is my multi select. It's inside th tags of a table since I am displaying the multi select on a table column. The table by itself is inside a p-dialog. Firstly, in your compnent.ts file, decalre your variable that's going to hold your multi select values.

 resultsFilter: SelectItem[];

Then import SelectItem by -->

import { SelectItem } from 'primeng/components/common/api';

Then in your ngOnInit, add your multi select values -->

 this.resultsFilter = [
            { label: 'Critical', value: 'Critical' },
            { label: 'Pass', value: 'Pass' },
            { label: 'Warning', value: 'Warning' }
        ];

Then in your HTML -->

<p-dialog
                [visible]="someCondition"
                header="Filter Test"
                appendTo="body"
                (onHide)="hideDialog()"
                [modal]="true"
                [draggable]="true"
                [closable]="true"
                [autoAlign]="true"
                [contentStyle]="{ 'max-width': '85vw', 'max-height': '75vh' }"
                [focusOnShow]="false"
                (onShow)=" tableData.filter('Critical', 'result', 'in')"
            >

The (onShow) method is important here. It's going to trigger the filter when the component loads. 'result' is the name of the column that I want to filter. Here is the tag of table which holds the multi select options.

<p-table
                        #tableData
                        [value]="tableData"
                        [scrollable]="true"
                        [scrollHeight]="'40vh'"
                        overflow="auto"
                        selectionMode="single"
                        [loadingIcon]="'fa-spinner'"
                        [loading]="loadingResults"
                        [paginator]="false"
                    >

<p-multiSelect
                                        [options]="resultsFilter"
                                        defaultLabel="Critical"
                                        [(ngModel)]="selectedFilter"
                                        (onChange)="
                                            tableData.filter($event.value, 'result', 'in')
                                        "
                                        [style]="{
                                            width: '95%',
                                            height: '25px',
                                            'margin-top': '0.75rem'
                                        }"
                                        class="ui-column-filter"
                                        appendTo="body"
                                        [filter]="true"
                                        maxSelectedLabels="0"
                                        selectedItemsLabel="{0} selected"
                                    ></p-multiSelect>

The (onChange) method is what will automatically filter the results based on the value you select in the drop down filter. The name here should match with the ID you have assigned to your table. In this case it is #tableData

In my component.ts file, this is what I have -->

if (this.selectedFilter === undefined) {
            this.selectedFilter = ['Critical'];
        }

In my hideDialog() function, this is what I have added. The reason for this is that whenever I close a dialog and open it, it will always pre-select the filter value as 'Critical'.

 this.selectedFilter = ['Critical'];

Expected result is that the filter should pre-selected to the value that's set in the component.ts file and the data displayed on HTMl should be auto filtered based on pre-selected value. With the above solution it works perfectly.