Ngx-ion-expandable-header NPM

About

The component was created to be as versatile as possible within the ionic framework. Below is an outline on how to use and add the input properties that are avalible.

preview on ionic view with code 32e870d7

preview

Setup

Install

~~$_ npm install ngx-ion-expandable-header --save~~ ( currently an issue with version)

Import module to project
import { NgxIonExpandableNavModule } from "ngx-ion-expandable-header";
@NgModule({ declarations: MyApp , imports: BrowserModule, IonicModule.forRoot(MyApp), NgxIonExpandableNavModule ,
Or, if you have setup your pages as modules then you can add it to each page modul that it is needed on.
import { NgxIonExpandableNavModule } from "ngx-ion-expandable-header";
@NgModule({ declarations: HomePage, , imports: IonicPageModule.forChild(HomePage), NgxIonExpandableNavModule ,

Inputs

contentArea (required)

Once you have added the component you can then add the components tag ngx-ion-expandable-nav inside your header tag, above or below the ionic's ion-navbar component. You then need to make a connection to your main content, of the page, to this component with the [contentArea] input.

height

This is to set a specific height for the expanded section. This is not required by default (except when adding an image) and when is it not set, the height will be set to whatever the height is of the content that is added.

stopHeight

The [stopHeight] input can specify a height for the expanded section whereby the contraction of the expanded section stops, when scrolling, allowing for an always visible item if need be.

Example

<ion-header>

  <ngx-ion-expandable-nav [contentArea]="content" [height]="220">
    <img src="../assets/imgs/bg-img-information.png" alt="">
  </ngx-ion-expandable-nav>
  
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title> NgxIonExpandableNav
      <small> (Information) </small>
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content #content padding>
 ...