How to fix - search input field in the header - for all pages in angular 5 using typescript - Stack Overflow

How to fix 'search input field in the header' for all pages in angular 5 using typescript

I have an input search field in the header (sticky header or position fixed in the css world) that allows gets a list of records and when you click on one of them it goes to an overview page. At the moment when you type a search term on keyup it gets the result from the api. It has debounceTime being used to reduce the requests made to the api. The search results is a list of records but the problem I have is that the search doesn't work on the overview page. What do I need to do to get the search working on the overview page?

Here is the search input field:

Here is the search function that gets processed after the time span has passed in the header component:

Here is the code that gets the search result list in the header component:

Get the detailed information about the data in the header component:

Anchor tag with the list items in the header component:

Here is the code on the overview component:

1 Answer 1

There is quite a bit of code here . but starting at the top:

If this is the Template:

And this is the associated component:

Then you don't need to use this.searchTextRef.nativeElement.value with all of its potential issues. You are using two-way binding in your element with [(ngModel)] so you can just access the bound property: searchFilterText .

But a better solution (one that allows using debounceTime ) is to use reactive forms:

Template:

Notice the binding to formControl , which is a reactive forms directive.

Component:

Since it uses reactive forms, it has a built-in valueChanges observable that you can watch for changes.

It appears that getMyData is also local to this header component. So only the header has access to the filtered data. So your header component also displays the list. Then links to the detail page.

It appears that the detail (overview) page then gets the data again, but this time just for a single item.

But now you want to use that same search feature in the detail (overview) page? What are you searching in this case?

If, as your question title states, you want your search to appear on all pages, you have a few choices:

1) You can build the search UI as a separate component that you can put on any page using tags such as . Since the searchForm element would then be on each page, you can communicate with it via @ViewChild

2) You can build the pages with the search UI at the top and the underneath like this:

The you can use a service that provides the searchTerm to any component that wants it.

It has a search component at the top and two "tabs" under that provide access to the two pages. It uses a service to share the search term between the pages.