Display specific data in a table - html

Question

I have an angular project where I have a table I am populating from an api.
In the table there is a column status with three values: 1- Open, 2- Released, 3- Rejected.
displayed with,
<td>{{working_period.status}}</td>
Here's pic of the table
Image
What I want is a pipe to display only one status. E.g Only 1- open
How can I go about creating such a pipe, and is it the best solution?
I am newbie in ng7. In case of clarification let me know...please forgive my grammar.
Edit
my dashboard.component.html
<table class="table">
<thead><th>Mitarbeiter</th><th>Einsatz</th><th>Eingangsdatum</th><th>Zeitraum</th><th>Status</th></thead>
<tr *ngFor="let working_period of customers"> ...... <td>{{working_period.status}}</td></tr>
</table>
My dashboard.component.ts
import {Component, AfterViewInit, OnInit, OnDestroy, ViewChild} from '#angular/core';
import { NgbProgressbarConfig } from '#ng-bootstrap/ng-bootstrap';
import {pipe, of, Subscription} from 'rxjs';
import { first } from 'rxjs/operators';
import { ActivityReportsService } from '../../services/activity-reports.service';
import { CustomerLoginService } from '../../services/customer-login.service';
import {Customer, CustomerResponce} from '../../_models/customer';
#Component({
templateUrl: './dashboard1.component.html',
styleUrls: ['./dashboard1.component.css']
})
export class Dashboard1Component implements OnInit, OnDestroy {
currentUser: Customer;
currentUserSubscription: Subscription;
customers: Customer[] = [];
constructor(
private customerloginservice: CustomerLoginService,
private activityreportservice: ActivityReportsService
) {
this.currentUserSubscription = this.customerloginservice.currentUser.subscribe(customer => {
this.currentUser = customer;
});
}
ngOnInit() {
this.loadAllReports();
}
ngOnDestroy() {
this.currentUserSubscription.unsubscribe();
}
private loadAllReports() {
this.activityreportservice.getAll().subscribe((customers: CustomerResponce) => {
console.log(customers);
this.customers = customers.working_periods;
});
}
}

Answer 1

Try this (SearchPipe.pipe.ts)
import { Pipe, PipeTransform } from '#angular/core';
#Pipe({
name: 'searchFilter'
})
// Pipe to implement a search filter basd on input
export class SearchPipe implements PipeTransform {
transform(items: any[], searchTerm: string): any[] {
if (!items) { return []; }
return items.filter((val) => {
return val.status === searchTerm;
});
}
}
in HTML:
<table class="table">
<thead>
<th>Mitarbeiter</th>
<th>Einsatz</th>
<th>Eingangsdatum</th>
<th>Zeitraum</th>
<th>Status</th>
</thead>
<tr *ngFor="let working_period of customers | searchFilter:'open'"> ......
<td>{{working_period.status}}</td>
</tr>
</table>

Answer 2

Please create 1 function like FilterStatusData(filterstatus) which called after api get response.
In FilterStatusData modify data using loop.

Answer 3

You can fix it without using a pipe (Dashboard1Component)
this.customers = customers.working_periods.filter(res=>res.status==='open');