How to include navigation to search result


#1

Hello,
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:

https://embed.plnkr.co/l1oTNT/

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?

Thanks,


#2

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.


#3

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.


#4

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.


#5

Awesome, let me try this now. Thanks again…


#6

Well, it gave me an error:

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

I added this function to my ion-item
(click)="itemIDToPageName()"

here’s my typescript:

  itemIDToPageName(id: string): any {
   this.navCtrl.push('id')
  }

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?
Thanks,


#7

this.navCtrl.push('id')

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
this.navCtrl.push(id);

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


#8

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", 
            "state":"NY", 
            "zip": "01112",
            "rental": "yes",
            "id": "Item01Page"
          },

            {
            "name": "San Francisco", 
            "state":"CA", 
            "zip": "31112",
            "rental": "yes",
            "id": "Item02Page"
            },
etc....

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.

Thanks,


#9

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

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

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

And do the following in your controller:

  itemIDToPageName(id: string): any {
   this.navCtrl.push(id);
  }

#10

Amazing…!
Thanks a lot!!

I was close to that but I didn’t include item.id inside function.
(click)="itemIDToPageName(item.id)

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