Angular issue with Search Bar

Question

Hello i hope that you are good, i have a component which allows users to search files by tag and i use ngx-pagination for the pagination. when i am in the first page i can search all the files but when i move to other page always the search doesn't count the previous page only the search method works to next pages. but he gives me the page number contains this tag.

but i want him to show the card which contains the file. 2 photos below to make things more clear

my component.TS:

export class AfficherComponent implements OnInit {
  SearchTag: String;
  files = [];
  constructor(private uploadService: UploadFileService) {}
  ngOnInit() {
    this.reloadData();
  }
  reloadData() {
    this.uploadService.getFilesList().subscribe((data) => {
      this.files = data;
    });
  }

  Search() {
    if (this.SearchTag != "") {
      this.files = this.files.filter((res) => {
        return res.tag
          .toLocaleLowerCase()
          .match(this.SearchTag.toLocaleLowerCase());
      });
    } else if (this.SearchTag === "") {
      this.ngOnInit();
    }
  }
}

my component.HTML

<div id="pricing-table" class="clear" data-aos="fade-right">
  <div class="sel">
    <div class="row">
      <div class="col" style="left: -160px;">
        <input
          type="text"
          placeholder="Search..."
          [(ngModel)]="SearchTag"
          (input)="Search()"
          style="margin: 20px;"
        />
        <div id="toggle" style="left: 450px;"></div>
      </div>
    </div>
  </div>

  <div
    class="plan"
    *ngFor="let file of files | paginate: { itemsPerPage: 3, currentPage: p }"
  >
    <h3></h3>
    <button class="btn" style="background-color: #09c0a3;">Ouvrir</button>
    <ul>
      <li><b>Name: </b> {{ file.nom }}</li>
      <li><b>Type: </b> {{ file.type }}</li>
      <li><b>Departement: </b>{{ file.departement }}</li>
      <li><b>Tag: </b>{{ file.tag }}</li>
    </ul>
  </div>
  <pagination-controls
    (pageChange)="p = $event"
    style="float: right;"
  ></pagination-controls>
</div>

as you see this tag in the first first page

in the second page ,he shows me the page which contains this file but he doesn't show the file it self

Answer 1

The docs state that there is an event called pageBoundsCorrection:

pageBoundsCorrection [event handler] The expression specified will be invoked when the currentPage value is found to be out-of-bounds (e.g. the collection size was reduced). The $event argument will be the number of the closest valid page.

So you should handle that event in the same way as you handle (pageChange).

Some other recommendations:

• Use a separate array for your filtering. You are currently reloading the state when the search text is empty. This is doing more work than necessary
• Declare the p property on your component to make it clear that the HTML is using it
• Handle events with a handler function rather than adding logic to your HTML
• Use includes instead of match in your filter (unless you want to handle regex searches)

DEMO: https://stackblitz.com/edit/angular-hv5u5h