Search docs/

ion-nav

Contents

Nav is a standalone component for loading arbitrary components and pushing new components on to the stack.

Unlike Router Outlet, Nav is not tied to a particular router. This means that if we load a Nav component, and push other components to the stack, they will not affect the app's overall router. This fits use cases where you could have a modal, which needs its own sub-navigation, without making it tied to the apps URL.

Properties

animated

Description

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

Attributeanimated
Typeboolean
Defaulttrue

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

Attributeroot
TypeFunction | HTMLElement | ViewController | null | string | undefined

rootParams

Description

Any parameters for the root component

Typeundefined | { [key: string]: any; }

swipeGesture

Description

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

Attributeswipe-gesture
Typeboolean | undefined

Events

NameDescription
ionNavDidChangeEvent fired when the nav has changed components
ionNavWillChangeEvent fired when the nav will change components

Methods

canGoBack

Description

Returns true if the current view can go back.

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

getActive

Description

Get the active view.

SignaturegetActive() => Promise<ViewController | undefined>

getByIndex

Description

Get the view at the specified index.

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

getPrevious

Description

Get the previous view.

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

insert

Description

Inserts a component into the navigation stack at the specified index. This is useful to add a component at any point in the navigation stack.

Signatureinsert<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 navigation 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.

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

pop

Description

Pop a component off of the navigation stack. Navigates back from the current component.

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

popTo

Description

Pop to a specific index in the navigation stack.

SignaturepopTo(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.

SignaturepopToRoot(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.

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

removeIndex

Description

Removes a component from the navigation stack at the specified index.

SignatureremoveIndex(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. Navigation parameters can also be passed to the individual pages in the array.

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

setRoot

Description

Set the root for the current navigation stack to a component.

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