Ionic 4: looking for example of `<ion-nav>` together with angular routing

Nav is a standalone component for loading arbitrary components and pushing to new components on to the stack. Unlike RouterOutlet, Nav is not tied to a particular router. Meaning that if we load a Nav component, and push other components to the stack, they will not affect the apps overall router.

How do you use this component together with angular routing? For example, how would you add html markup to push a page/module from ion-menu. I can’t find any examples with markup

1 Like

I’m looking for this to. My use case is use the normal angular routing between my standard pages/components and use ion-nav to implement an in page wizard where I want to keep the state all in one component.

Did you manage to get it working?


Thanks Jeff,

This only shows how to use without angular, where as I want an example that uses normal angular routing AND nav style routing in the same app.

1 Like

Can you try something like

<ion-item routerLink="/auth/sign-up" routerDirection="forward">
 <ion-label>Sign Up</ion-label>

Hello @linus1412, did you find a way? Im trying to do the same

Hi @jvanloofsvelt,

Sadly not, I changed the design of my layout instead, but I will revisit this one day.

I figured it out:
Create a component that will serve as root for your stack-based nav, with a template like this:

<ion-nav  [root]="root" </ion-nav>

Here “root” is a property of my root component that is set to a component type:

  selector: 'app-sale',
  templateUrl: './sale.component.html',
  styleUrls: ['./sale.component.scss']
export class SaleComponent {
  root = EditSaleComponent;

  constructor() {

Then in the EditSalesComponent I can do something like this:

<ion-nav-push [component]="welcomeComponent">
  <ion-fab-button (click)="addProducts()">
    <ion-icon name="add"></ion-icon>

When the button is clicked the “welcomeComponent” is pushed onto the stack.

The only thing thats missing now is the slide-in animation, at least for me. It just fades in

1 Like

Thanks @jvanloofsvelt !

I look forward to giving this a try.

I use Angular routing for navigate between component
I Have Question
i dont understand . ion-nav faster than angular routing ? i use ionic 4