ionic: Icons

Icons collection:

http://ionicframework.com/docs/ionicons/

Example:

<ion-tab [root]="favoritesPage" tabTitle="Favorites" tabIcon="star"></ion-tab>

ionic: Navigate from one page to another passing parameters

One page

onepage.ts

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

import { NavController } from 'ionic-angular';

import { UserPage } from './otherpage';

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

constructor (private navController: NavController) {

}

onLoad(someParameter: string) {
this.navController.push(OtherPage, {parameter1: someParameter});
}
}

onepage.html

<ion-header>

  <ion-navbar>
    <ion-title>One Page</ion-title>
  </ion-navbar>

</ion-header>

<ion-content padding>
<button ion-button (click)="onLoad('Value1')"> Value 1 </button>
<hr>
<button ion-button (click)="onLoad('Value2')"> Value 2 </button>
</ion-content>

Other page

otherpage.ts

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

import { NavParams } from 'ionic-angular';

@Component({
selector: 'page-other',
templateUrl: 'other.html'
})
export class OtherPage {
parameter: string;

constructor (private navParams: NavParams) {

}

ngOnInit() {
this.name = this.navParams.get('parameter1');
}
}

otherpage.html

<ion-header>
<ion-navbar>
<ion-title>{{parameter}}</ion-title>
</ion-navbar>
</ion-header>

<ion-content padding>
<p>{{parameter}}</p>
</ion-content>

Add onepage and other page to app.module.ts.

ionic: Add a page

Automatic way

1) You can do it “automatically”
ionic generate page users
2) Modify app.module.ts and add your page to declarations and entryComponents don’t forget to add the import.
3) Link from another existing page, don’t forget to include the import here as well.

Manual way

0) Create a folder (if needed)
1) Create a file <custom_page>.ts

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

@Component({
   selector: 'page-custom',
   templateUrl: 'custom.html';
})
export class CustomPage {

}
2) Create a <custom>.html

<ion-header>
   <ion-navbar>
      <ion-title>My title</ion-title>
   </ion-navbar>
</ion-header>

<ion-content>
</ion-content>

2) Modify app.module.ts and add your page to declarations and entryComponents don’t forget to add the import.
4) Link from another existing page, don’t forget to include the import here as well.

ionic: Start

0) Download node
1) npm install ionic cordova -g (-g install globally)
3) Create project
      ionic start <project_name> (blank)

blank if you want no template

4) cordova platform add ios
5) cordova platform add android
6) cordova build
7) Open project on browser, keeps track of changes and rebuilds / re starts the app
      ionic serve
8) Add platform
codova platform add ios (or android)