Angular ngBootstrap: Filter values in table using dropdown list

Question

Need help in filtering table values based on the filter selected

This is the ngbDropdown that i would like to use as my filter.

If i select company A, the table will only show company A.

Not too sure how to link it. I got the filter showing all the companies available but unable to apply the filter on the table yet.

Update HTML code for table

<select [(ngModel)]="company">
    <option [ngValue]="undefined">Please Select</option>
    <!-- List of all the companies -->
    <option *ngFor="let department of departments">{{department.company.companyName}}</option>
  </select>
  <div *ngFor="let department of departments | companyFilter: company">
    {{department.departmentName}} {{department.company.companyName}}
  </div>

department.component.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
import { SessionService } from '../session.service';
import { DepartmentService } from '../department.service';
import { Department } from '../department';
import { Pipe, PipeTransform } from '@angular/core';
import { CompanyFilterPipe } from './company-filter.pipe';


@Component({
  selector: 'app-department',
  templateUrl: './department.component.html',
  styleUrls: ['./department.component.css']
})


export class DepartmentComponent implements OnInit {


  departments: Department[];

    constructor(private router: Router,
        private activatedRoute: ActivatedRoute,
        public sessionService: SessionService,
        private departmentService: DepartmentService) { 

    }

  ngOnInit() {

    this.departmentService.getDepartments().subscribe(
            response => {
        this.departments = response.departments;
        console.log(response.departments);
        console.log(response);
            },
            error => {
                alert("You have encountered an error : " + error);
            }
        );

  }

}

What console.log prints out for response.departments

Object
departments: Array(4)
0:
company: {companyAddress: "Brisbane 21", companyCode: "199305085M", companyId: 1, companyName: "Company A", companyNumber: 9999999, …}
departmentId: 1
departmentName: "Brand Management"

I have updated appmodule.ts but it seems that it is unable to find companyFilter

Answer 1

add a pipe to your module

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
  name: 'companyFilter'
})
export class CompanyFilterPipe implements PipeTransform {
  transform(departments, company) {
    return company ? departments.filter(department => department.company === company) : departments;
  }
}

and then in your template

<tr *ngFor="let department of departments | companyFilter: company">

If the company property is falsey it will return all departments, once company has a value it will filter the departments by company.

See StackBlitz for an example https://stackblitz.com/edit/angular-3x9lfm