How to filter a p-orderList with a p-dropdown in Angular

Question

I'm new to angular, and I've been struggling to get different pieces to work together. I have an p-orderList from PrimeNG that displays a list of JSON objects and a p-dropDown that reads a property from the listedObjects and shows all possible options. I need to filter the orderList so that it shows all possible options when nothing is selected, or filter it to only show the kind selected.

I have the dropdown populated and firing on change. I also can filter with typscripts built in functions. What I can't figure out how to do is attach it back to the orderList. Any help is greatly appreciated.

HTML

<p-dropdown [options]="getExistingTypes()" [(ngModel)]="selectedType" [style]="{'width':'83%'}" (onChange)="onCategoryChange(selectedType)"></p-dropdown>
<div style="display: flex; justify-content: center; flex-direction: row; text-align: center;">
</div>
<p-orderList [value]="devices" [metaKeySelection]="false" [listStyle]="{'height':'400px'}" header="Devices" controlsPosition="right" dragdrop="false" [(selection)]="selected" [responsive]="true">
    <ng-template let-device pTemplate="item">
        <div style="font-size: x-large">
            {{device['object_name'] | noquotes}}
        </div>
        <div>
            <label>mac: </label>{{device.deviceData.MAC}}
        </div>
        <div>
            <label>id: </label>{{device['object_identifier']}}
        </div>
        <div>
            <label>type: </label>{{device['object_type']}}
        </div>
    </ng-template>
</p-orderList> 

TS

onCategoryChange(selectedType){
    var results = this.devices.filter(element => {return element.object_type === selectedType});
    console.log(results);
}

Answer 1

You need to point your p-orderList to the filtered results, so you'll have to make results a public variable on your component:

public filteredDevices: any; //make this an Array<x> of whatever your devices are, sames as this.devices
...

onCategoryChange(selectedType){
    filteredDevices = this.devices.filter(element => {return element.object_type === selectedType});
    console.log(results);
}

HTML is mostly the same, just used filteredDevices instead of devices.

<p-orderList [value]="filteredDevices" [metaKeySelection]="false" [listStyle]="{'height':'400px'}" header="Devices" controlsPosition="right" dragdrop="false" [(selection)]="selected" [responsive]="true">
    <ng-template let-device pTemplate="item">
        <div style="font-size: x-large">
            {{device['object_name'] | noquotes}}
        </div>
        <div>
            <label>mac: </label>{{device.deviceData.MAC}}
        </div>
        <div>
            <label>id: </label>{{device['object_identifier']}}
        </div>
        <div>
            <label>type: </label>{{device['object_type']}}
        </div>
    </ng-template>
</p-orderList> 

You may have to change more that that [value]="filteredDevices", I'm not positive that's where the list of devices for the <p-orderList> is assigned, but use filteredDevices instead where you assign the devices for the <p-orderList>