Tag: cordova

How To Implement Multiselect Tag Input In Ionic App Development

Implement Multiselect Tag Input

Ionic tagging is most beautiful textbox (component) in the application. Basically, this component is used for filtering the data. In E-commerce application where the user needs to filter data from a large number of categories, we can use this. Some of the examples are Flipkart, Amazon, Snapdeal etc.

The Tagging component looks like autocomplete textbox but the major difference is that we can’t  select multiple tags in autocomplete textbox. Here, we can select multiple types. The ideal example is the mailbox where we need to send an email to more than one person at that time we can use this.

Ionic (Hybrid App Development) is providing such facility that we can integrate one simple plugin in the application for fulfilling the tagging feature need. The name of the plugin is ui-select2. There is one more plugin using which gives similar functionality named Tag Input.

Installation Methods: Below are the two methods for installing above mentioned plugins.

Npm
    $ npm install ui-select
    $ npm install ng-tags-input --save
bower

    $ bower install angular-ui-select 
    $ bower install ng-tag-input --save 

Installation ui-select

Let’s start with first plugin ui-select: After the installation of plugin, please import js files using below mentioned code in index.html

<script src="lib/select2/select2.js"></script>
<script src="lib/angular-ui-select2/src/select2.js"></script>
<link rel="stylesheet" type="text/css" href="lib/select2/select2.css">

Now take a field in your view (.html) file.

<input type="hidden" ui-select2="select2Options" ng-model="listData.list_of_string">

Review the attribute

ui-select2="select2Options"

It will empower you to get the multiple values in your text field instead of comma separated list you will have tagging kind of look and feel. Once accessed using model value in the controller you will get an array instead of comma separated string value. The look and feel of input tags are because of CSS you have imported in the index.html file. You can always override that CSS by using your own scss in your application to match it with your application theme. You can also create new tags as well while entering non-existing data in the field and just hit enter or GO button from the device.

Js File in controller

Now, as we got all the required libraries with us we need to start coding and for that first, we need to add the dependency in the controller file using below mentioned code.

angular.module('myModule', ['ui.select']);

You can always use strings of tags or bind an array to your tags. But we suggest you to go with Tags as it will give you the power of setting ids to each element of the array so that you can later refer it easily.

$scope.list_of_string_data= {
       0:'Amsterdam',
       1:'Washington',
       3:'Sydney',
       4:'Beijing',
       5:'Cairo'
};

 $scope.select2Options = {
        'multiple': true,
        'simple_tags': true,
        'tags':$scope.list_of_string_data
 };
Here, We will create object store in tag in input tags.
Installation ui-tag-input (“tag input”) Now let’s talk about another plugin ui-tag-input
After the installation of plugin, please import js files using below-mentioned code in index.html
<script src="angular.js"></script>
<script src="ng-tags-input.js"></script>
<link rel="stylesheet" type="text/css" href="ng-tags-input.css">
 Now take a field in your view (.html) file.
<tags-input ng-model="tags">
        <auto-complete source="loadTags($query)"></auto-complete>
 <p>Model: {{tags}}</p>
</tags-input>

The Plugin is rich enough to provide its own directive for tagging facility.Js File in controllerNow, as we got all the required libraries with us we need to start coding and for that first, we need to add the dependency in the controller file using below mentionedcode.
angular.module('myModule', ['ngTagsInput'])

app.controller('MainCtrl', function($scope) {
  $scope.tags = [
    { text: 'abc' },
    { text: 'xyz' },
    { text: 'pqr' }
  ];
});
Here, we will create default tag in an input field and tags would be ‘abc’,’XYZ’,’PQR’.
We can access this information through model associated with the field in view inside the controller file. This plugin also provides data in array format like the former one.
Hope this article has helped you to get the tagging feature in your application.
Advertisements

Know How Admob Work In Ionic App Development

1

The guide is for mobile application developer. For making some money out of your application google ads are the

best to have them in it. Ionic have the feature support for displaying google ads using AdMob plugin and in that way

helps you get the revenue from your application.

Here, I will explain you the steps for configuring the AdMob account for your application.

AdMob Setting

  • Sign in / Sign up for AdMob .
  1. You can use your regular email address for this.
  • Click the Monetize Menu and click new app button.
  1. You will get the Ad Publisher ID.
    b. Here, If you have application in google play store then you can find it from there or if it’s your first

application then you can add application name manually and select platform for an application.
c. You can get the app id from the application.

NOTE: when you are copy some changes are required like it will give tild(~) sign in change that sign to(/) and add

into application.

Now, let’s talk about some basic type of advertisements available for an application.

  1. Banner Ad
  2. Interstitial Ad
  3. Native Ad

NOTE: Here,the native ads are not supported in ionic application.

You can add multiple Banner ads, Interstitial ads & Native Ads in our AdMob Account. In all the advertisement you

will need to add Ad unit name : in AdMob Setting then click on save button.

If you want to get the analytics of your application then you can also configure the  Firebase Analytics , In this article

we are going to skip this step as our main focus here is on getting the AdMobs in the ionic application.

Here, all the advertisement have unique ad unit id: it will look like:

Ionic Configuration:

Know How Admob Work in Ionic App Development AddWeb Solution
Now, you are ready to view the advertisements similar to display below. First is the type of banner and second is the

type of Interstitial Ad.

You can change the dimensions and colors for fonts and background as well.One can also include video and animated

text in the interstitial type of ad.

Hope this article has helped you getting Advertisement in your hybrid application in ionic framework.

Need more assistance regarding mobile apps development services…!

Source: https://goo.gl/qEvjpZ

Leaflet Map Integration In The Ionic App

Leaflet Map Integration In The Ionic App

Introduction of leaflet map

Leaflet is a open source javascript library for mobile friendly interactive maps it has most mapping feature that developer had needed.
We can also use leaflet map in websites. Here I will show you how to develop ionic app with the integration of leaflet map.I have used leaflet map in ionic application for finding location, know nearby information and using GPS we find route and location.

Installing all the leaflet libraries using bower

  • Install map only: For installing map first you will update your bower and install leaflet libraries using below mentioned command

bower install leaflet

Note: Import three files leaflet css and js in your index.html file

<link rel=”stylesheet” href=”lib/leaflet/dist/leaflet.css” />         http://lib/leaflet/dist/leaflet.js          http://lib/angular-leaflet-directive/dist/angular-leaflet-directive.js

home.html

<ion-content> <leaflet width=”100%” height=”100%”></leaflet> </ion-content>

Put the center point in your map using Latitude ,Longitude and Zoom.

home.controller.js

angular.extend ($scope,{         ahmedabad:{ lat: 23.0225, lng: 72.5714, zoom: 8 } });

home.html

<ion-content> <leaflet if-center=”ahmedabad”  height=”100%” width=”100%”></leaflet> </ion-content>

  • For marker / custom marker: In map we can put simple marker with message and focus etc..

First we creating simple array for marker.

var mymarker={ lat :23.02850605221088, lng: 72.55897879600525, focus : true, message: ‘Addweb Solution Pvt. Ltd.’ }; angular.extend ($scope,{ Ahmedabad:{ lat: 23.0225, lng: 72.5714, zoom: 8 }, markers : { mymarker :angular.copy(mymarker) } });

home.html

<ion-content> <leaflet if-center=”ahmedabad” markers=”markers” height=”100%” width=”100%”></leaflet> </ion-content>

Here, we put one object (markers) in the map and angular.extend  is extend the object in $scope and we use that object direct to the leaflet tag.

  • Creating custom marker icon in Map

For Creating custom marker in leaflet map first we install Leaflet.MakiMarkers libraries using this command

bower install Leaflet.MakiMarkers

index.html

http://lib/Leaflet.MakiMarkers/Leaflet.MakiMarkers.js http://lib/angular-leaflet-directive/dist/angular-leaflet-directive.js

Note: Put this file below the leaflet.js and also import angular-leaflet-directive.js
Read more… https://goo.gl/7nrcu2
  

Hope this blog helps you and would help to resolve any leaflet map integration in Ionic Application. Share you views and feedback 🙂 . To be the Part of the family as Ionic Developer visit Hire Ionic developer .