Angular issue with Search Bar

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 it gives me the page number contains this tag.

but I want it to show the card which contains the file.

myComponent.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();
}
}
}


myComponent.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

Continue reading...