ion-nav

Contents

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. This fits use cases where you could have a modal, which needs it's own sub-navigation, but not make it tied to the apps URL.

Properties

animated

Description

If true, the nav should animate the transition of components.

Attribute animated
Type boolean

animation

Description

By default ion-nav animates transition between pages based in the mode (ios or material design). However, this property allows to create custom transition using AnimateBuilder functions.

Type ((Animation: Animation, baseEl: any, opts?: any) => Promise<Animation>) | undefined

root

Description

Root NavComponent to load

Attribute root
Type Function | HTMLElement | ViewController | null | string | undefined

rootParams

Description

Any parameters for the root component

Type undefined | { [key: string]: any; }

swipeGesture

Description

If the nav component should allow for swipe-to-go-back.

Attribute swipe-gesture
Type boolean | undefined

Events

Name Description
ionNavDidChange Event fired when the nav has changed components
ionNavWillChange Event fired when the nav will change components

Methods

canGoBack

Description

Returns true or false if the current view can go back

Signature canGoBack(view?: ViewController | undefined) => Promise<boolean>

getActive

Description

Gets the active view

Signature getActive() => Promise<ViewController | undefined>

getByIndex

Description

Returns the view at the index

Signature getByIndex(index: number) => Promise<ViewController | undefined>

getPrevious

Description

Gets the previous view

Signature getPrevious(view?: ViewController | undefined) => Promise<ViewController | undefined>

insert

Description

Inserts a component into the nav stack at the specified index. This is useful if you need to add a component at any point in your navigation stack.

Signature insert<T extends NavComponent>(insertIndex: number, component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

insertPages

Description

Inserts an array of components into the nav stack at the specified index. The last component in the array will become instantiated as a view, and animate in to become the active view.

Signature insertPages(insertIndex: number, insertComponents: NavComponent[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

pop

Description

Call to navigate back from a current component. Similar to push(), you can also pass navigation options.

Signature pop(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

popTo

Description

Pop to a specific index in the navigation stack

Signature popTo(indexOrViewCtrl: number | ViewController, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

popToRoot

Description

Navigate back to the root of the stack, no matter how far back that is.

Signature popToRoot(opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

push

Description

Push a new component onto the current navigation stack. Pass any additional information along as an object. This additional information is accessible through NavParams

Signature push<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

removeIndex

Description

Removes a page from the nav stack at the specified index.

Signature removeIndex(startIndex: number, removeCount?: number, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

setPages

Description

Set the views of the current navigation stack and navigate to the last view. By default animations are disabled, but they can be enabled by passing options to the navigation controller.You can also pass any navigation params to the individual pages in the array.

Signature setPages(views: any[], opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>

setRoot

Description

Set the root for the current navigation stack.

Signature setRoot<T extends NavComponent>(component: T, componentProps?: ComponentProps<T> | null | undefined, opts?: NavOptions | null | undefined, done?: TransitionDoneFn | undefined) => Promise<boolean>