I have come across a situation where my HTML table is populated with various account numbers.
https://i.sstatic.net/qJc2E.png
When I input the account number 979545130406, the filter works perfectly fine.
https://i.sstatic.net/Y4Rwk.png
However, the issue arises when I clear the value of the input (979545130406)
https://i.sstatic.net/HK3ol.png
Nothing happens at all. Is there a way to display all the records in this scenario?
I am sharing my code with you and would greatly appreciate your assistance.
template
<form #formulaire="ngForm" (ngSubmit)="onSubmit()">
<div class=" row mb-4 align-items-end ">
<div class="col-12 col-sm-6 col-md-4 ">
<div class="mb-2 ">
<!-- Portefeuille -->
<h5>Portefeuille</h5>
<input type="input" class="form-control form-max-width" name="account" [(ngModel)]="account" placeholder="Enter account number" (input)="onInputChange()">
</div>
</div>
</div>
</form>
composent
export class OverviewTransfersComponent implements OnInit, OnDestroy {
private unsubscribe$ = new Subject<void>();
currentAgency: any;
transferResponse: TransferResponse;
account: string;
constructor(
private service: OverviewTransfersService,
private store: Store,
private modalService: BsModalService,
private router: Router
) {
this.account = '';
}
ngOnInit(): void {
this.currentAgency = this.store.selectSnapshot(AgencyState.currentAgency);
if (this.currentAgency) {
this.OverviewTransfers(this.account);
}
}
ngOnDestroy(): void {
this.unsubscribe$.next();
this.unsubscribe$.complete();
}
OverviewTransfers(account: string): void {
this.service.OverviewTransfers(account).pipe(
takeUntil(this.unsubscribe$)
).subscribe(res => {
if (res.RETURNCODE === ApiResponseCodeEnum.Ok) {
this.transferResponse = res as TransferResponse;
console.log("data => ", this.transferResponse)
}
});
}
onSubmit(): void {
console.log("account:", this.account);
if (typeof this.account === 'string' && this.account.trim() !== '') {
this.OverviewTransfers(this.account.trim());
} else {
alert("The wallet number field is mandatory");
}
}
onInputChange(): void {
if (typeof this.account === 'string' && this.account.trim() !== '') {
this.OverviewTransfers(this.account.trim());
}
}
}
EDIT
Service
overviewTransfers(account: string): Observable<ApiResponse> {
return this.http.post<ApiResponse>(this.api + `/AGHRAF`, {
DEPO: account,
AGENCE: this.store.selectSnapshot(AgencyState.currentAgency).CODE
});