Ionic Popover : The popover is basically a view which is used to provide additional information of element when user hovers, clicks or performs some action. Content which needs to show on popover keep them inside the <ion-popover-view> tag. Here in this tutorial we are going to explain Ionic Popover with example and demo.

Ionic Popover

Let us first create a template and add the popover view inside it. Here we are going to create a button and call a function on click event.

Popover Html Part-

Here is html part of popover in ionic.

Popover

In the above example we have created a button and called a function openPopover on click event. We will create this function in next step. We have created template with id test-popover.html which we will call to show the popover content on button click.  <ion-popover-view> tag is used to create popover view which contains the title & content etc.

Popover Controller Part-

Here is controller part of popover in ionic-

The above controller has $ionicPopover which is required for ionic popover. The function openPopover is used to trigger the event to show the popover. You can call function closePopover to close the popover. The Controller code also contains the events based actions such as if you want to perform some action on popover hidden or popover removed. You can add event based action in the above example also.

If you run the above example it will produce output something like this-

Methods-

Following methods are available in Ionic Popover-

1. fromTemplate()
2. fromTemplateUrl().

fromTemplate(templateString, options):

• templateString(string) : This is string used for popover content.
• options(Object): This is object. This is used for Options which are passed to the initialize method.

fromTemplateUrl(templateUrl, options):

• templateUrl(string) : Url to load Template.
• options(Object): This is object. This is used for Options which are passed to the initialize method.

Add icon in Ionic Popover

Let us add icon in popover template –

Popover Html Part-

Here is html part of popover in ionic.

Popover

In the above example we have added an icon and added custom style for the position of icon. You can also add your own style to manage the icon position and size.

Add Animation in Ionic Popover : slide In Up

You can add the animation in popover simply as below –

The above example will show the popover with the slide in up effect. You can also add other animation effects that ionic supports.

Change Background of Popover

You can add your custom css style to change the background color-

    
      
Popover Title
    
    
	

      Hello World!
	  Welcome to Tutorialsplane.com!
	
    
  

The above example will show the popover with the yellow color and text color in #333.

Change Background Color of Backdrop of Popover

You can override the default background of backdrop of popover by overriding the class .popover-backdrop. So now let us check how it works-

As you see we have added custom background with important style in .popover-backdrop class because we have to override the default background and replace with our custom background. The above example will show the popover backdrop with the custom background color.

You can customize the popover in ionic as per your need. You can also override the default position of the popover. Most of the time we are concerned about the height & width of the popover you can override the height & width also by adding custom class in wrapper or you can directly override main popover class.

Ionic Navigation : Navigation in app is used to provide navigation to the users throughout the application. Ionic provides a beautiful navigation system which you can use easily. Ionic uses the AngularJs UI Router for navigation. In this tutorial, we are going to explain the functionality of ionic navigation.

Ionic Navigation

As Ionic uses the AngularUI Router so app interfaces are organized into various “states”. State contains the state name and template url. Ionic maintains the history of the states which makes it’s better. In this example we are going to create a navigation system which will contain different states for the app.

Controller Code

.config(function($stateProvider, $urlRouterProvider) {

  $stateProvider
    .state('tabs', {
      url: "/tab",
      abstract: true,
      templateUrl: "templates/tabs.html"
    })
    .state('tabs.home', {
      url: "/home",
      views: {
        'home-tab': {
          templateUrl: "templates/home.html",
          controller: 'MainCtrl'
        }
      }
    })
	.state('profile', {
      url: "/profile",      
      templateUrl: "templates/profile.html"
      
    })
	.state('contact', {
      url: "/contact",      
      templateUrl: "templates/contact.html"
      
    }); 
   $urlRouterProvider.otherwise("/tab/home");

})

.controller('MainCtrl', function($scope, $ionicModal) {
});

When the app is started the router searchs the index state and loads it’s template. If index state is not defined it will load the default router.

$urlRouterProvider.otherwise(“/tab/home”); defines the default router if no router is found.

The above part contains the controller & Services Required for the navigation

Html Code

Here is html part of the above example –

If you Run the above example it will produce output like this-

ion-nav-view

|<ion-nav-view> And </ion-nav-view>| is used to define the ion-nav-view. Ionic nav view contains the ion-view. In the above example we have added ion-nav-view which is necessary for navigation.

ion-view

This is child of the ion-nav-view and container for view content and navigational and header bar. Here is an example of ion-view –

  
    
      Hello World!
    
  

ion-nav-bar

ion-nav-bar which is used to create topbar which is updated when the application states are changed.You can add ion-nav-back-button to create the back button. Here is an example of ion-nav-bar –

Ionic Modal: Ionic modal is basically content pane area which appears over the main content view. Ionic modal is popup with rich functionality which provides users more functionality. You can customize the ionic’s default modal easily. In this tutorial we are going to explain the modal functionalities with example and demo. We will also cover how to customize modal such as color background color or size of modal. It’s cool you will definitely love it.

Ionic Modal

<ion-modal-view> is used for creating model. Place content inside the tag <ion-modal-view> and </ion-modal-view> which you want to show in modal. Here is html template and controller for modal script.

Html Template

Controller Code

Below code contains the function to open a model and close model also code to execute action on events such as on open or on close of modal. Here is full code of controller required for opening and closing a modal.

angular.module('myApp', ['ionic'])
.controller('MyCtrl', function($scope, $ionicModal) {
  $ionicModal.fromTemplateUrl('test-modal.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });
});

If you run the above example it will produce the following output-

Ionic loading : Ionic provides beautiful loading functionality which represents the activity and prevents users interaction until the activity is completed. $ionicLoading.show() is used to show ionic default loader and $ionicLoading.hide() is used to hide the loader. Here we are going to explain the functionality with example and demo.

Ionic loading

Here is default Ionic loader –

The above example will produce the following output-

Ionic Keyboard: Keyboard is very important feature in ionic. Ionic provides functionality which automatically identifies the field elements which needs a keyboard. The field elements should be in ionic’s scroll view or directive such as content.

Ionic Keyboard Example

Ionic keyboard functionality becomes very important when you want to customize the default behavior of the keyboard. Here we are going to explain this with an example-

How to use Ionic Keyboard?

Suppose you want to implement a functionality when keyboard is open such as hide an element when the keyboard is open. For this functionality you can use the class .hide-on-keyboard-open Here is an example –

 
Hide Me on Keyboard Open

When click on the above input field email the keyboard will be open at the time of the keyboard open the element div with class .hide-on-keyboard-open will be hidden.

You can find the plugin at https://github.com/driftyco/ionic-plugin-keyboard