How to include navigation to search result

I’ve asked this question a few times… but I still haven’t found a solution to this problem yet.
So let me be more specific.

I built an Angular 4 search bar with list items in my Ionic.
Here’s an example of Angular 4 search filter:

This searches through items in data provider very well.
However, I realized I can’t include navigation function to each item.

In my app, each item has its own html page. I want users to be able to search through this angular 4 search filter and then navigate to item’s page by clicking on item’s div.

I tried to include “navigate”: “navigateToPage01()” as data’s attribute and put it inside item’s div tag using {{ item.navigate }} … and it didn’t work.

Is there any way around this? How can I make my search result items navigate to their pages?


If each item has its own distinct page, you could utilize lazy loading and then just have the page name stored in the search result item.

1 Like

Thanks for your reply.

Yes, I’m using lazy loading for all of my item pages.
How can I do store page name to search result?
Would you be able to show me an example of that?
It would be greatly appreciated… I’ve been struggling with this issue for a week now.

Create a function itemIDToPageName(itemID: whateverYourTypeIs): string {} and then have the click handler from your template pass the item ID. Then you use the function to generate the string, and navCrl.push the string.

1 Like

Awesome, let me try this now. Thanks again…

Well, it gave me an error:

Runtime Error: Uncaught (in promise): invalid link: id

I added this function to my ion-item

here’s my typescript:

  itemIDToPageName(id: string): any {

and I added page name to each item’s data provider ts.

"id": "Item01Page", 

"id": "Item02Page", etc..

Any idea? ‘Item01Page’, ‘Item02Page’ are actual names of item pages on my app.

I think it’s passing id’s value to function properly because it’s showing me id is a link.
But it looks like they can’t use id as a page name for navigation?


This line is attempting to load and display the page called ‘id’, which probably doesn’t exist.

Instead you’d want to pass in the actual name of the item page.

itemIDToPageName(id: string)
Is id the name of the page, or the item id?
If the former, just do

Otherwise, figure out the page name
(id + ‘Page’ ???)
then push that.

1 Like

Thanks for your reply.

Let me clarify. So this is my demo data provider ts which has all items attributes.

private homes: any[] = [
            "name": "New York City", 
            "zip": "01112",
            "rental": "yes",
            "id": "Item01Page"

            "name": "San Francisco", 
            "zip": "31112",
            "rental": "yes",
            "id": "Item02Page"

So I put page’s name instead of item’s id number but I couldn’t navigate to that page.
Angular search filter is still working fine but it doesn’t seem to allow navigation…

Any opinion would be appreciated.


So I assume somewhere you have something like this in your template:

  <ion-item *ngFor="let item of searchResults">
    <h2>{{}} - {{item.state}}</h2>

With your current data format you’d do:
<ion-item *ngFor="let item of searchResults" (click)="itemIDToPageName(">

And do the following in your controller:

  itemIDToPageName(id: string): any {
1 Like

Thanks a lot!!

I was close to that but I didn’t include inside function.

You made my day!
Greatly appreciated all helps so far.