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

Ionic Framework
1

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.
ion-nav: Nav View Component for Ionic Framework Apps

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
2

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?

3

Maybe…

https://www.techiediaries.com/ionic-4-tutorial/

4

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
5

Can you try something like

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

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

7

Hi @jvanloofsvelt,

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

8

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:

@Component({
  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>
  </ion-fab-button>
</ion-nav-push>

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
9

Thanks @jvanloofsvelt !

I look forward to giving this a try.

10

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