0

I’d like to know how to navigate in the same popover with Ionic 4 (beta 15). The example is filtering options. I click on a funnel and have a list of items displayed in a popover : the filtering categories(year, color etc…) Each category has a sublist associated.

I’d like to be able to click on a filtering category, and navigate forward to a new view containing the associated options, but staying inside the popover. When using NavController.navigateForward, the whole current view is impacted, not the popover. What would you do ?

PS: it is what is currently done in Plex Media server for filtering movie Filtering workflow

Thanks.

Pierre-Yves Rouillé
  • 75
  • 10
  • You could do this using ngSwitch or ngIf logic. If you really want to to it with navigation you will need to create an angular router module and have an outlet inside your popover. – Shannon Nov 29 '18 at 14:14
  • @Shannon Ok, I didn't want to use ngIf because I want to have the native navigation animation, but I will definitely look into creating a new routerModule, are you sure it's compatible with ionic logic ? Thanks – Pierre-Yves Rouillé Nov 30 '18 at 12:23
  • Sorry for the late reply. Yes ionic 4 with angular uses angular routing. Angular documentation for the router is very good. Here is a good place to start https://angular.io/guide/router. You can apply animations to ngIf statements. Here is an example of this https://stackoverflow.com/questions/36417931/angular-2-ngif-and-css-transition-animation – Shannon Dec 03 '18 at 02:51
  • @Shannon Thanks, I'm trying to use the router but I'm having troubles doing it with the lazy loading (loadChildren propertie in route paths, default with ionic CLI). It seems like the route declared with RouteModule.forChild are not taken in account. Still working on it but thanks again for the hints. – Pierre-Yves Rouillé Dec 03 '18 at 18:03
  • @Shannon : by the way it seems the proper way to do this with ionic would be to use the ion-nav compnent https://beta.ionicframework.com/docs/api/nav but I can't find a working example with ionic 4, besides the doc page seems outdate sinces methods pop/push have disappeared from the interface, but are still documented... – Pierre-Yves Rouillé Dec 03 '18 at 18:07
  • Yes ion-nav still works (from v3 and below), however you should look here https://beta.ionicframework.com/docs/api/router and here https://beta.ionicframework.com/docs/api/router-outlet from the angular routing solution. It is more flexible and lets you do as you wish in your above post. Meaning your popover can have its own router-outlet with its own animations and routing module etc. Here is a good video to get you started https://angularfirebase.com/lessons/ionic-4-routing-and-navigation-guide/ – Shannon Dec 03 '18 at 22:28
  • Another thought i am unsure a name router outlet can live in a popover, however you can use your solution to popover (perhaps a custom component) with a named router outlet, or you can also use ngIf with animations (which might be the easier solution having limited router experience). – Shannon Dec 03 '18 at 22:42
  • 1
    @Shannon thanks for this, I'm going to keep trying with the router for now, it helps me get all the mechanism. I think i'm going to open an other question, I'm stuck with "cannot match any routes. URL Segment: 'home'. When trying to access /home/(popover:filter), defined in the home module (with RouterModule.forchild). Anymway thanks a lot for the tracks. I'm going to post the answer here when I found the propoer solution. – Pierre-Yves Rouillé Dec 04 '18 at 11:01

0 Answers0