[Fixed] Trigger <input (input)="" /> from component

Issue

I have a table with a search input field. The input field has a function that filters the table view. it is linked with #dt1. I use PrimeNG table

 <input pInputText type="text" [(ngModel)]="search" (input)="dt1.filterGlobal($event.target.value, 'contains')" (ngModelChange)="onChange($event)" placeholder="Search keyword" />

What I want is that a user can filter the table with a search keyword. Then when the user select a item from the search results it goes to a detailed view of that item. When the user then goes back to the table view I want the search filter be still applied. So what I did is added a ngmodel = search and save the keyword in there. In my compenent I save the keyword to localStorage. So when the page loads it checks localStorage if there is a search key word available. Then the component fills the search input with the keyword but the globalFilter function is not called so the table stays unfiltered. Is there anyway I can force the (input) triger from my component or with a function so the table will be filtered where the user left off?

@j4rey

ngOnInit(): void {
  if (localStorage.getItem('search') != null){
    this.search = localStorage.getItem('search');
}

}

Solution

I found the solution,
What I did was linking a viewchild to my table

@ViewChild("dt1") table: any;

and then in my ngOnInit() I could access the filterGlobal function like so

  if (localStorage.getItem('search') != null){
    this.search = localStorage.getItem('search');
      this.table.filterGlobal(this.search, 'contains');
  }

Leave a Reply

(*) Required, Your email will not be published