Multi-Language Functionality In Ionic_v2

Multilingual with Ionic

The Multi-language functionality gives you a facility to have your ionic application in more than one languages.

In this part of the blog, we will be going to explain how you can include translations facility to your application.

We use for translation language ngx-translate npm plugin.

Ngx-translate:

It is an npm plugin that is used for translate the language and switching languages.

First of all, we need to install the above mentioned plugin in the application using the below mentioned command.

$ npm install @ngx-translate/core @ngx-translate/http-loader --save

After installing ngx-translate you need to import array in the NgModule of the application.
Below is an example of the app.module.ts file:

import { NgModule } from '@angular/core';
import { TranslateModule } from '@ngx-translate/core';

@NgModule({
  imports: [
    TranslateModule.forRoot()
  ],
Providers:[]
})
export class AppModule{}

Now after injecting the plugin in the module we must know how to use that in application. First of all we need to create multiple json files for each language that you are planning to have in your application. Let’s say for example, you are planning to have two languages English and French in your application then please create two files at the below mentioned path.

/assets/i18n/en.json and /assets/i18n/fr.json
If the i18n folder is not there then please create it at above-mentioned path and then place the json files under it.

Now let’s have a look at how those files will look like from inside.

en.json file:
{
    HELLO:"Hello World"
}
Or 
fr.json file:
{
    HELLO:"Bonjour"
}

Now as we are done with the basic setup of multilingual functionality in our application, Let’s implement it in our component. First, include the injections in app.module.ts file

app.module.ts

import { NgModule } from '@angular/core';
import { TranslateModule, TranslateLoader } from '@ngx-translate/core';
import { TranslateHttpLoader } from '@ngx-translate/http-loader';
import { HttpModule, Http } from '@angular/http';

export function createTranslateLoader(http: Http) {
  return new TranslateHttpLoader(http, './assets/i18n/', '.json');
}
@NgModule({
  imports: [
    HttpModule,
    TranslateModule.forRoot({
      loader: {
        provide: TranslateLoader,
        useFactory: (createTranslateLoader),
        deps: [Http]
      }
    })
  ]
})
export class AppModule{}

After implementing above mentioned code we need to use TranslatePipe and TranslateService to translate the language of view file. The TranslatePipe is an angular js pipe.

Below Example suggest how TranslatePipe to translate the language of application:

<h1> {{ 'HELLO' | translate }} </h1>

Note: Make sure this key of is declared in JSON file otherwise it will not translate the value instead it will directly print the key “HELLO” as it is.

Now let’s talk about the TranslateService, it can be used for both, to change the current language of an app and to translate JavaScript values in an application.

To use the TranslateService in your app you must first import it and set the default language.

app.component.ts

import { TranslateService } from '@ngx-translate/core';

@Component({
    selector: 'page-schedule',
    templateUrl: 'schedule.html'
})
export class SchedulePage {
    constructor(translate: TranslateService) {
        translate.setDefaultLang('en');
    }
}

Here, translate.setDefaultLang(‘en’) is set default language and we change here to language as we added to our project.

Hope this blog helped you feel free to share your feedbacks/queries, also need assistance regarding Ionic App Development then get in touch with us.

Advertisements

Ingenious Ways To Create Audio Player With Ionic

Audio-ionic

Nowadays many applications are having another source of medium to show the information to the users other than text. For example, video and audio. In this article let’s focus on having an audio player in your ionic application. An audio player for Ionic works with HTML5 audio or native audio using Cordova Media plugin. It creates an interface to the Cordova-media plugin including a service that controls Media playback and directives to define the look and feel of the player.

Install dependencies for having audio player

  • Install this module using bower
$ bower install ionic-audio
  • Cordova media plugin
$ ionic plugin add cordova-plugin-media

Note: If your project does not have any platform then, you must add one and make a build if you want to test it on your device. Keep in mind that the plugin which we have installed above depends on a Cordova plugin so the module won’t run locally with ionic serve. However, you can still run the project locally to tune the UI before deploying to the device.

Include Js file in Index.html

 <script type="text/javascript" src="lib/ion-audio/dist/ion-audio.js"></script>

Inject the dependency in your app’s module

 angular.module('starter', ['ionic', 'starter.controllers', 'starter.services', 'ionic-audio'])

Inject this code in view file player UI using directives

 <ion-view view-title="Music Player">   
<ion-content>
    <ion-audio-track track="track">
<div class="list list-inset">
           <div class="item item-thumbnail-left">
                <img src="{{track.art}}">
                <h2>{{track.title}}</h2>
                <p>{{track.artist}}</p>
              <ion-audio-controls>
               <a class="button button-icon icon"          
             ion-audio-play> 
          </a>
                <ion-spinner icon="ripple"></ion-spinner>
              </ion-audio-controls>
           </div>
              <div class="item">
                <ion-audio-progress-bar 
track="track" display-time>
</ion-audio-progress-bar>            
   </div>
</div>
    <ion-audio-track>
      </ion-content>
 </ion-view> 

Here, track=”track” is a UI directive

Ion-audio-track

This is directive which gets us the track information about this audio.Using below mentioned JSON object, you can add the information about the track in an audio player. The interface of the player is defined in ion-audio-track body directive.

$scope.track = {
    url: 'http://www.xyz.com/simple_song.mp3',
    artist: 'abc',
    title: 'xyz',
    art: 'image/album.png'
}

Here, $scope.track.url is the path for audio if you want to play the local song in your android/ios device, just put that audio file in js folder and give the according to a path to that file in the code. Sample example,

 $scope.track = {
        url:'/android_asset/www/assets/mp3/simple_song.mp3',
        artist: 'abc',
        title: 'xyz',
        art: '/android_asset/www/assets/image/album.png'
  }

Use as a global progress bar

If an ion-audio-progress-bar is placed inside the scope of ion-audio-track, it will automatically work and will progress automatically according to the audio goes on. Add a display-info to show the current playing track. Add a display-time to show timing in the track list.

<ion-audio-progress-bar display-time display-info></ion-audio-progress-bar>

Media Manager

Inject MediaManager in your controller if you need to access the currently playing track. For example, in order to stop playback before transitioning to another view any other action:

.controller('MusicCtrl', ['$scope', 'MediaManager', function($scope, MediaManager) {

$state.$on('$ionicView.beforeLeave', function() {
        MediaManager.stop();
    });

Hope you had the quick solution for your purpose, feel free to Hire our Hybrid App Development service, provider.

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

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 .