How to filter using TS/Angular

You are modifying your API response on front-end. It will diffcult for to manage on different platforms. I prefered creating two WebAPI services. One for getting data where submitted is flag is true. Second service where flag is false.

Reason: In future if you planning to develop mobile app, then you have to hard code you logic in mobile app too.

Service data should be straight.

It's not clear how entirely you are referencing and rendering the results of the getSubmitted() by the comment provided of <li *ngFor="let p of PO"> there may be issues with clashing of variables given your data model object is called PO and the results are looping through a variable also called PO. Or assignment to a local variable of type PO[] is simply isn't happening. Try the following to filter and render PO objects with submitted property of boolean true:

getSubmitted() {
  return this.http
    .get<PO[]>(this.poUrl)
    .pipe(
      // tap(response => console.log(response)), to check/log structure before map()
      // assumes along lines of [{id:1, name:'foo', submitted:false}, {id:2, name:'bar', submitted:true}]
      map(data => data.filter(d => d.submitted)), 
      catchError(this.handleError)
    );
}

Here are a couple approaches of how you can use to consume the data being returned from a successful http.get().

submitted$: Observable<PO[]>;

ngOnInit() {
  this.submitted$ = this.getSubmitted();
}

// <li *ngFor="let p of submitted$ | async">

Or:

submitted: PO[] = [];

ngOnInit() {
  this.getSubmitted()
    .subscribe(submitted => this.submitted = submitted);
}

// <li *ngFor="let p of submitted">

Here is a Stackblitz showing filtering functionality in action based on submitted object property of PO. It provides an example with and without an Async Pipe.

Hopefully that helps!

data;
filteredData;

getPO() {
   return this.http.get<PO[]>(this.poUrl).subscribe(
      data => {
        this.data = data;
        this.filteredData = data;
      }
   );
}

getSubmitted() {
   this.filteredData = this.data.filter( el => el.submitted === true);
}

Then in your html, in your ngFor, if you have to iterate filteredData,

 *ngFor="let row of filteredData" 

this way you don't download 2 times

Warning *** filter must be on the private array, not de data returned form the http call.