Posts

Showing posts from March, 2018

Parallax

Image
import { Directive, ElementRef,Renderer } from '@angular/core'; /**  * Generated class for the ParallaxDirective directive.  *  * See https://angular.io/api/core/Directive for more info on Angular  * Directives.  */ @Directive({   selector: '[parallax-header]', //   host:{ //     '(ionScroll)':'onCntscroll($event)' //   } // }) // export class ParallaxDirective { //   constructor(public el: ElementRef, public re : Renderer) { //     console.log('Hello ParallaxDirective Directive'); //   } //   header:any; //   main_cnt:any; //   ta:any; //   ngOnInit(){ //     let cnt= this.el.nativeElement.getElementsByClassName('scroll-content')[0]; //     this.header=cnt.getElementsByClassName('bg')[0]; //     this.main_cnt=cnt.getElementsByClassName('main-cnt')[0]; //    ...

ionic3 Elastic Header

npm install ionic2-elastic-header --save app.module.ts import { NgModule, ErrorHandler } from '@angular/core'; import { IonicApp, IonicModule, IonicErrorHandler } from 'ionic-angular'; import { MyApp } from './app.component'; import { MyList } from '../pages/myList/myList'; import { ElasticHeaderModule } from "ionic2-elastic-header/dist"; @NgModule({   declarations: [     MyApp,     MyList   ],   imports: [     IonicModule.forRoot(MyApp),     ElasticHeaderModule //Add ElasticHeaderModule here   ],   bootstrap: [IonicApp],   entryComponents: [     MyApp,     MyList   ],   providers: [{provide: ErrorHandler, useClass: IonicErrorHandler}] }) export class AppModule {} myList.html <ion-header [elastic-header]="myContent">   <ion-navbar>     <ion-title>My List</ion-title>   </ion-navbar> <...

Scroll To hide Header

app.module.ts import { HideHeaderDirective  } from "../directives/hide-header/hide-header"; @NgModule({   declarations: [     MyApp,     HomePage,     HideHeaderDirective, ] ionic g directive HideHeader import { Directive, Input, ElementRef, Renderer } from '@angular/core'; @Directive({   selector: '[hide-header]', // Attribute selector   host: {     '(ionScroll)': 'onContentScroll($event)'   } }) export class HideHeaderDirective {   @Input("header") header: HTMLElement;   headerHeight;   scrollContent;   oldScrollTop: number = 0; //fab     constructor(public element: ElementRef, public renderer: Renderer) {     console.log('Hello HideHeaderDirective Directive');   }   ngOnInit() {     this.headerHeight = this.header.clientHeight;     this.scrollContent = this.element.nativeElement.getElementsByClassName("scroll-conte...

scroll to hide fab button

app.module.ts import { StatusBar } from '@ionic-native/status-bar'; import { SplashScreen } from '@ionic-native/splash-screen'; import { HideHeaderDirective  } from "../directives/hide-header/hide-header"; import { AutoHideDirective  } from "../directives/auto-hide/auto-hide"; @NgModule({   declarations: [     HideHeaderDirective,     AutoHideDirective   ], ionic g directive AutoHide import { Directive ,Renderer, ElementRef } from '@angular/core'; @Directive({   selector: '[auto-hide]' ,   host: {     '(ionScroll)':'onContentScroll($event)'   } }) export class AutoHideDirective { fabToHide; oldScrollTop: number = 0;   constructor( private renderer : Renderer, private element : ElementRef) {     console.log('Hello AutoHideDirective Directive');   }     ngOnInit(){     this.fabToHide = this.element.nativeElement.getElementsByClassName("fab")[0]; ...

remove splash screen white screen.

ionic plugin add cordova-plugin-splashscreen npm install --save @ionic-native/splash-screen   <preference name="SplashMaintainAspectRatio" value="true"/>   <preference name="SplashScreen" value="screen"/>   <preference name="SplashScreenDelay" value="30000"/>   <preference name="AutoHideSplashScreen" value="false"/>   <preference name="SplashShowOnlyFirstTime" value="false"/>   <preference name="FadeSplashScreen" value="false"/> import { SplashScreen } from '@ionic-native/splash-screen'; @NgModule({   declarations: [...]   imports: [IonicModule.forRoot(MyApp)],   bootstrap: [IonicApp],   entryComponents: [...],   providers: [SplashScreen, ...] }) export class AppModule {} import { SplashScreen } from '@ionic-native/splash-screen'; @Component({   templateUrl: 'app.html' }) expo...