Ionic 4 show splash screen

Install the Cordova and Ionic Native plugins:

ionic cordova plugin add cordova-plugin-splashscreen

npm install --save @ionic-native/splash-screen@beta

Add this plugin to your app's module

import { SplashScreen } from '@ionic-native/splash-screen/ngx';

providers: [
     NativeStorage,
     StatusBar,
     SplashScreen,
     SplashScreen
]

Add below code in your component:

import { SplashScreen } from '@ionic-native/splash-screen/ngx';

constructor(constructor(private splashScreen: SplashScreen) {

             ... 

              this.splashScreen.show();

}

To hide this Splash screen you can use below code:

this.splashScreen.hide();

Ionic 4 show native spinner dialog

Install the Cordova and Ionic Native plugins:

ionic cordova plugin add cordova-plugin-native-spinner 

npm install --save @ionic-native/spinner-dialog@beta

Add this plugin to your app's module

import { SpinnerDialog } from '@ionic-native/spinner-dialog/ngx';

providers: [
     NativeStorage,
     StatusBar,
     SplashScreen,
     SpinnerDialog
]

Add below code in your component:

import { SpinnerDialog } from '@ionic-native/spinner-dialog/ngx';

constructor(private spinnerDialog: SpinnerDialog) {

             ... 

              this.spinnerDialog.show();

}

To hide this spinner you can use below code:

this.spinnerDialog.hide();

ionic open app in google play

Install the Cordova and Ionic Native plugins:
$ ionic cordova plugin add cordova-plugin-market
$ npm install --save @ionic-native/market@beta

Add this plugin to your app's module
import { Market } from '@ionic-native/market/ngx';

providers: [
    NativeStorage,
    StatusBar,
    SplashScreen,
    Market

]

Now in your component:

import { Market } from '@ionic-native/market/ngx';

constructor(private market: Market) { }

...

this.market.open('your.package.name');

Ionic 4 Admob tutorial with screenshots

Install the Cordova and Ionic Native plugins:

ionic cordova plugin add cordova-plugin-admob-free --save --variable ADMOB_APP_ID="ca-pub-4480115196234187"

npm install --save @ionic-native/admob-free@beta

Add this plugin to your app's module:

import { AdMobFree } from '@ionic-native/admob-free';

providers: [

    StatusBar,

    SplashScreen,

    AdMobFree,

    {provide: ErrorHandler, useClass: IonicErrorHandler}

]

Now write the code to show banner ad and Interstitial Ad in your component:

import { AdMobFree, AdMobFreeBannerConfig, AdMobFreeInterstitialConfig } from '@ionic-native/admob-free';

constructor(public navCtrl: NavController,

              private admobFree: AdMobFree) {

    

     this.showBannerAd();

     this.showinterstitialAd();

}

showBannerAd() {

    const bannerConfig: AdMobFreeBannerConfig = {

      // add your config here

      // for the sake of this example we will just use the test config

      isTesting: false,

      autoShow: true

    };

    this.admobFree.banner.config(bannerConfig);

    this.admobFree.banner.prepare().then(() => {

      // banner Ad is ready

      // if we set autoShow to false, then we will need to call the show method here

    }).catch(e => console.log(e));

  }

  showinterstitialAd() {

    const interstitialConfig: AdMobFreeInterstitialConfig = {

      // add your config here

      // for the sake of this example we will just use the test config

      isTesting: false,

      autoShow: true

    };

    this.admobFree.interstitial.config(interstitialConfig);

    this.admobFree.interstitial.prepare().then(() => {

      // banner Ad is ready

      // if we set autoShow to false, then we will need to call the show method here

    }).catch(e => console.log(e));

  }

After that once you build and install the app in real android devivce you will be able to see ad as below:

Banner Ad:

Interstitial Ad:

Ionic 4 action sheet tutorial with screenshots

Install the Cordova and Ionic Native plugins:

$ ionic cordova plugin add cordova-plugin-actionsheet 

$ npm install --save @ionic-native/action-sheet@beta

Add this plugin to your app's module

import { ActionSheet } from '@ionic-native/action-sheet/ngx';

providers: [
      StatusBar,
      SplashScreen,
      ActionSheet,
     { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
]

Add a button to show your action sheet like below:

<ion-button full (click)="doAction()">Show Action Sheet</ion-button>

It will display like below screenshot:

Now add below method in your component:

doAction() {

const buttonLabels = ['Share via Facebook', 'Share via Twitter'];

const options: ActionSheetOptions = {

title: 'What do you want with this image?',

subtitle: 'Choose an action',

buttonLabels: buttonLabels,

addCancelButtonWithLabel: 'Cancel',

addDestructiveButtonWithLabel: 'Delete',

destructiveButtonLast: true

};

this.actionSheet.show(options).then((buttonIndex: number) => {

console.log('Button pressed: ' + buttonIndex);

});

}

Now build your app using:

ionic cordova build android

or 

ionic cordova run android to direcly test in android device

after opening the app if you click on button SHOW ACTION SHEET

your action sheet will look like this: