Class HyloNav

A navigation component like ion-nav. Creates and wraps an ion-nav component when the property navId is set. Otherwise handles the page management on its own.

Adds styles to the wrapped ion-nav component which removes the absolute positioning and lets the actual body scroll.

To be used together with the hylo-app component.

When used with an ion-nav component (navId is set), it removes a hylo-template component which was placed initially in this component as soon as the first dynamic loaded router component gets placed in this component for the first time. Happens usually at page load by the router.

Calls the following methods in the loaded page-WebComponent when defined:

  • componentDidActivate when the component got loaded/added
  • componentWillDeactivate when the component will unload/be removed

Properties

disableScroll navId

Methods

canGoBack pop push setTemporaryStorage

Events

hyloNavDidChange hyloNavWillChange

Properties

disableScroll

disableScroll: boolean

By default if a user visits a page which was previously loaded, the hylo-nav component scrolls to the position of the page where the user left it. This flag disables the scroll behavior.

navId

navId: string

If set, an ion-nav component with this id is placed inside this component.

Methods

canGoBack

  • canGoBack(): Promise<boolean>

  • Returns if the navigation can go back and stay on the site when doing it.

    Returns Promise<boolean>

pop

  • pop(): Promise<boolean>

  • Goes back in history of the navigation.

    Returns Promise<boolean>

push

  • push(id, chain?): Promise<boolean>

  • Pushes a component onto the stack.

    Parameters

    • id: any

      the id/name of the component (e.g. "hylo-template") or see ion_nav.push()

    • Optional chain: any[]

      the chain connected to the component (default: current path)

    Returns Promise<boolean>

setTemporaryStorage

  • setTemporaryStorage(changes, data?): Promise<void>

  • Saves a "data" object in this.temporaryStorage for so many navigation "changes". The change counter ticks down every time the "hyloNavDidChange" event gets fired. If the change counter falls under 0, this.temporaryStorage gets erased.

    Parameters

    • changes: number

      the counter for this.temporaryStorage

    • Optional data: any

      the data of this.temporaryStorage. if not provided, the counter for the current storage is renewed

    Returns Promise<void>

Events

hyloNavDidChange

hyloNavDidChange: EventEmitter<HTMLElement>

Event fired when the nav has changed components. Emits the page component which got added when "navId" is not set.

hyloNavWillChange

hyloNavWillChange: EventEmitter<any>

Event fired when the nav will change components.

Settings

Member Visibility

Theme

On This Page

Generated using TypeDoc