Information and Technology Blog - Gowriter

How to implement angular-dual-listbox in Angular Project

2019-02-11T23:01:00.004-08:00

In this post we are going to see on how to implement multi select using a node module called angular-dual-listbox. you can find the link to the node module here.

Installation:

First of all install the angular-dual-listbox node module into your Angular project using the following command given below.

npm i angular-dual-listbox --save

for the angular-dual-listbox to work in your project import it to your root module as shown below.

import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AngularDualListBoxModule } from 'angular-dual-listbox'; .... @NgModule({ imports: [ AngularDualListBoxModule ], ... }) export class AppModule {}

Next, For the code to work you does not need any extra node modules , except for one this is used to implement bootstrap functionality in Angular. we are using ngx-bootstrap here to implement bootstrap, if already installed head for the next step, if not first install the ngx-bootstrap by executing the below given code in your cli.

npm install ngx-bootstrap --save

this will install the above node module into your project and you should also include bootstrap css into your index.html to include bootsrap style to your project.

<!--- index.html -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

Implementation:

Create a new component for the code implementation lets name it duallistbox. execute the below given code in your cli to create the component in your project.

ng generate component duallistbox

since our component is created, lets open duallistbox.component.ts file, copy and paste the below given code to your file.

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-duallistbox', templateUrl: './duallistbox.component.html', styleUrls: ['./duallistbox.component.css'] }) export class DuallistboxComponent implements OnInit { target = []; source: any = []; constructor() { this.source = [ 'Gowriter', 'Angular', 'Angular JS', 'Program', 'Multi Select', 'Dual Listbox' ]; } ngOnInit() {} }

Next for the html part, open duallistbox.html copy and paste the below given html code.

that's it save your code and refresh your project, now you should see multi select ui working on your angular project. all you need to do is just replace the this.source array with your own data.

Angular : Move items from one list to another list

2019-02-09T02:48:00.002-08:00

In this post we are going to see on how to select items from one list and move them to another list in angular. you can select a single item or multiple items from the one of the lists and can move them to other, vice versa.

For the code to work you does not need any extra node modules , but for one which is used to implement bootstrap functionality in Angular. we are using ngx-bootstrap here to implement bootstrap here so if already have it in your project head for the next step, if not first install the ngx-bootstrap by executing the below given code in your cli.

npm install ngx-bootstrap --save

this will install the above node module into your project. and lastly you should include bootstrap css into your index.html to include bootsrap style to your projects.

<!--- index.html -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

so next create a new component for the code implementation.
Now open your newly created components html file. copy and paste the following code into your file.

<div class="form-group row"> <div class="col-md-3"> <select class="form-control" [(ngModel)]="selectedToAdd" multiple name="myselecttsms2"> <option *ngFor="let item of groupsArray" style="text-align: center;border-radius: 2px;background: #fff;margin-bottom: 2px;padding: 2px;" [ngValue]="item">{{item.groupName}}</option> </select> </div> <div class="col-md-1" style="margin-top: 35px;"> <div class="row"> <div class="col-12" style="margin-left: 29px;margin-top: -24px;"> <button (click)="assign()" class="btn btn-primary" style="margin-bottom: 3px;width: 39px;height: 39px;background: #24ca71;"><i class="fa fa-angle-double-right"></i></button> </div> </div> <div class="row"> <div class="col-12" style="margin-left: 27px;"> <button (click)="unassign()" class="btn btn-primary" style="margin-bottom: 3px;width: 39px;height: 39px;background: #24ca71;"><i class="fa fa-angle-double-left"></i></button> </div> </div> </div> <div class="col-md-3"> <select class="form-control" [(ngModel)]="selectedToRemove" multiple name="myselecttsms"> <option *ngFor="let item of selectedItems" style="text-align: center;border-radius: 2px;background: #fff;margin-bottom: 2px;padding: 2px;" [ngValue]="item">{{item.groupName}}</option> </select> </div> </div>

as you can see the above code uses ngFor to loop the json data and we also have multiple attribute in select tag which tells it to allow multiple select in the list. when ever an option is selected its data is saved to selectedToRemove via ngModel.

Now, lets go to ts part. open your components ts file copy and paste the below give code into your ts file.

import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-selectcomp', templateUrl: './selectcomp.component.html', styleUrls: ['./selectcomp.component.css'] }) export class SelectcompComponent implements OnInit { selectedToAdd: any; selectedToRemove: any; selectedItems: any = []; groupsArray: any = []; constructor() { this.groupsArray = [{'groupName':'ramu'}, {'groupName':'ravi'}, {'groupName':'teja'}, {'groupName':'murali'}] } ngOnInit() { } assign() { this.selectedItems = this.selectedItems.concat(this.selectedToAdd); this.groupsArray = this.groupsArray.filter(selectedData => { return this.selectedItems.indexOf(selectedData) < 0; }); this.selectedToAdd = []; }
unassign() { this.groupsArray = this.groupsArray.concat(this.selectedToRemove); this.selectedItems = this.selectedItems.filter(selectedData => { return this.groupsArray.indexOf(selectedData) < 0; }); this.selectedToRemove = []; } }

here we are concatenating the selected items with the other list and removing the selected from the original list via the filter method.

That's it if you have any queries feel free to comment below.

How to Implement Dynamic Tabs in Angular Project

2019-02-06T05:23:00.005-08:00

In this post we are going to see how to Implement Tabs in Angular project. we are using two components here to implement this example one is tabscomp and other is ckeditorcomp. here tabscomp is used to implement tabs and ckeditorcomp is used within the tabs.

Here to implement tabs in angular we are going to use ngx-boostrap which is a node module to implement certain bootstrap ui in angular. so first install ngx-boostrap into your project.

npm install ngx-bootstrap --save

after installation of the above module we need bootstrap css file for styling. add the following css file to index.html

<!--- index.html -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

for the node module to work we should import it to root module. so first import the module as given below. in my case i'm importing it in app.module.ts

import { TabsModule } from 'ngx-bootstrap';

@NgModule({
...
imports: [TooltipModule.forRoot(),...]
...
})

Next create two component as explained above. execute the below given code in your cli to create components.

ng generate component tabscomp
ng generate component ckeditorcomp

Now open tabscomp.html file, copy and paste the below given code and refresh your project.

<h4>Normal Tabs(static)</h4> <div> <tabset> <tab heading="Basic title" id="tab1">Basic content</tab> <tab heading="Basic Title 1">Basic content 1</tab> <tab heading="Basic Title 2">Basic content 2</tab> </tabset> </div>

you should see page with tabs as shown below. this does not need any ts code to work.

next we will implement dynamic tabs, copy and paste the below code to your tabscomp.html file just below the recently added code.

<h4>Dynamic Tabs</h4> <button type="button" class="btn btn-primary btn-sm" (click)="newTab()"> Add new tab </button> <button type="button" class="btn btn-primary btn-sm" style="margin-left:5px;"(click)="tabs = []" *ngIf="tabs.length"> Remove all tabs </button> <tabset style="margin-top: 7px;s"> <tab heading="Static title">Static content</tab> <tab *ngFor="let tabz of tabs" [heading]="tabz.title" [active]="tabz.active" (select)="tabz.active = true" (deselect)="tabz.active = false" [disabled]="tabz.disabled" [removable]="tabz.removable" (removed)="removeTabHandler(tabz)" [customClass]="tabz.customClass"> {{tabz?.content}} </tab> </tabset>

as you can see the above code contains *ngFor which takes array from ts to loop the code in html file. it also contains various others like [heading],[active] , (select), (deselect),[disabled] ,[removable],(removed),[customClass]etc.

Heading directive is used to display the given heading
active takes boolean as its value when true the given tab will be in active state.
select is called when the user selects a tab. 'tabz.active = true' is executed when one of the tabs is selected.
deselect is called when the tab is out of focus. 'tabz.active = false' is executed when one of the tab gets out of focus.
disabled takes boolean as value. by default it will be false, when true is set the tab will still be visible buy use cannot interact with it.
removable also takes boolean as value. when set to true the tab can be removed from the array of tabs listed.
removed is called when user tries to delete the tab. here we will be calling a function when the tab is selected for deletion.
we can add styling to the individual tabs with customClass directive.

next copy and paste the following code to your tabscomp.component.ts file.

this.tabs = [ { title: 'new Tab 1', content: 'new Tab content 1' removable: true}, { title: 'new Tab Title 2', content: 'new Tab content 2' removable: true }, { title: 'new Tab Title 3', content: 'new Tab content 3', removable: true } ]; newTab(){ const newTabIndex = this.tabs.length + 1; this.tabs.push({ title: `new Tab Title ${newTabIndex}`, content: `new Tab content ${newTabIndex}`, disabled: false, removable: true }); } removeTabHandler(tab){ this.tabs.splice(this.tabs.indexOf(tab), 1); console.log('Tab removed'); }

Here tabs array contains all the tabs that we need to be displayed on our page. we can add title, content, removable, active, disabled stc to customize the tabs.
newTab() method is used to add new tabs to the existing tabs, it should also include the details like title, content etc.
removeTabHandler() method removes particular tab from the tabs array.

Below code is about adding components inside tabs other than plain text.
copy and paste the below given code to your appcomp.html file.

<div>
<h4>Add components with Dynamic Tabs</h4><button type="button" class="btn btn-primary btn-sm" (click)="newTabcomp()"> Add new tab </button> <button type="button" class="btn btn-primary btn-sm" style="margin-left:5px;"(click)="tabs1 = []" *ngIf="tabs.length"> Remove all tabs </button>
</div> <tabset style="margin-top: 7px;s"> <tab heading="Static title">Static content</tab> <tab *ngFor="let tabz of tabs1" [heading]="tabz.title" [active]="tabz.active" (select)="tabz.active = true" (deselect)="tabz.active = false" [disabled]="tabz.disabled" [removable]="tabz.removable" (removed)="removeTabHandler1(tabz)" [customClass]="tabz.customClass"> <div [ngSwitch]="tabz?.content"> <app-ckeditorcomp *ngSwitchCase="'testcomp'"></app-ckeditorcomp> </div> </tab> </tabset>

as you can see the difference from the above code is addition of the below given code. rest of the code is similar to code which we have seen earlier.

[ngSwitch] directive on a container specifies an expression to match against. The expressions to match are provided by ngSwitchCase directives on views within the container.
Every view that matches is rendered.
Here we are giving the ngSwitchCase as 'testcomp' to app-ckeditorcomp. if [ngSwitch] gets testcomp the it will display ckeditorcomp component.

Incase if you are thinking what is ckeditorcomp doing here, i've made a post regarding CKEditor , do check it out.
Next you can copy and paste the below given ts code to you appcomp.ts file. here the only difference is we will be giving a static text to content which is also given to ngSwitchCase of component tag which is to be displayed.

<import { Component, OnInit } from '@angular/core'; @Component({ selector: 'app-tabscomp', templateUrl: './tabscomp.component.html', styleUrls: ['./tabscomp.component.css'] }) export class TabscompComponent implements OnInit { tabs: any = []; tabs1: any = []; newTabIndex: any; constructor() { this.tabs1 = [ { title: 'new Tab 1', content: 'new Tab content 1' removable: true}, ]; } ngOnInit() {} newTabcomp(){ const newTabIndex = this.tabs.length + 1; this.tabs1.push({ title: `new Tab Title ${newTabIndex}`, content: `testcomp`, disabled: false, removable: true, }); } removeTabHandler1(tab){ this.tabs1.splice(this.tabs.indexOf(tab), 1); console.log('Remove Tab handler'); } }

That's it, please feel free to comment if you have any doubts or if the code does not work.

How to Pass data Between Angular components with @Input and @output decorators.

2019-02-05T04:19:00.002-08:00

Input and Output decorators in Angular are used to exchange data between components. They are a mechanism to send or receive data from one component to another. Input is used to receive data in to the component whereas Output is used to send data out of the component. In this post we are going to see on how to send and receive data between components in Angular using Input & Output decorators.

Components:

First create two components in your angular project so that we can use them to transfer data.
for my convenience i have created two components with names as firstcomp and secondcomp. this will create two folders in src folder of your project.
After creating the above two components navigate to app.module.ts and modify it as given below so that it include the two components imports.

Now open app.component.ts in your src folder and modify it as follows.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { FirstcompComponent } from './firstcomp/firstcomp.component';
import { SecondcompComponent } from './secondcomp/secondcomp.component';

@NgModule({
declarations: [
AppComponent,
FirstcompComponent,
SecondcompComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

as you can see i had included two methods buttonMessage and button1Message in the parent component. now copy and paste the below given html code to your app.html file.

<div> <h2>Data Transfer between first component to second component</h2> <div class="row"> <div class="col-6"> <app-firstcomp (emitEvent)="buttonMessage($event)"
[message]="messageFromButton1"></app-firstcomp> </div> <div class="col-6"> <app-secondcomp (emitEvent)="button1Message($event)"
[message]="messageFromButton"></app-secondcomp> </div> </div> </div>

The above html consists of 'app-firstcomp' tag and 'app-secondcomp' tag making them child components and app.component as parent component.

The (emitEvent) attribute in child tags fetches data emitted from firstcomp/secondcomp component and sends it to the specified method we have given buttonMessage($event) method. here $event is the data we got from child component to parent component when it emits data.
The [message] attribute in child tags fetches data from parent component (app.component) and sends it to the specified tags child component in this case firstcomp/secondcomp.

open firstcomp.html copy and paste below given code.

<div> <p>First component</p> <button (click)="clickMe()">Button</button> <h4>{{message}}</h4> </div>

now lets get to the functionality part. copy and paste the below given code to firstcomp.component.ts file.

import { Component, OnInit, Output, Input, EventEmitter } from '@angular/core'; @Component({ selector: 'app-firstcomp', templateUrl: './firstcomp.component.html', styleUrls: ['./firstcomp.component.css'] }) export class FirstcompComponent implements OnInit { @Output() emitEvent = new EventEmitter(); @Input() message:string; constructor() { } ngOnInit() {}

clickMe(){ this.emitEvent.emit('message from first component'); } }

open secondcomp.html copy and paste below given code.

<div> <p>Second component</p> <button (click)="clickMe()">Button1</button> <h4>{{message}}</h4> </div>

now, copy and paste the below given code to second.comp.component.ts file.

import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core'; @Component({ selector: 'app-secondcomp', templateUrl: './secondcomp.component.html', styleUrls: ['./secondcomp.component.css'] }) export class SecondcompComponent implements OnInit { @Input() message:string; @Output() emitEvent = new EventEmitter(); constructor() { } ngOnInit() {}
clickMe(){ this.emitEvent.emit('message from second component'); } }

Explanation:

As you can see the two comonents tags will display their respective ui on the parent component. on the firstcomp and secondcomp we have buttons which when clicked calls 'clickMe()' method when executed the method using this.emitEvent.emit() emits a message in our case we are using a static string 'message from second component' .
here in ts file you can see that message is declared with @Input decorator and emitEvent with @Output decorator, so that when a message is emitted from other component the message variable will get the data and using emitEvent component one can emit data to other component.

that's it save and run your project when your click one of the buttons on the page the message will be displayed on other component. In our case 'message from second component'if Button1 is clicked and 'message from first component' if Button is clicked

How to Implement Word Cloud in Angular Project

2019-02-04T05:03:00.002-08:00

Word Cloud is an SVG image composed of words from a particular text or subject, in which the size of each word indicates its frequency/importance.Word Cloud consists of Tags which are usually single words, and the importance of each tag/word is shown with font size or color.

Installation:

First install angular4-word-cloud, in to your project with the following command

npm install angular4-word-cloud --save

After the above node module is installed, also install the d3 node module. it is required for the above module to work as it is based on d3 architecture.

npm install d3 --save

and to the next step, d3 also requires to include its cloud file into the index file of the angular project. so include the following js file into your index file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3-cloud/1.2.4/d3.layout.cloud.js"></script>

Imports:

Every node module needs an import to get it working, so import the following to your root angular file in my case app.module.ts.

Note: if you have module.ts for your component you can also import it to your components module also.

import {AgWordCloudModule, AgWordCloudData} from 'angular4-word-cloud';

and also include it to your @NgModule() as given below.

imports: [AgWordCloudModule.forRoot()],

After importing the above code your app.module.ts file should look as follows.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import {AgWordCloudModule, AgWordCloudData} from 'angular4-word-cloud';

import { AppComponent } from './app.component';

import { CloudComponent } from './cloud/cloud.component';

@NgModule({

declarations: [

AppComponent,

CloudComponent

imports: [

BrowserModule,

AgWordCloudModule.forRoot()

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

As you can see i also imported my component into the root module, ie app.module.ts file. that's it for the import part now lets get to the coding part shall we.

Implementation:

first open cloud.html file copy and paste the following code.

Now open cloud.component.ts copy and paste the below give n code.

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-wordcloud',

templateUrl: './wordcloud.component.html',

styleUrls: ['./wordcloud.component.css']

})

export class WordcloudComponent implements OnInit {

wordData: any = [];

options: any = {};

constructor() {

this.wordData = [

{size: 1000, text: 'GoWriter'},

{size: 950, text: 'Angular'},

{size: 123, text: 'JAva script'},

{size: 321, text: 'ngServe'},

{size: 231, text: 'Int'},

{size: 123, text: 'CkEditor'},

{size: 346, text: 'Ng Model'},

{size: 107, text: 'Variable'},

{size: 436, text: 'Class'},

{size: 731, text: 'NgOnInit'},

{size: 80, text: '@Input'},

{size: 96, text: '@Output'},

{size: 531, text: 'EventEmitter'},

{size: 109, text: 'ChangeDetection'},

{size: 500, text: 'Directives'},

{size: 213, text: 'Services'},

{size: 294, text: 'Component'},

{size: 472, text: 'NgViewAfterInIt'},

{size: 297, text: 'NgOnChanges'},

{size: 456, text: 'NgBind'},

{size: 123, text: 'NgTest'},

{size: 376, text: 'Pipes'},

{size: 93, text: 'Implements'},

{size: 123, text: 'Assets'},

];

this.options = {

settings: {

minFontSize: 10,

maxFontSize: 100,

margin: {

top: 10,

right: 10,

bottom: 10,

left: 10

labels: true // false to hide hover labels

};

}

ngOnInit() {

}

save the file and refresh your project to see if the word cloud is visible. if everything is perfect you word cloud should be visible to you. if you have encountered any errors or for some reasons word cloud is not working feel free to post a comment, ill respond as soon as possible.

Tips :

In case any error appears, please do check imported modules(root components) and also js import in index file.
If Case if you are getting the following error " Can't bind to 'ngModel' since it isn't a known property ", Please import common module along with form module.

How to Implement ckeditor in Angular

2019-01-31T08:54:00.002-08:00

Have you ever come across situation, where you need to implement an editor in your Angular project !. In this post We are going to implement ng2-ckeditor in our Angular Project, so lets get started.

ng2-ckeditor

first, lets create a project in angular. i had already created a project so, i'm going to use that. if you are interested or new to Angular Project creation you can check the post here on how to create project in Angular.

Now to use ng2-ckeditor in our angular project we have to first install the module into our project. to do so copy and paste the below given line f code to your command prompt and execute the command.

npm install ng2-ckeditor--save

this will install the ng2-ckeditor module to our angular project. now since the installation of module is done, lets get to implementation of ng2-ckeditor in our angular project.

Note: It is also mandatory to include the CKEditor java script file in your index,html file.

<script src="https://cdn.ckeditor.com/4.5.11/full/ckeditor.js"></script>

Next step is to import CKEditor module into our project's main module in angular ie, app.module. your code should look as below after importing CKEditorModule .

import { CKEditorModule } from 'ng2-ckeditor'
@NgModule({
...
imports: [CKEditorModule],
...
})
export class AppModule {}

Now I want to create a new component to view Html editor so, i will create a component with name ckeditor by executing the following command on your project command prompt as shown below.

ng generate component ckeditor

this will create a folder with name as "CKEditorComponent" in your projects src/app folder.

Now open app.module.ts in your editor and import 'CKEditorComponent' as shown below.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';

import { CKEditorModule } from 'ng2-ckeditor'

import { CkeditorComponent } from './ckeditor/ckeditor.component';

@NgModule({

declarations: [

AppComponent,

CkeditorComponent

imports: [

BrowserModule,

CKEditorModule,

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Now open ckeditor.component.html and copy and paste the below given code.

 <h3>Angular CKEditor</h3>

<ckeditor

[(ngModel)]="ckeditorContent"

debounce="500">

</ckeditor>

Next open ckeditor.component.ts and copy and paste the below given ts code.

import { Component, OnInit } from '@angular/core';

@Component({

selector: 'app-ckeditorcomp',

templateUrl: './ckeditorcomp.component.html',

styleUrls: ['./ckeditorcomp.component.css']

})

export class CkeditorcompComponent implements OnInit {

ckeditorContent: any;

constructor() {

this.ckeditorContent = '<p>Some html</p>';

}

ngOnInit() {

}

Please save the above files and refresh your project to check if your code is running fine. if you have implemented the code as explained/ given you should be greeted with an HTML editor in your ckeditor component.

Tips :

In case any error appears, please do check imported modules(root components) and also js import in index file.
If Case if you are getting the following error " Can't bind to 'ngModel' since it isn't a known property of ckeditor ", Please import common module along with form module.

How to implement ngx-datatable in angular

2018-09-25T21:12:00.000-07:00

Did you came across a situation where your plain table in angular is not enough to please the user or the organisation you're working for.

if yes this post will show you how to easily implement data tables in angular without writing your own code from scratch.

ngx-datatable is an Angular component for presenting large and complex data. we are going to use this custom component to show our data in a more feature packed table.

first, lets create a project in angular. i had already created a project so, i'm going to use that. if you want to know how to create a project in angular, you can check it here.

Now to use ngx-datable in our angular project we have to first install the module into our project. to do so copy and paste the below code to your projects command prompt and click on enter.

npm i @swimlane/ngx-datatable --save

this will install the ngx-datatable module to our angular project. now since the ngx-datatable is installed into our project, lets see how to implement it and view ngx-datatable on our angular project.

I want to create a new component to view datatable so, i will create a component with name ngxtable by executing the following command on your project command prompt as shown below.

ng generate component ngxtable

this will create a folder with name as "ngxtable" in your projects src/app folder.

Now open app.module.ts in your editor and import 'NgxtableComponent' as shown below.

import { BrowserModule } from '@angular/platform-browser';

import { NgModule } from '@angular/core';

import { NgxDatatableModule } from '@swimlane/ngx-datatable';

import { AppComponent } from './app.component';

import { NgxtableComponent } from './ngxtable/ngxtable.component';

@NgModule({

declarations: [

AppComponent,

NgxtableComponent

imports: [

BrowserModule,

NgxDatatableModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

Now open ngxtable.component.ts and declare rows and columns as shown below.

rows = [

{ name: 'John', gender: 'Male', company: 'Wipro' },

{ name: 'lakshmi', gender: 'Female', company: 'TATA' },

{ name: 'Henry', gender: 'Male', company: 'Burger King' },

{ name: 'Jacob', gender: 'Male', company: 'Microsoft' },

{ name: 'Harry', gender: 'Male', company: 'IBM' },

{ name: 'Jessica', gender: 'Female', company: 'Apple' }

];

columns = [

{ prop: 'name' },

{ name: 'Gender' },

{ name: 'Company' }

];

next open 'ngxtable.html' and paste the below given code to it.

<div>

<ngx-datatable

class="material striped"

[rows]="rows"

[columns]="columns"

[columnMode]="'force'"

[headerHeight]="50"

[footerHeight]="50"

[rowHeight]="50"

[limit]="3">

</ngx-datatable>

</div>

save the above files and run your project. navigate to your component ( if you don't know how to navigate to other component on angular , you can check it here. ) and check if the table is working.

By default the data-table is not styled. this makes it easy for us to style it as we wish. ngx-datatable is also provided with a separate material theme. In order to use it, you need to include the following in your project ngx-datatable.css file.

@import '~@swimlane/ngx-datatable/release/index.css';

@import '~@swimlane/ngx-datatable/release/themes/material.css';

@import '~@swimlane/ngx-datatable/release/assets/icons.css';

check now to see if the styling is applied. if not please import the ViewEncapsulation to your component as shown below.

import { ViewEncapsulation } from '@angular/core';

@Component({

selector: 'app-ngxtable',

templateUrl: './ngxtable.component.html',

styleUrls: ['./ngxtable.component.css'],

encapsulation: ViewEncapsulation.None

})

Note: if you get any error like ' rxjs_1.fromEvent is not a function ' when sorting table update your 'rxjs &

rxjs-compat' node modules to latest versions.

the final output of our code will look something like this.

that's it, we have our ngx-datatable up and working. for more options on how to manipulate ngx-datatable, check this link here.

How to Implement ModalController in Ionic 2 and Ionic 3.

2018-03-24T03:34:00.004-07:00

A Modal is similar to page, but it goes over the app’s current page and is displayed as a popup page. Modal is generally used to select an item from a group or to make a choice.

A Modal uses the NavController to present itself . It is added to the stack similar to how NavControllers push works.

A modal is “Presented” by calling Present method.

ionicModal.present();

After the modal has been presented, The modal can later be closed or “dismissed” from within the component instance by using the ViewController’s dismiss method. Data can be passed to a new modal through create method as the second argument.

 let ionicModal = this.modalCtrl.create(ionicModal, { Id: 5 });

The data that is passed through create method, can then be accessed from the opened page/modal by using NavParams.

 this.params.get('Id');

Once the Modal work is done with, when the modal is dismissed, we can send back or pass required data from modal to previous page by calling the dismiss method.

 this.viewCtrl.dismiss(data)

Now, that the modal is closed, the data is passed from modal is received at onDidDismiss method.


   ionicModal.onDidDismiss(data => {
     console.log(data);
   });

Code and Paste the below given code to your myhomepage.ts file.

myhomepage.ts


    import { Component } from '@angular/core';
    import { ModalController, ViewController } from 'ionic-angular';
    import { NavController, NavParams } from 'ionic-angular';
    import { DetailsPage } from '../details/details'
    @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
    })
    export class HomePage {
    UserId:any;
    UserName:any
    constructor(public modalCtrl: ModalController,public params: NavParams) {
    this.UserId = this.params.get('id');
    this.UserName = this.params.get('name');
    }

    presentModal() {
    let MyNewModal = this.modalCtrl.create(DetailsPage , { name: "kumar"});
    MyNewModal.onDidDismiss(data => {
    console.log(data);
    });
    MyNewModal.present();
    }

    }

Code and Paste the below given code to your details.ts file.

details.ts


    import { Component } from '@angular/core';
    import { NavController, NavParams } from 'ionic-angular';
    import { ModalController, ViewController } from 'ionic-angular';

    @Component({
    selector: 'page-details',
    templateUrl: 'details.html'
    })
    export class DetailsPage {

    constructor(public viewCtrl: ViewController) {

    }

    dismiss() {
    let data = { 'name':'kumar','id':'12345' };
    this.viewCtrl.dismiss(data);
    }

    }

Encryption Unsuccessful when launching Android Emulator in Android Studio.

2018-03-23T04:42:00.001-07:00

Getting " Encryption unsuccessful " when trying to launch Android Emulator.

If you are getting Encryption Unsuccessful message on your android emulator when it's launched, then follow the below steps to solve the problem.

STEP 1 : Open Android Studio if not already opened.

STEP 2 : In the Menu bar go to Tools ==> Android ==> AVD Manager.

You can directly press the below shown icon to go to AVD Manager.

STEP 3 : Now in the ADV MANAGER Window, click on the ▼ (Down Arrow) in the Actions tab.

STEP 4 : You will get a new popup with some options, click on Wipe Data and confirm the action.

That's it, Now restrat your android studio for the changes to take effect. Now, Your emulator should work perfectly without "Encryption Unsuccessfull" error.

Creating Application Widget in Dojo 2

2018-03-10T03:25:00.005-08:00

Dojo 2 is used for Creating Enterprise-grade Web Applications. in the previous post we have seen on how to create a widget in Dojo 2 application.In this post we will be creating a sample application widget which combines all the child widgets together.

We will not be creating a widget here again, i will use the employeeDetails widget, that we have already created.

Now lets create a widget with name App. This widget is the one which contains all the child widgets. This Widget represents the entire application that we are building.
Start by Creating an empty ts file name App ie App.ts. Now open the App.ts file located in the src/widgets directory, in your editor and paste the below dependency imports.


  import { WidgetBase } from '@dojo/widget-core/WidgetBase';
  import { v, w } from '@dojo/widget-core/d';

The first import ie, the WidgetBase class will be used as the base class for our App widget.
WidgetBase works with the WidgetProperties interface to define the properties of the widget that are publicly accessible for the others to utilize. The Second import ie, the v functions is used to render virtual DOM nodes and w is used for widgets . Both v & w generate DNodes, that are the base type of all virtual DOM nodes in Dojo 2.

Since we are trying to import widgets to App widget, we will next import employeeDetails widget that we created in the previous post.


  import EmployeeDetails from './widgets/employeeDetails'

Now, Since we are done with the imports of the dependencies we need. let's create the App widget class.


  export default class App extends WidgetBase {

  }

The App class is extending WidgetBase, which accepts the WidgetProperties interface. Here we have added the export and the default keywords before the class keyword. it is because of the ES6 standard approach for creating modules.

Next, override WidgetBase's render method to generate the application's view. The protected render() method return's a DNode , or an array of DNode's, which are used by the application's projector to render the view. Here the v and w functions generates DNode's.

Next create a simple render method by adding this to the App class,


    protected render() {
        return v('div');
    }

The above method when executed will return a div and generate a div virtual node.
Now, Since we are creating an application widget we need to render the child widgets to our app widget, to do that we should use w function that is designed to render widgets (v is designed to render virual DOM Nodes).to render EmployeeDetails widget with w function, it should be as follows.

w(Banner, {})

Now, update your render method as shown below, to include EmployeeDetails widget as a child node in App Widgets div node.


    protected render() {
        return v('div', [
            w(EmployeeDetails , {})
        ]);
    }

The w function takes two parameters - a widget class (the name of the widget to render) and an object literal (which passes values to the widget). In this case, the EmployeeDetails class is not using WidgetProperties. If you want to send data, the WidgetProperties have 2 properties are optional.Below is the structure of the WidgetProperties, if you want to use it for your widget.


  export interface WidgetProperties {
      key?: string;
      bind?: any;
  }

let's say you have another widget let's say CompanyDetails, to integrate in the App widget, you can do this as follows,


    protected render() {
        return v('div', [
            w(EmployeeDetails , {}),
            w(CompanyDetails, {})
        ]);
    }

That's it for the Application Widget. if you want to add more widgets just import them to App.js file and include the widget class along with the object literal in the respected div node in v function.

Example App.ts file


 import { WidgetBase } from '@dojo/widget-core/WidgetBase';
 import { v, w } from '@dojo/widget-core/d';
 import EmployeeDetails from './employeeDetails';
 import CompanyDetails from './companyDetails';

 export default class App extends WidgetBase {
    protected render() {
        return v('div', [
            w(EmployeeDetails , {}),
            w(CompanyDetails, {})
        ]);
    }
 }

Make App Widget as your root Widget

Now that the App widget contains all the other widgets as child widget's, we should change our main.ts to import App widget.and also make sure to pass App class into the ProjectorMixin function.

Example main.ts file


  import { ProjectorMixin } from '@dojo/widget-core/mixins/Projector';
  import App from './widgets/App';

  const Projector = ProjectorMixin(App);
  const projector = new Projector();

  projector.append();

Widgets Creation in Dojo 2 Application

2018-03-07T23:32:00.002-08:00

Dojo 2 is powerful and advanced tool for creating applications. It is mainly used for Enterprise-grade Web Application Development. In this tutorial we are going to learn about how to create widgets in Dojo 2. we will be creating a sample employee details widget as shown below.

This posts assumes that you already have the required environment set for creating projects in dojo 2. if not set please refer this post on how to Get started with Dojo 2.

Create a employeeDetails.ts file.

First Create a page with name employeeDetails.ts in your projects widgets directory. Now open employeeDetails.ts file in the editor and follow the below steps.

Copy and Paste the ts code to your employeeDetails.ts file.

employeeDetails.ts


import { WidgetBase } from '@dojo/widget-core/WidgetBase';
import { v} from '@dojo/widget-core/d';
import * as css from './styles/employeeDetails.m.css';


export default class EmployeeDetails extends WidgetBase {
    
 protected render() {
        return v('div',{classes:css.divStyle,styles:{'font-weight':'700'}}, [ 'Employee Details', 
               v('div',{classes:css.childDiv},[
    v('img', {
     classes: css.imgStyle,
     src: 'https://4.bp.blogspot.com/-agAs8bWPElU/Wp_Pz3j2gmI/AAAAAAAAA0M/umABRoJyg8YnNIbpnhz03_B3uMZ2FhtIgCLcBGAs/s320/boy.png' })
               ]),
               v('div',{classes:css.textStyle}, [
                   v('table',{styles:{'margin':'0 auto'}},[
                       v('tr',{},[
                           v('td',{classes:css.td2Style},[
                            'Name :'
                           ]),
                           v('td',{classes:css.td2Style},[
                            v('strong',{classes:css.textDetails}, [ 'K V KUMAR' ])
                           ]) 
                       ]),
                       
                       v('tr',{},[
                            v('td',{classes:css.td2Style},[
                            'Designation  :'
                            ]),
                            v('td',{classes:css.td2Style},[
                                v('strong',{classes:css.textDetails}, [ 'APP DEVELOPER' ])
                            ]) 
                        ]),

                        v('tr',{},[
                            v('td',{classes:css.td2Style},[
                            'Experience  :'
                            ]),
                            v('td',{classes:css.td2Style},[
                                v('strong',{classes:css.textDetails}, [ '3 YEARS' ])
                            ]) 
                        ])
                   ]),

            ])
            ])
 }
}

Create employeeDetails.m.css file

Create a file with name as employeeDetails.m.css, in your projects widgets/styles directory.

Copy and Paste the below give code to your employeeDetails.m.css file.

employeeDetails.m.css


   .divStyle{
    text-align: center;
    color:black;
}

.childDiv{
    margin-top: 40%;
    border-radius: 5px;
    background: #c3c3c3;
}

.imgStyle{
 width:50%;
}

.textStyle{
    font-weight: 700;
    padding: 5px 0 5px 0;
    margin: 5px 0 0 0;
    border-radius: 5px;
    background: rgb(195, 195, 195);
}

.td1Style{
   float:left;
}

.td2Style{
    width:50%;
    text-align: left;
}

.textDetails{
    vertical-align:middle;
}

Above Code Explanation...

Every widget creation in dojo 2 will have the below 2 imports as default.

import { WidgetBase } from '@dojo/widget-core/WidgetBase';
import { v} from '@dojo/widget-core/d';

The WidgetBase class is used as the base class for every widget created. WidgetBase defines the publicly accessible properties of the widget. and the v function is used to render virtual DOM node, which is we will be doing all out html element creation here itself. And now, the third import is the css file that we have just created. Here, we are importing all the classes in employeeDetails.m.css as css. Now, since the imports are over for this example, lets go further below.. after imports every widget in dojo 2 has this class definition

export default class  extends WidgetBase {

}

here the contains your widgets name.
Now, we need to define the render method inside our class we just created.


  protected render() {
    return v('div');
  }

this is the place all our widget is rendered. At present the above method will only generate a div virtual node.
every element created here must be within v function,it simply instructs Dojo 2 to create an HTML element. The v function contains the element name we want to create, an object literal and the the text or the child elements goes within the square brackets. the object literal contains the attributes that we have within an element.
if you wish to add a widget inside a widget ie as a child of the above div node, follow the below steps.


      protected render() {
        return v('div', [
            w(Banner, {})
        ]);
      }

for the above code to work we need to import w from @dojo/widget-core/d.

import { v, w } from '@dojo/widget-core/d';

Now, to see our widget in action, import EmployeeDetails widget to main.js.

import EmployeeDetails from './widgets/employeeDetails';

and modify projector constant as below,

const Projector = ProjectorMixin(EmployeeDetails);

That's it for the widget creation part for this post, refresh your browser tab to see the changes. If you have any doubts regarding the above post please leave a comment below.

Getting Started with Dojo 2

2018-03-07T03:04:00.001-08:00

Dojo 2 is powerful and advanced tool for creating applications. It is mainly used for Enterprise-grade Web Application Development. In this tutorial we are going to setup the environment to create Projects in Dojo 2.

Dojo 2 requires us to install its CLI, for creating, testing, and building its applications. First run the following command in your Command Prompt.

npm install -g @dojo/cli

This command installs the Dojo's command-line tool. with which we are going to create our project. It takes sometime for the cli to get installed on your system. after the installation gets finished without and errors. run the below command to create a new project on your system.

dojo create --name myfirstapp

This command will create a basic Dojo 2 application in the newly created folder with name “myfirstapp”. your Dojo 2 project will come with all of its dependencies pre-installed. The project takes time to download to your system wait for it to complete. After the project setup is completed, navigate to the project on your command prompt as sown below.

cd myfirstapp

Now that you are in the "myfirstapp" directory, which is the Dojo 2 Project Folder. execute the below command in you command prompt for the Dojo 2 project to run on your browser.

dojo build --watch --serve

The above commands shortest version is dojo build -w -s. This command will tell Dojo 2 to build and transpile the project . The --watch or -w flag watches and rebuilds your project whenever any changes are observed and the --serve or -s flag starts a simple web server which allows us to run our application in the browser while the modifications are done. Now open Browser with link http://localhost:9999/. you should see that the dojo 2 application is up and running.

How to implement Loading Indicator in ionic 2 and ionic 3.

2018-03-01T04:55:00.001-08:00

IonicFramework Provdes us with an preBuilt components called as LoadingController which allows to create an overlay on top of the page, that can be used to indicate the user an activity is running in the background. Since LoadingController creates an overlay and appears on top of the app's content, it blocks the user interaction untill the process is complete.

Now lets look at how to implement loadingcontroller in our ionic project. First as usual we will start by creating an page, lets name it as Dashboard.

ionic generate page dashboard

This will create a dashboard folder in src/pages folder in your projects root directory.which contains four files.

1. dashboard.html
2. dashboard.module.ts
3. dashboard.ts
4. idashboard.scss

If dashboard.module.ts is not created by Ionic CLI, you should import DashboardPage into app.module.ts as below.

import { DashboardPage } from '../pages/dashboard/dashboard';

The above line tell's the app that a page named DashboardPage is available at the particular location. Now Check to see if your project is running properly, without any errors.

Now since, the page is created and working fine, let's go to the coding part.

Copy and Paste the below ts code to your Components .ts file.

import { LoadingController } from 'ionic-angular';

after completing the above step, inject LoadingController in to your pages constructor, in my case in dashboard.ts file as shown below.


  constructor(...., public loadingCtrl: LoadingController) {
    ....
  }

and Now let's modify our dashboard.html to include the below code.

Copy and Paste the below html code to your Components .html file.


  <ion-content>
  <div style="margin-top: 50%;">
    <button ion-button full color="secondary" (click)="presentLoadingDefault()">Please Wait...</button>
    <button ion-button full color="danger" (click)="presentLoadingText()">Loader Without Spinner</button>
  </div>
</ion-content>

Next let's look at the functionality part shall we,

Copy and Paste the below ts code to your Components .ts file.

   presentLoadingDefault() {
    let loading = this.loadingCtrl.create({
      content: 'Please wait...'
    });
  
    loading.present();
  
    setTimeout(() => {
      loading.dismiss();
    }, 2000);
  }
  
  
  presentLoadingText() {
    let loading = this.loadingCtrl.create({
      spinner: 'hide',
      content: 'Loading Please Wait...'
    });
  
    loading.present();
  
    setTimeout(() => {
      loading.dismiss();
    }, 200000);
  }

loader can be dismissed by calling loading.dismiss() after our process is done, to resume user interaction with the app.
In second method that we have implemented above we have set spinner to hide, this hides the spinner and shows only the text.

That's it, feel free to comment below if you have any queries or doubt's about the regarding above code implementation.

How to implement Infinite Scrolling in ionic 2 and ionic 3

2018-03-01T03:27:00.001-08:00

Ionic Framework has a predefined element called ion-infinite-scroll which allows you to perform an action when the user scrolls a specified distance from the bottom or top of the page.

let's create a page with name infinitescroll, using the below given command.

ionic generate page infinitescroll

This will create a infinitescroll folder in src/pages folder in your projects root directory.which contains four files.

1. infinitescroll.html
2. infinitescroll.module.ts
3. infinitescroll.ts
4. infinitescroll.scss

if infinitescroll.module.ts is not created by ionic cli, you should import InfinitescrollPage into app.module.ts as below.

import { InfinitescrollPage } from '../pages/infinitescroll/infinitescroll';

The above line tells the app that a page named InfinitescrollPage is available at the particular location. Now Check to see if your project is running properly, without any errors.

Now since, the page is created and working fine, let's go to the coding part.

Copy and Paste the Below HTML Code to infinitescroll.html page.


  <ion-header>
  <ion-navbar>
    <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Infinite Scroll</ion-title>
  </ion-navbar>
</ion-header>

<ion-content>
  
   <ion-list style="background: #e0e0e0;" no-lines>
     <ion-item *ngFor="let i of items" style="margin-bottom: 2px;">{{i}}</ion-item>
   </ion-list>
  
   <ion-infinite-scroll (ionInfinite)="doInfinite($event)">
     <ion-infinite-scroll-content></ion-infinite-scroll-content>
   </ion-infinite-scroll>
  
  </ion-content>

ionInfinite event will be fired when the scroll reaches the threshold distance. here we will be calling doInfinite method by passing $event parameter.

Copy/Replace the Below ts Code to your infinitescroll.ts page.


    import { Component } from '@angular/core';
    import { NavController } from 'ionic-angular';

    @Component({
    selector: 'page-home',
    templateUrl: 'home.html'
    })
    export class HomePage {
    items = [];
    constructor(public navCtrl: NavController) {
        for (let i = 0; i < 30; i++) {
        this.items.push( "The Number is "+this.items.length );
        }
     }
    doInfinite(infiniteScroll) {
        console.log('Begin async operation');

        setTimeout(() => {
        for (let i = 0; i < 30; i++) {
            this.items.push( "The Number is "+this.items.length );
        }

        console.log('Async operation has ended');
        infiniteScroll.complete();
        }, 500);
    }
    }

Here in the constructor we are initiating a for loop which loops for 30 times and pushes data to items array. Now When ever we scroll to the bottom of the list in this case the 30th item, infinite scroll triggers and calls the doInfinite method along with the event which specifies, from which index to get the data and push to items array.

when the async process is complete we should stop the infinite scroll process or else the loader will be shown infinitely. To stop the infinite scroll process , you should call the infinite scroll's complete() method from within the infinite handler.

that's it, check your browser to see if its working. Comment below if you have and queries or any doubt's regarding the above code implementation.

How to Implement Split Pane in Ionic 2 & ionic 3

2017-08-27T06:22:00.001-07:00

ionicframework SplitPane is a component that makes it possible to create multi-view layout.Similar to iPad apps, SplitPane allows UI elements, like Menus, to be displayed as the viewport increases.The new SplitPane component is perfect for apps that target desktops and large tablets. The SplitPane component is very easy to use and If the devices screen size is below a certain size, the SplitPane will collapse and the menu will become hidden again.

To use SplitPane, Simply add the <ion-split-pane> around your root component ie. <ion-nav>, and add the main attribute to it . In this example, we'll be using a sidemenu layout template.

Code to implement SplitPane in ionic 2, just copy and paste in app.html


<ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
   <ion-content>

       <!-- the content body -->
   </ion-content>
  </ion-menu>

  <!-- the main content -->
  <ion-nav [root]="root" #content></ion-nav>

add <ion-split-pane> component to wrap around the main <ion-nav> component like this.


<ion-split-pane>
  <!--  side menu  -->
  <ion-menu [content]="content">
    <ion-header>
      <ion-toolbar>
        <ion-title>Menu</ion-title>
      </ion-toolbar>
    </ion-header>
   <ion-content>

       <!-- content body -->
   </ion-content>
  </ion-menu>

  <!-- main content -->
  <ion-nav [root]="root" #content></ion-nav>
</ion-split-pane>

Now, add the main attribute to it so that Ionic knows what should go in the right part of the ionic split pane, ie the central component on the larger screens.


<ion-split-pane>

  <!-- ... -->

  <ion-nav [root]="root" #content main></ion-nav>

</ion-split-pane>

that's it, now if you play with your browser window by adjusting its layout size. you can see the side menu pane changing. By default, SplitPane will oly appear if the screen is larger than 768px. we can customize this, by using when input property on ion-split-pane component as shown below.


<ion-split-pane when="(min-width: 475px)">

  <!--  side menu  -->
  <ion-menu [content]="content">
  
  </ion-menu>

  <!-- main content -->
  <ion-nav [root]="root" #content main ></ion-nav>
</ion-split-pane>

Ionic SplitPane can alse be given some predefined media queries that can be used. they are "xs", "sm", "md", "lg", and "xl". these specify the minimum width required to split the ionic-pane.


<ion-split-pane when="xs">
...
</ion-split-pane>

here, xs : means min-width is 0px, this will make the split-pane to appear always. sm: means min-width is 576px, this will make the split-pane to appear when the min-width is 576px md: means min-width is 768px,this will show the split-pane when the min-width is 768px (default break point) lg: means min-width is 992px, this will make the split-pane to appearwhen the min-width is 992px xl: means min-width is 1200px, this will show the split-pane split-pane when the min-width is 1200px One can also pass boolean values to it so that, it will trigger SplitPane when the value or expression evaluates to true.


<ion-split-pane [when]="isSmall">
 
</ion-split-pane>

in .ts file above constructer add this


class MySplittPaneClass {

  public isSmall= true;
  constructor(){}

}

or, you can call a method like this


<ion-split-pane [when]="showSplitScreen()">

</ion-split-pane>

in respectedd .ts file add this,


class MySplittPaneClass {

  constructor(){}

  showSplitScreen(){

    if(conditionA){
      return true;
    } else {
      return false;
    }

  }

}

Disable ionSplitPane

to disable or enable split pane in ionic project, use input property "enable". it takes boolean as value. If the value is false, the split-pane will be disabled, ie. the side pane will never be displayed. the enable input property default's to true.

How to Pass Data from One Component to Another Component without Navigating to the Other Page.

2017-07-05T04:07:00.000-07:00

You May have alread Come or may Come Across situation when building your ionic mobile application, where you’ll probably want to fire an event in one of your component and have that event handled in another component. To tackle this Ionic 2 has provided us with "Events", which allows you to Subscribe to an event in one component, that have been Published in another component. Once the Event is Published it can be Subscribed on multiple Components. This Post explain's on how to publish an Event and also Subscribe to it. first, as usual create an ionic project

Copy and paste the below command


ionic start ExampleProject sidemenu --v2

it can be blank or tabs project your wish.. next, create a Component with name "changes" as follows.

Copy and paste the below command


ionic generate page changes

after the component is created, import the page in app.modle.ts


   import { ChangesPage } from '../pages/changes/changes';

next, add "ChangesPage" to NgModule's declarations as well as bootstrap's entryComponents. after modifying, app.module.ts will look something like this.


 import { BrowserModule } from '@angular/platform-browser';
 import { ErrorHandler, NgModule } from '@angular/core';
 import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';

 import { MyApp } from './app.component';
 import { HomePage } from '../pages/home/home';
 import { ListPage } from '../pages/list/list';
 import { ChangesPage } from '../pages/changes/changes';

 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';

 @NgModule({
   declarations: [
     MyApp,
     HomePage,
     ListPage,
     ChangesPage
   ],
   imports: [
     BrowserModule,
     IonicModule.forRoot(MyApp),
   ],
   bootstrap: [IonicApp],
   entryComponents: [
     MyApp,
     HomePage,
     ListPage,
     ChangesPage
   ],
   providers: [
     StatusBar,
     SplashScreen,
     {provide: ErrorHandler, useClass: IonicErrorHandler}
   ]
 })
 export class AppModule {}

Now open changes.html file in changes foder.

Copy and paste the below code


 <ion-content>
     <ion-list>
       <ion-item *ngFor="let item of list">
       <ion-grid>
       <ion-row>
          <ion-col col-2>
            {{item.id}}
         </ion-col>
         <ion-col col-8>
           {{item.name}}
         </ion-col>
       </ion-row>
  </ion-grid>       
       </ion-item>
     </ion-list>
</ion-content>

Open changes.ts file and paste the below ts code.

Copy and paste the below ts code


 import { Component } from '@angular/core';
 import { NavController, NavParams } from 'ionic-angular';
 import { Events } from 'ionic-angular';


 @Component({
   selector: 'page-changes',
   templateUrl: 'changes.html',
 })
 export class ChangesPage {
   list:any=[];
   constructor(public navCtrl: NavController, public navParams: NavParams,public events: Events) {
    this.list = [{name:"vinay",id:1},{name:"kumar",id:2},{name:"ravi",id:3},{name:"naveen",id:4}]
     this.events.subscribe('userObj',data => {
     let mydata = data;
     this.list.push(mydata);
     console.log("list",this.list)
     this.myalert(mydata);
   });
   }

   ionViewDidLoad() {
     console.log('ionViewDidLoad ChangesPage');
   }

   myalert(mydata){
    alert('Added new record with name '+mydata.name+' &with id '+mydata.id);
   }
  
 }

Since our work in changes Component is over lets head over to home page. open home.html and replace the html with below html code.

Copy and paste the below html code


 <ion-header>
   <ion-navbar>
     <button ion-button menuToggle>
       <ion-icon name="menu"></ion-icon>
     </button>
     <ion-title>Home</ion-title>
   </ion-navbar>
 </ion-header>

 <ion-content padding>
   <ion-item>
     <ion-label color="primary" floating>Name</ion-label>
     <ion-input [(ngModel)]="Obj.name" ></ion-input>
   </ion-item>

   <ion-item>
     <ion-label color="primary" floating>Id</ion-label>
     <ion-input [(ngModel)]="Obj.id" ></ion-input>
   </ion-item>

    <button ion-button full secondary  (click) = "addObject(Obj)">Add User</button>
    <page-changes></page-changes>
 </ion-content>

next replace code in you home.ts with the below code

Copy and paste the below ts code


 import { Component } from '@angular/core';
 import { NavController, NavParams } from 'ionic-angular';
 import { Events } from 'ionic-angular';
 import { ChangesPage } from '../changes/changes';

 @Component({
   selector: 'page-home',
   templateUrl: 'home.html'
 })
 export class HomePage {

   Obj:any = {name:"",id:0};
     constructor(public navCtrl: NavController, public navParams: NavParams,public events: Events) {
   }

   ionViewDidLoad() {
     console.log('ionViewDidLoad EventsPage');
   }

   addObject(Obj) {
     this.events.publish('userObj',Obj);
     this.Obj = {name:"",id:0}
   }

 }

run the project now, you can see that the record you entered in the input will be updates in other component.

Code Explanation

In home.html i've added "" element at the bottom, which is of ChangesPage Component's selector. what this does is it displays the ChangesPage view here in HomePage Component. to use Events we need to import Events class so, In home.ts i've impoerted the class ie:


  import {Events} from ‘ionic-angular‘;
  ...
  constructor(public events: Events) { }

"this.events.publish" is used to publish, so i've used "userObj" as publish name and send the data object "obj" when new record is entered when addObject() method is called.


   addObject(Obj) {
     this.events.publish('userObj',Obj);
     this.Obj = {name:"",id:0}
   }

since we have published the event all is left is to subscibe to the event where we want the changes to take place. so in this example i've subscribed to event in ChangesPage component to push the record in list object. "this.events.subscribe" is used to subscribe to an event.


   this.events.subscribe('userObj',data => {
     let mydata = data;
     this.list.push(mydata);
     console.log("list",this.list)
     this.myalert(mydata);
   });;

How to get Data From a Popover to Your Component using onDismiss

2017-07-02T23:08:00.000-07:00

Sometimes you come may acrosss a situation where we want to have more options on a particular page in ionic app, that's where ionic Popover come's into action, Popover is a dialog that appears on top of the current view. It can be used for anything, but generally it is used for showing options on top of present view if options does'nt fit in the navigation bar. In this post i'm going to take you through, on how to integrate basic Popover in your ionic application , pass data from present page to Popover and also capture data from callbacks when popover is dismissed.

Create a ionic tab project



ionic start myPopoverApp tabs --v2

Create a new ionic page


ionic generate page presentpop

Once the page is created, Open presentpop.html file in presentpop folder.

Copy and Paste Below html in presentpop.html file.


<ion-header>
  <ion-navbar>
      <button ion-button menuToggle>
      <ion-icon name="menu"></ion-icon>
    </button>
    <ion-title>Popover</ion-title>
    <ion-buttons end>
      <button ion-button icon-only (click)="presentPopover($event)">
        <ion-icon name="more"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>

<ion-content padding>
  <ion-list no-border>

    <ion-list-header>
      Classes
    </ion-list-header>

    <ion-item>
      <ion-icon name='planet' item-start></ion-icon>
      Astronomy
      <ion-note item-end>
      To the moon
      </ion-note>
    </ion-item>

    <ion-item>
      <ion-toggle checked="false"></ion-toggle>
      <ion-label>
        Muggle Studies
      </ion-label>
      <ion-icon name='body' item-start></ion-icon>
    </ion-item>

    <ion-item>
      <ion-icon name='leaf' item-start></ion-icon>
      Herbology
      <ion-icon name='rose' item-end color="secondary"></ion-icon>
    </ion-item>

    <ion-item>
      <ion-icon name='flask' item-start></ion-icon>
      Potions
      <ion-note item-end>
      Poisonous
      </ion-note>
    </ion-item>

    <ion-item>
      <ion-icon name='add-circle' item-start></ion-icon>
      Selected
      <ion-note item-end style="color: #00BCD4;font-weight: 600;">
      {{selectedData.title}}
      </ion-note>
    </ion-item>
  </ion-list>

</ion-content>

Now, Open presentpop.ts file in presentpop folder.

Copy and Paste Below code in presentpop.ts file.


 import { Component } from '@angular/core';
 import { NavController, NavParams} from 'ionic-angular';
 import { PopoverController } from 'ionic-angular';
 import { PopoverPage } from '../popover/popover';

 @Component({
   selector: 'page-presentpop',
   templateUrl: 'presentpop.html',
 })
 export class PresentpopPage {
   selectedData:any = {title:"None Selected",id:0};
   constructor(public navCtrl: NavController, public navParams: NavParams,public popoverCtrl: PopoverController) {
   }

   ionViewDidLoad() {
     console.log('ionViewDidLoad PresentpopPage');
   }

   presentPopover(ev) {
     let listData = [{title:"Settings",id:1},{title:"Logout",id:2},{title:"Profile",id:3},{title:"Help",id:4}]
     let popover = this.popoverCtrl.create(PopoverPage, { listData });

     popover.present({
       ev: ev
     });

     popover.onDidDismiss(data => {
      console.log(data);
      if(data!=null){
         this.selectedData = data
      }
    })
   }
  
 }

Now, lets create the popover template.

Create a new ionic page


ionic generate page popover

Once the popover page is created, Open popover.html file in popover folder.

Copy and Paste Below html in popover.html file.


<ion-content >
    <ion-list>

      <ion-item *ngFor="let item of items" (click)="dismiss(item)">
        <ion-label>{{item.title}}</ion-label> 
      </ion-item>
    </ion-list>
</ion-content>

Now, Open popover.ts file in popover folder.

Copy and Paste Below code in popover.ts file.


import { Component } from '@angular/core';
import { NavController, NavParams,ViewController } from 'ionic-angular';

@Component({
  selector: 'page-popover',
  templateUrl: 'popover.html',
})
export class PopoverPage {
   items:any;
  constructor(public navCtrl: NavController, public navParams: NavParams,public viewCtrl: ViewController) {
    this.items = this.navParams.get('listData');
    console.log(this.items)
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad PopoverPage');
  }


  dismiss(item) {
    let data = item;
    this.viewCtrl.dismiss(data);
  }
}

Above Code Explanation.

The presentPopover($event) method is the one which initializes the popover. the $event parameter helps in positioning the popover on the clicked area.


 this.popoverCtrl.create(PopoverPage, { listData })

the above line creates a popover using Popover.html and also sends "listData" data to the respective popover to display as list. once the data is send to "PopoverPage", the data ie "listData" is to be displayed as a list in popover. to do that we should first fetch the data that is sent from "PresentpopPage". this can be achieved by "NavParams", ionic NavParams catches helps in fetching the data from other pages from which the present page is launched. below code fetches the data from "PopoverPage".


    this.items = this.navParams.get('listData');

Once the Data is fetched the variable containing the fetched data, is used in *ngFor to loop data.


<ion-item *ngFor="let item of items" (click)="dismiss(item)">

the dismiss() method is used to close popover.


  dismiss(item) {
    let data = item;
    this.viewCtrl.dismiss(data);
  }

viewCtrl.dismiss method will close the popover, and also sends provided data as callback to the parent page from which the popover is launched. ie in our case "PresentpopPage". The data that is send as callback, should be fetched right?. onDidDismiss() function of Popover catches the callback once the popover is dismissed.


   popover.onDidDismiss(data => {
     console.log(data);
     if(data!=null){
        this.selectedData = data
     }
   })

the fetched data is assigned to "selectedData", you can see that the data changes when item is selected in popover on the browser.

How to Integrate DatePicker in Ionic 2

2017-07-02T07:29:00.002-07:00

Integrating DatePicker into an Ionic 2 application is fairly easy. this post cover's on how to integrate/implement DatePicker in an ionic 2 application. I assume you have already created an ionic project.

Run the Following Command to create a new page in ionic project


 ionic generate page datePicker

see the below image for reference.

Once the page is created, open the date-picker.ts file in date-picker folder.

Copy & Pase the Below code in your date-picker.ts file


import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';

/*
  Generated class for the DatePicker page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  selector: 'page-date-picker',
  templateUrl: 'date-picker.html'
})
export class DatePickerPage {
  event = { title:'',location:'',timeStarts: '',timeEnds: '',startDate:'',endDate:''}
  eventList:any=[];
  constructor(public navCtrl: NavController, public navParams: NavParams) {}

  ionViewDidLoad() {
    console.log('ionViewDidLoad DatePickerPage');
  }


  saveData(event){
     console.log("event",event)
     this.eventList.push(event)
  }

}

Copy & paste the below html code to date-picker.html


<!--
  Generated template for the DatePicker page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>datePicker</ion-title>
  </ion-navbar>

</ion-header>


<ion-content padding>
  <ion-list>
    <ion-item class="customBorder">
      <ion-input placeholder="Title"  [(ngModel)]="event.title"></ion-input>
    </ion-item>
    <ion-item class="customBorder">
      <ion-input placeholder="Location"  [(ngModel)]="event.location"></ion-input>
    </ion-item>
  </ion-list>

  <ion-list>
    <ion-item class="customBorder">
      <ion-label>Start Date</ion-label>
      <ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="event.startDate"></ion-datetime>
    </ion-item>


    <ion-item class="customBorder">
      <ion-label>Start Time</ion-label>
      <ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeStarts"></ion-datetime>
    </ion-item>

    <ion-item class="customBorder">
      <ion-label>End Date</ion-label>
      <ion-datetime displayFormat="MMM DD YYYY" [(ngModel)]="event.endDate"></ion-datetime>
    </ion-item>

   <ion-item class="customBorder">
      <ion-label>End Time</ion-label>
      <ion-datetime displayFormat="h:mm A" pickerFormat="h mm A" [(ngModel)]="event.timeEnds"></ion-datetime>
    </ion-item>
   
  </ion-list>

<button ion-button full (click)="saveData(event)">Save</button>

<ion-list>
  <div ion-item *ngFor="let item of eventList" (click)="itemSelected(item)" style="background-color: #dadada;">
 <ion-card >
  <ion-card-header>
    {{item.title}}
  </ion-card-header>
  <ion-card-content>
  {{item.location}}  
  </ion-card-content>
</ion-card>
    <ion-row no-padding>
      <ion-col>
        <button ion-button clear small color="danger" icon-start>
            Start Date: 
            {{item.startDate}}          
        </button>
      </ion-col>
      <ion-col text-center>
        <button ion-button clear small color="danger" icon-start>
            EndDate:        
           {{item.endDate}}
        </button>
      </ion-col>

    </ion-row>
  </div>  
</ion-list>

</ion-content>

Copy & Pase the Below css in your date-picker.scss file


.customBorder{
  border: 1px solid #7fabf7 !important;
  margin-top: 5px;
}

after the application is finished building, your app date-picker page view will look as follows.

Integrating MapBox GL JS map into an Ionic 2 Application

2017-03-08T08:07:00.001-08:00

Integrating MapBox GL JS map into an Ionic 2 application is similar to that of my previous blog post How to Integrate Mapbox GL JS maps with an Ionic application , but with small changes.

In this tutorial i am going to explain how to integrate mapbox gl js map into ionic 2 application.

Run the Following Command to create a new ionic project

 ionic start Mapbox-Gl-maps tabs --v2

After the Project is created, navigate to the project folder, in my case "Mapbox-Gl-maps" is the folder name. Since we want our app to work on Both ios and Android we should also add respective platform's to the ionic project.

Run the following commands to add the Android & iOS platforms


ionic platform add ios

ionic platform add android

Now, that you have added the platform's, lets add the required plugins into our project.

Add MapBox GL JS Library

To display the mapbox map in our ionic 2 application, we need to import some js files in to our application. we will use npm to import required js files.

Run the Following Command to install mapbox gl js library

 npm install --save-dev mapbox-gl

Add Geolocation Plugin

we also need geolocation plugin to get the exact location of the user.

Run the Following Command to install geolocation plugin

 cordova plugin add cordova-plugin-geolocation

Now, that you have installed the required plugin's, lets get to coding. view the app that you just created by just running the below server command.

 ionic serve

This will start a live-reload server for your project. When changes are made to any HTML, CSS, or JS files, the browser will automatically reload when the files are saved.

your app should look like this in the browser.

Add the Map code to homepage

Add the following code to home.ts after constructor



     ionViewDidEnter() {

       /*Initializing Map*/
      mapboxgl.accessToken = '<your mapbox gl js access token>';
      var map = new mapboxgl.Map({
      style: 'mapbox://styles/mapbox/light-v9',
      center: [-74.0066, 40.7135],
      zoom: 16,
      pitch: 80,
      minZoom: 7.5, //restrict map zoom - buildings not visible beyond 13
      maxZoom: 17,
      container: 'map'
    });
  
  }

now when your app is reloaded, you will get an error like " cannot find name mapboxgl ". that is because we have to imported mapboxgl js to our page.

Note: AccessToken is provided by mapbox once you signup @ https://www.mapbox.com.

copy and past the below code to your home.ts file

import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js'

your app should reload without any errors now. but to display map on your home page add the folloing code to your home.html file.

copy and past the below html code to your home.html file

<div id='map'></div>

Now you can see that the map is loaded, but the height and width need's a little modification right!

copy and past the below css code to your home.scss file

#map{
 width: 100%;
 height:100%;
}

reload your app and you can see that the map perfectly adjusts to the window now as shown below.

Display 3D Buildings

To display 3d building on your mapbox map add the following code below the map initialization code.

copy and past the below code to your home.ts file

    map.on('load', function() {
        map.addLayer({
            'id': '3d-buildings',
            'source': 'composite',
            'source-layer': 'building',
            'filter': ['==', 'extrude', 'true'],
            'type': 'fill-extrusion',
            'minzoom': 15,
            'paint': {
                'fill-extrusion-color': '#aaa',
                'fill-extrusion-height': {
                    'type': 'identity',
                    'property': 'height'
                },
                'fill-extrusion-base': {
                    'type': 'identity',
                    'property': 'min_height'
                },
                'fill-extrusion-opacity': .6
            }
        });
    });

after your app is reloaded you can see that the mapbox map loads map with 3d buildings as shown below.

Get Current Location

As you can see i'have given static coordinates to the map, to get the current location of the user/device we need the geolocation plugin that we have installed earlier and below given peace of code.

copy and past the below code to your home.ts file's ionViewDidEnter

   /*Initializing geolocation*/
  let options = {
    frequency: 3000,
    enableHighAccuracy: true
  };

  this.watch = Geolocation.watchPosition(options)
  .subscribe((position: Geoposition) => {
    console.log(position);
    this.Coordinates = position.coords;
    this.executemap()
  }); 

    });

modify the already written code, move the map Initializing code from ionViewDidEnter method to executemap method and also add the below variables within HomePage class.

   Coordinates: any;
   watch:any;

replace the map code to executemap method

 executemap(){

     /*Initializing Map*/
     mapboxgl.accessToken = 'pk.eyJ1IjoidmVua2F0aXRvbiIsImEiOiJjaXhsdGZ2amIwMDQwMnFxdDdoMTZ3NHlpIn0.X9Zmsqs7wCS30_RGxa_Kzw';
    var map = new mapboxgl.Map({
       style: 'mapbox://styles/mapbox/light-v9',
       center: [this.Coordinates.longitude, this.Coordinates.latitude],
       zoom: 16,
       pitch: 80,
       minZoom: 7.5, //restrict map zoom - buildings not visible beyond 13
       maxZoom: 17,
       container: 'map'
     });
      map.on('load', function() {
   map.addLayer({
    'id': '3d-buildings',
    'source': 'composite',
    'source-layer': 'building',
    'filter': ['==', 'extrude', 'true'],
    'type': 'fill-extrusion',
    'minzoom': 15,
    'paint': {
     'fill-extrusion-color': '#aaa',
     'fill-extrusion-height': {
      'type': 'identity',
      'property': 'height'
     },
     'fill-extrusion-base': {
      'type': 'identity',
      'property': 'min_height'
     },
     'fill-extrusion-opacity': .6
    }
   });
  });
 }

Once completed your app should load with your current location coordinates.

below is the complete code of the home.ts file

copy and past the below code if you have problem's loading map

import { Component } from '@angular/core';
import mapboxgl from 'mapbox-gl/dist/mapbox-gl.js'
import { NavController } from 'ionic-angular';
import { Geolocation, Geoposition} from 'ionic-native'; 

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  Coordinates: any;
  watch:any;
  constructor(public navCtrl: NavController) {

  }
  
    ionViewDidEnter() {
  
   /*Initializing geolocation*/
  let options = {
    frequency: 3000,
    enableHighAccuracy: true
  };

  this.watch = Geolocation.watchPosition(options)
  .subscribe((position: Geoposition) => {
    console.log(position);
    this.Coordinates = position.coords;
    this.executemap()
  }); 
   }
  

 executemap(){

     /*Initializing Map*/
     mapboxgl.accessToken = '<your mapbox gl js access token>';
    var map = new mapboxgl.Map({
       style: 'mapbox://styles/mapbox/light-v9',
       center: [this.Coordinates.longitude, this.Coordinates.latitude],
       zoom: 16,
       pitch: 80,
       minZoom: 7.5, //restrict map zoom - buildings not visible beyond 13
       maxZoom: 17,
       container: 'map'
     });
      map.on('load', function() {
   map.addLayer({
    'id': '3d-buildings',
    'source': 'composite',
    'source-layer': 'building',
    'filter': ['==', 'extrude', 'true'],
    'type': 'fill-extrusion',
    'minzoom': 15,
    'paint': {
     'fill-extrusion-color': '#aaa',
     'fill-extrusion-height': {
      'type': 'identity',
      'property': 'height'
     },
     'fill-extrusion-base': {
      'type': 'identity',
      'property': 'min_height'
     },
     'fill-extrusion-opacity': .6
    }
   });
  });
 }

}

How to Integrate Mapbox GL JS Maps with an Ionic Application

2017-02-02T08:31:00.001-08:00

Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from vector tiles and Mapbox styles.
Mapbox's GL JS allows us to add features like Tilt, Custom Map Styles, 3D Building's etc.
In this tutorial I am going to walk you through how to integrate the Mapbox GL JS Maps into an Ionic application. Create a New Ionic Application

First things first, let’s create a new Ionic project. For this project I'm going to create an ionic blank project.

Run the Following Command to create a new ionic project

 ionic start Mapbox-Gl-maps blank

Run the following commands to add the Android & iOS platforms


ionic platform add ios

ionic platform add android

Add Geolocation Plugin In this post, We are also going to Geolocate the users location on the map, so we need to install native Geolocation plugin.
Although Geolocating user works perfectly on browser, it may not work as expected on devices.

Run the following commands to add Geolocation plugin.

 cordova plugin add cordova-plugin-geolocation

Add required JS and Css files

Open index.html file in your project. include the following Mapbox GL JS & Css files just before cordova.js file.


<script src="https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.js"></script>
    <link href="https://api.tiles.mapbox.com/mapbox-gl-js/v0.32.1/mapbox-gl.css" rel="stylesheet"></link>

Create a Map in Your ionic Application Now we’re going to look at how to display map in our ionic application. To Display map on our ionic application, add the following code below ion-pane.

Copy and Paste the code given below

      <ion-header-bar class="bar-dark">
      <h1 class="title">MapBox Map</h1>
      </ion-header-bar>
      <ion-content scroll="false">
       <div id='map' style="width:{{mapwidth}}px; height:{{mapheight}}px"></div>
      </ion-content>

Now assigned it a controller in app.js file. Create controller in app.js with name "MapCtrl". This controller will be responsible for initialising the MapBox Map.

Add the following controller to your app.js file


.controller('MapCtrl', function($scope) {

})

Now that we have created our controller, lets add the code to display map on our ionic application.

Add the following code to your MapCtrl controller in app.js file


    $scope.mapwidth = screen.width;
    $scope.mapheight = screen.height;

    var lat;
    var lng;
 
 // executes onSuccess Callback
    var onSuccess = function(position) {
                console.log('Latitude: '  + position.coords.latitude + '\n' +
                            'Longitude: ' + position.coords.longitude + '\n' +
                            'Accuracy: '  + position.coords.accuracy )
    lat =  position.coords.latitude;  
    lng =  position.coords.longitude; 
 
     // accessToken is provided by mapbox once you signup @ https://www.mapbox.com 
   
  mapboxgl.accessToken = '< Your mapbox gl js Access Token here >';
  
  var map = new mapboxgl.Map({
   container: 'map', // container id
   style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
   center: [lng, lat], // starting position
   zoom: 15,
   pitch: 45 // starting zoom
  });
  
 map.on('load', function () {
  // Code which is executed after the map is loaded
 }) 

    };
 
    // executes onError Callback
 
    function onError(error) {
        aconsole.log('code: '    + error.code    + '\n' +
                     'message: ' + error.message + '\n');
    }
 
     // to get currentposition
 
     navigator.geolocation.getCurrentPosition(onSuccess, onError);

if you run your code using "ionic serve" command, you will notice that Mapbox map is already functional and is visible on your app.

Add a marker to the map

Well Map is centered to our current location, but we actually don't know the exact location on the map without any indicator right !.

let's add a marker on the map, to indicate our location. markers position uses the same coordinates that are used to center the map.

Add the following code to your MapCtrl controller, just after you map's initialization code. in map.on('load') function.

// Beolow code Add's a layer showing the places

   map.addLayer({
     "id": "places",
     "type": "symbol",
     "source": {
   "type": "geojson",
   "data": {
    "type": "FeatureCollection",
    "features": [{
     "type": "Feature",
     "geometry": {
      "type": "Point",
      "coordinates": [lng, lat]
     },
     "properties": {
      "title": "My Location",
      "description": "This is My Location!",
      "icon": "monument"
     }
    }]
   }
     },
     "layout": {
   "icon-image": "{icon}-15",
   "text-field": "{title}",
   "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
   "text-offset": [0, 0.6],
   "text-anchor": "top"
     }
    });

Add a PopUp to the map

Let's add a popup to the marker. we can do this by adding a click event to the map, when ever a click event is detected we will open a popup saying "This is My Location!".

Add the following code to your MapCtrl controller, just after you map.addLayer() code block.


  map.on('click', function (e) {
   console.log(e)
    var features = map.queryRenderedFeatures(e.point, { layers: ['places'] });
       if (!features.length) {
     return;
    }
   var popup = new mapboxgl.Popup()
    .setLngLat(features[0].geometry.coordinates)
    .setHTML(features[0].properties.description)
    .addTo(map);
    
  })

Now if you tap the marker you should see a little popup saying “This is My Location!”.

How to Display 3D Building on mapbox map?

If you want to view 3D building on mapbox map just add the below given code, inside map.on('load') function.

 map.addLayer({
        'id': '3d-buildings',
        'source': 'composite',
        'source-layer': 'building',
        'filter': ['==', 'extrude', 'true'],
        'type': 'fill-extrusion',
        'minzoom': 15,
        'paint': {
            'fill-extrusion-color': '#aaa',
            'fill-extrusion-height': {
                'type': 'identity',
                'property': 'height'
            },
            'fill-extrusion-base': {
                'type': 'identity',
                'property': 'min_height'
            },
            'fill-extrusion-opacity': .6
        }
    });

That's it guys, now you can view 3D buildings on your mapbox map .

Below is the full code of the controller that we just did, if you encounter any error's in the above process just copy and paste the below code on to your app.js file.

.controller('MapCtrl', function($scope) {

// executes onSuccess Callback
 $scope.mapwidth = screen.width;
 $scope.mapheight = screen.height;

    var lat;
    var lng;
    var onSuccess = function(position) {
                console.log('Latitude: '  + position.coords.latitude + '\n' +
                            'Longitude: ' + position.coords.longitude + '\n' +
                            'Accuracy: '  + position.coords.accuracy )
    lat =  position.coords.latitude;  
    lng =  position.coords.longitude; 
 
     // accessToken is provided by mapbox once you signup @ https://www.mapbox.com 
   
  mapboxgl.accessToken = '< Your mapbox gl js Access Token here >';
  var map = new mapboxgl.Map({
   container: 'map', // container id
   style: 'mapbox://styles/mapbox/streets-v9', //stylesheet location
   center: [lng, lat], // starting position
   zoom: 15,
   pitch: 45 // starting zoom
  });
  
 map.on('load', function () {
  map.addLayer({
     "id": "places",
     "type": "symbol",
     "source": {
   "type": "geojson",
   "data": {
    "type": "FeatureCollection",
    "features": [{
     "type": "Feature",
     "geometry": {
      "type": "Point",
      "coordinates": [lng, lat]
     },
     "properties": {
      "title": "My Location",
      "description": "This is My Location!",
      "icon": "monument"
     }
    }]
   }
     },
     "layout": {
   "icon-image": "{icon}-15",
   "text-field": "{title}",
   "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"],
   "text-offset": [0, 0.6],
   "text-anchor": "top"
     }
    });
    
  map.addLayer({
   'id': '3d-buildings',
   'source': 'composite',
   'source-layer': 'building',
   'filter': ['==', 'extrude', 'true'],
   'type': 'fill-extrusion',
   'minzoom': 15,
   'paint': {
    'fill-extrusion-color': '#aaa',
    'fill-extrusion-height': {
     'type': 'identity',
     'property': 'height'
    },
    'fill-extrusion-base': {
     'type': 'identity',
     'property': 'min_height'
    },
    'fill-extrusion-opacity': .6
   }
  });
     
  map.on('click', function (e) {
   console.log(e)
    var features = map.queryRenderedFeatures(e.point, { layers: ['places'] });
       if (!features.length) {
     return;
    }
   var popup = new mapboxgl.Popup()
    .setLngLat(features[0].geometry.coordinates)
    .setHTML(features[0].properties.description)
    .addTo(map);
    
  })  

 
 }) 

    };
 
    // executes onError Callback
 
    function onError(error) {
        aconsole.log('code: '    + error.code    + '\n' +
                     'message: ' + error.message + '\n');
    }
 
     // to get currentposition
 
     navigator.geolocation.getCurrentPosition(onSuccess, onError);

})

PS: Don't forget to add the mapbox Access Token, without which the map wont be displayed.

How to Create a project in ionic framework 1

2017-01-01T05:29:00.000-08:00

Ionic is an HTML5 mobile application development framework targeted at building hybrid mobile apps.
Building Apps to multiple mobile platform's is very easy by IonicFramework.
In this post i'm going to explaing you, how to Create a project in IonicFramework.

First, If you haven't already have the required environment in your system, for building a project on Ionic. please follow the below steps to setup the environment in your system.

install Node.js from this link : http://nodejs.org/
Then, install the latest Cordova and Ionic command-line tools in your terminal using the following command
```
npm install -g cordova ionic
```

Now, you can create the ionic project by typing the below command in your system Command-line interface.

ionic start appName tabs

Where "appName" is your projects name and "tabs" tells ionic to create project in tabs style.

IonicFramework offers three ready-made app templates, below is the command to create each app template.

To Create Blank Template, use the following command.

ionic start appName blank

If you prefer sidemenu, use this command.

ionic start appName sidemenu

Execute any of the above mentioned command's & Wait for the command-line to finish the project creation process.

Once the CLI is finished with creation of project, navigate to the project folder using command-line. ie. cd appName

Now, run the following command to run the project in browser.

ionic serve

How to Unlock Samsung Android phone with Broken Screen and if Display not working?

2016-01-16T19:15:00.001-08:00

Recently my Samsung Galaxy S3 phone screen got Cracked. The phone is working fine but the Display is not Working ie. it's not displaying anything, I tried few method's by connecting the phone to my PC to backup the data but all my tries didn't work.

With a bit of Luck and with some online knowledge i had successfully backed-up my data to my PC, Below is the process which i used to backup data from my Screen cracked Samsung phone.

Instructions:

Note:: The phone should have access to internet and you should have a Samsung account linked with the phone. (That's it for the "Luck" Part).

Launch your Browser and goto " https://findmymobile.samsung.com " .

Now, sign in to the site with the help of your Samsung Account Credentials that you used to register your device.

You will be provided with the List of Devices that are connected/linked with the Account as follow's.

Select the Respective device which you want to unlock.

Note:: On the top left of the screen you will have the Registered device icon, under which you should have the Device status showing "Connection" and "Remote controls" as "ON".

To the left side of the site, you can see an option as " Unlock my Device" select it.

Now,Click on the "Unlock" button, it may take sometime for your Device to get unlocked.

If all goes well, you should be able to hear screen unlock sound ( which i heard when my phone got unlocked :-0 ) and you will see the above message as "The function has been executed successfully".
Now connect your Device to the PC and backup all the data.

Note:: You can also use this method to unlock your Samsung device after too many pattern attempts.

How to Remove GRUB Boot Loader, If your Windows Recovery CD is NOT showing Command Prompt Option.

2015-12-28T08:03:00.000-08:00

Recently i'have tried to uninstall GRUB from my Windows 7 Dual Boot. My Laptop didn't came with a Windows recovery Disk, but instead i was provided with an option to make Recovery CD from the inbuilt software provided by the manufacturer.

I have inserted the Recovery CD in the CD Drive, and booted from it. But it doesn't show the option "Command Prompt" any where. All i can see is the Custom UI provided by manufacturer to recover my Windows.

Note: If your see "Command Prompt" as one of the option when your boot from your Windows Recovery CD, then follow the step's on this article "How to remove GRUB from Windows Dual Boot" to remove GRUB from your PC.

So, after looking for solution's over the internet. Below is the method, that i used to remove GRUB from my Windows PC.

Recovery Console is very useful tool for fixing problems in windows, it can be accessed while booting window's. below are the step's on how to access recovery console and to remove GRUB using recover console.

Restart the Computer
After the Startup message appear's, Press the F8 key ( F8, key should be pressed before windows starts)
Now, you will be taken to black screen with option as "Repair your computer", select the option and press enter.

It will Load a Custom Recovery program ie. The Recovery tool provided by windows.
Now, Click Next after Selecting your Keyboard layout(input method) and language preferences.
Next, Choose your Username and Password and click on OK.

Note :: It should be administrator username and you should have access to the password. The selected account should have administrative rights.

A window, listing several repair & recovery option's should be visible now as below.

Choose option "Command Prompt" at the bottom of the window.
Now, on command prompt type this command bootrec.exe /fixmbr as shown below and press Enter ↵.

You will be provided with a response as " The Operation Completed Succesfully " by the command prompt.
It's Done, exit command prompt and Restart your PC by selecting "restart", it should boot in windows now.

If this article is of any help to you, please leave a comment below.

How to Delete or Remove Cookies in Google Chrome browser.

2015-03-28T00:38:00.000-07:00

Browser Cookies are small files stored inside your browser by websites to make your user experience more fluent and also may collect some data from your browser like your browsing habits etc. using the tracking cookies.

Although cookies are stored on your PC by the websites, we can easily remove them by the tools that are built inside the browser's.

In this post, we will see how to delete the cookies that are stored in your Google Chrome browser.

Follow this simple steps to delete the cookies in your browser.

STEPS:

Open Google Chrome browser :

Open Google Chrome browser on your PC.

Go to "More Tools":

You can find this option by Clicking on the Button on the Top Right of the Browser.

Go to "Clear browsing data":

After going to More Tools, Click on the Clear browsing data... option. You can also directly go to this by pressing Ctrl+shift+Del on your keyboard.

Click on Content Settings:

At the bottom left of the Clear browsing data pop-up, you will see an option called "content settings". click on the Content settings option.

All cookies and site data:

In the Content settings pop-up, under the cookies section click on the "All cookies and site data..." Button.

Remove Individual Cookies:

In the cookies and site data pop-up, you will see all the cookies that are stored in your Google chrome browser. You can delete every individual cookie by selecting your desired cookie and by clicking on the x on the right side of the selected cookie section.

Remove all the Cookies:

You can delete all the cookies that are stored in your browser by just clicking on the "Remove all" button on the top right of the Cookies and site data pop-up.

Note: Before Deleting all the cookies from your Browser, check to see if any of the cookies are required. deleting the cookies may impact your browsing behaviour.

Video Tutorial on how to delete cookies on Google Chrome Browser:

How to Delete History in Google Chrome Browser

2015-03-22T23:31:00.003-07:00

Browser History is one place where we and also other's can see what we are doing, and which sites we are surfing.
If you dont want other's to see your browsing site's info, it's better to Browse in Incognito mode or Delete the history after your browsing session is over.
If you are using Google Chrome browser, You can clear the history by following the below step's.

Open Google Chrome browser:

Open Google Chrome browser on your computer.

Go to "More Tools":

You can find this option by Clicking on the Button on the Top Right of the Browser.

Go to "Clear browsing data":

After going to More Tools, Click on the Clear browsing data... option. You can also directly go to this by pressing Ctrl+shift+Del on your keyboard.

Specify Time Period to Delete:

When the "Clear browsing data" option is clicked, a pop up appears on top of Setting's tab. Specify the Time period, ranging from hour, day, week and the beginning of time.

Select what to Delete :

Below the Time Period option, you will see some more option's which is of your own interest to select or not to.Here are the options.

Browsing History
Download History
Cookies and other site and plug-in data
Cached images and files
Passwords
Autofill form data
Hosted app data
Content licenses

Note:: Selecting all the options will erase everything including app data, content licenses etc from your browser. Once Deleted the Data cannot be retrieved,So before proceeding forward double check your option's.

Select "Clear Browsing Data":

After choosing the required option's, click on the "Clear Browsing Data" Button on the Bottom right of the pop-up.

Below is a video tutorial on How to Clear History on Google chrome browser.