Filtering ngx-datatable based on criteria from a checkbox list

Question

I need to filter a ngx-datatable based on criteria from a checkbox. At the moment I get it, but I do not get the required result.

Here are some screenshots of what my listing looks like.

Default:

When pressing one of the checkboxes, it filters me correctly

However, when I press another option added, it only shows me the result of the last option selected

The HTML:

                    <div *ngFor="let ubica of ubicaciones">
                        <input type="checkbox" name="ofer_ubicacion" [value]="ubica.id_ubica_prov" (change)="updateFilterUbicacion($event)"> {{ubica.ubiprov_nombre}}
                    </div>

                    <ngx-datatable #mydatatable class="bootstrap expandable" [loadingIndicator]="isLoading" headerHeight="50" [limit]="25" [columnMode]="'force'" footerHeight="50" rowHeight="auto" [rows]="rows" [messages]="my_messages">
                        <ngx-datatable-column name="id_oferta" [maxWidth]="130">
                            <ng-template ngx-datatable-header-template>
                                <span>ID </span>
                            </ng-template>
                            <ng-template class="mat-column-id" ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
                                <div class="text-center">{{ row.id_oferta }}</div>
                            </ng-template>
                        </ngx-datatable-column>
                        <ngx-datatable-column name="ofer_nombre" [maxWidth]="1860">
                            <ng-template ngx-datatable-header-template><span>Ordenar por fecha</span></ng-template>
                            <ng-template ngx-datatable-cell-template let-rowIndex="rowIndex" let-value="value" let-row="row">
                                <div class="row">
                                    <div class="col-md-12">
                                        {{ row.ofer_nombre }}
                                    </div>
                                </div>
                            </ng-template>
                        </ngx-datatable-column>
                    </ngx-datatable>

The component:

export class HomeComponent implements OnInit {
my_messages = {
  emptyMessage: "",
  totalMessage: "",
  encapsulation: ViewEncapsulation.None,
};
rows = [];
temp = [];
@ViewChild(DatatableComponent, { static: false }) table: DatatableComponent;
ColumnMode = ColumnMode;
isLoading: boolean;
checck: boolean = false;
ubicaciones: any;
constructor(private ofertasService: ofertasService) {
  this.getListado();
}

ngOnInit(): void {
  this.getListadoUbicacionesProv();
} 
getListado() {
  this.ofertasService.getListaOfertas((data) => { //from service
    this.temp = [...data];
    this.rows = data;
  });
} 
getListadoUbicacionesProv()
{
  this.ofertasService.getUbicacionesProv()
  .subscribe((respuesta:any) =>{
    this.ubicaciones = respuesta;
  });
}
updateFilterUbicacion(event) {
    const val = event.target.value.toLowerCase();
    const temp = this.temp.filter(function (d) {
      return d.ofer_ubicacion.toLowerCase().indexOf(val) !== -1 || !val;
    });
    this.rows = temp;
    this.table.offset = 0;
}

}

I don't know how to modify the updateFilterLocation function so that it collects all filters at once. Some help?

Answer 1

You can use mat-selection-list. See examples here: https://material.angular.io/components/list/examples

E.g.

<mat-selection-list #shoes>
  <mat-list-option *ngFor="let shoe of typesOfShoes">
    {{shoe}}
  </mat-list-option>
</mat-selection-list>

<p>
  Options selected: {{shoes.selectedOptions.selected.length}}
</p>

MatSelectionList has an output with all checkboxes:

@Output() selectionChange: EventEmitter<MatSelectionListChange>

See: API https://material.angular.io/components/list/api