Technotip.com | Programming Video Tutorials

Remove Element On Click: Ionic 2

This is a basic example wherein we have a list of company names and once the user clicks on individual name, that name gets removed from the list. We’ve not included the http calls and database in this example to keep things simple and minimalistic.

Remove Element On Click: Ionic 2

[youtube https://www.youtube.com/watch?v=ZkHQXqFa0I0]

YouTube Link: https://www.youtube.com/watch?v=ZkHQXqFa0I0 [Watch the Video In Full Screen.]

src/pages/home/home.ts

import { Component } from '@angular/core';
import { NavController } from 'ionic-angular';
 
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
companies: Array< {}>;
  constructor(public navCtrl: NavController) {
    this.companies = [
      {name: 'Microsoft', code: 1},
      {name: 'Apple', code: 2},
      {name: 'Google', code: 3},
      {name: 'Oracle', code: 4},
      {name: 'IBM', code: 5}
    ];
  }
  remove(no){
    (this.companies).splice(no, 1);
  };
}

Here we have an array variable called companies, which has 5 company names in object format. We also have a method called remove which takes 1 parameter. This parameter is the index number of the item being clicked by the user. Once we get this index number we make use of JavaScript’s splice() method and remove the element from the array. Splice takes 2 arguments, the first one being the index(or the position) of the element to be removed and the second argument is the number of elements to be removed from position of the index received.

src/pages/home/home.html

< ion-list no-lines>
  < ion-item *ngFor="let company of companies; 
                     let i = index;" 
             (click)="remove(i);">
     {{company.name}}
  < /ion-item>
< /ion-list>

Here we assign index value to a variable i. We then pass this value of i to remove method once the user clicks on an item. i.e., we pass the index value of the item being clicked by the user, to the remove method.

Real-time Applications
In real-time applications we’ll pass a unique id of the clicked element to the remove method, which is then passed on to some http calls, which removes the item from the database(usually) and if the remove operation is successful we’ll remove the item from the User Interface using JavaScripts Splice() method. And if the remove operation fails, we’ll display appropriate message to the user.

ngIf, index, first, last: Ionic 2

Today lets see how we can track the index number of the loop. i.e., the number of completed iterations in a loop. We shall also learn *ngIf conditional operator and its usage.

Related Read:
Basics of Page Component: Ionic 2

*ngIf Conditional Operator

ngIf is called conditional operator because it operates based on conditions i.e., if the conditional statement it has been assigned is true, then the node it is attached to will be rendered or else it’ll not. *ngIf takes boolean values.

Example: If *ngIf is attached to a div and the condition is false, then the div it has been attached to won’t be added to the DOM. If the condition is true, then div is added to the DOM.

Video Tutorial: ngIf, index, first, last: Ionic 2

[youtube https://www.youtube.com/watch?v=Cb4a-oh_yXM]

YouTube Link: https://www.youtube.com/watch?v=Cb4a-oh_yXM [Watch the Video In Full Screen.]

index, first, last
While we are looping through some array elements inside template file we can know the index of the loop using index variable. We can use ngIf and do something at the first iteration using first variable and similarly we can know the last iteration using last variable.

Source Code: src/pages/home/home.ts

<ion-list no-lines>
  <ion-item *ngFor="let company of companies; 
                     let i = index; 
                     let lst = last; 
                     let fst = first;">
    {{i+1}}. {{company.name}}  
    <span *ngIf="lst"> - Am last!</span>
    <span *ngIf="fst"> - Am first</span>
  </ion-item>
</ion-list>

inside *ngFor we have initiated and assigned index value to variable i, last index value to variable lst and first index value to variable fst.

Inside ion-item we are using *ngIf to check if the iteration is first iteration, if so add ‘Am first’ message besides the first list item i.e., beside Microsoft. We also check if the iteration is a last iteration, if so we display ‘Am last!’ message beside the last item in the list i.e., beside IBM.

Output:

Microsoft – Am first
Apple
Google
Oracle
IBM – Am last!

Basics of Page Component: Ionic 2

In this video tutorial we shall learn some basics of a page component.

Topics Covered
1. Decorators – little bit
2. Class
3. Template File – ionic list items, For loop in ionic template.
4. Variables in Ionic – data type(number, string, Array, any)
5. Importing libraries and using it in our project.
6. Setting home page of our project.

Related Read:
Project Structure: Ionic 2

Video Tutorial: Basics of Page Component: Ionic 2

[youtube https://www.youtube.com/watch?v=Tb4k00ALHeA]

YouTube Link: https://www.youtube.com/watch?v=Tb4k00ALHeA [Watch the Video In Full Screen.]

In this tutorial we are using a blank template and setting home.html as our home page.

inside src/app/app.component.ts file
We import the HomePage page

import { HomePage } from '../pages/home/home';

next inside the class definition we assign this HomePage as root file for our application

rootPage = HomePage;

Full Source Code src/app/app.component.ts

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { HomePage } from '../pages/home/home';


@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage = HomePage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

Important: Do NOT forget to import all your classes in app.module.ts file, also specify its class name inside declarations and entryComponents section.

src/app/app.module.ts

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: []
})
export class AppModule {}

Now lets take a look at our HomePage component, which is present inside pages directory and Home folder
src/pages/home/home.ts

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

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

}

Here we have imported two important library files. Component is used to configure the decorator and NavController is used for navigation purposes. In this tutorial we’re not using Navigation, but we’ll make use of it in our next video tutorial.

Decorators
There are 3 types on decorators:
1. Component
2. Pipe
3. Directive

I’ll explain each one of them separately in other videos.

Component
In today’s tutorial we’ve a component and it has a selector and a templateUrl. Selector name is used to inject an element or an attribute into the DOM. TemplateUrl tells the class about its associated template file. Components(Decorative) are placed just above the class definition.

Class
A class is a blueprint of an object. This is where we write our logic. It’ll usually have some properties(public or private or protected) and some methods.

In Ionic 2 class, you might have seen export keyword – which means we can import this file in some other class file and make use of its service or output.

variables
In TypeScript variables are typed – which means, variables have data type.
var1: any; Means variable var1 can take value of any data type.
var1: string; Here var1 can be assigned with string value only.
var1: number; as you might have already guessed, var1 takes number value.
var1: Array< {}>; var1 takes an array as its value.
var1: boolean; var1 takes value true or false.

Wrong initialization
var1: number = ‘Satish’;
var1: string = 1;

Correct initialization
var1: number = 1;
var1: string = ‘Satish’;

src/pages/home.ts

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

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
companies: Array< {name: string, code: number}>;
  constructor(public navCtrl: NavController) {
    this.companies = [
      {name: 'Microsoft', code: 1},
      {name: 'Apple', code: 2},
      {name: 'Google', code: 3},
      {name: 'Oracle', code: 4},
      {name: 'IBM', code: 5}
    ];
  }
}

Here we have an array called companies – which has a list of company names like Microsoft, Apple, Google, Oracle, IBM. Each of this is stored as an individual element inside the array.

Using ngFor loop we can iterate through this array and display the company names.

*ngFor loop

<p *ngFor="let company of companies">
</p>

In Ionic 2, we make use of *ngFor for for loop. We declare a new variable company and reference individual elements of the array present inside companies array.

src/pages/home/home.html

<ion-list>  
  <ion-item *ngFor="let company of companies">  
    {{company.name}}  
  </ion-item>  
</ion-list>

Here I’m making use of ion-list tag and ion-item tags to display the company names.

If we want to remove the default lines which come along with the ion-list items then we can add no-lines styling to ion-list tag.

<ion-list no-lines>  
  <ion-item *ngFor="let company of companies">  
    {{company.name}}  
  </ion-item>  
</ion-list>

In next video tutorial lets learn how to navigate to other pages using Ionic 2 routing.

Project Structure: Ionic 2

Before we move forward with coding, it’s important to know some of the files and folders present inside our ionic 2 project. Since you’re a beginner you might find this video to be confusing and fast paced. But let me assure you, this won’t affect your learning of Ionic 2. How much ever time you spend in understanding the anatomy of an ionic 2 cordova project, you won’t understand it properly until we start coding and utilizing these files and folders for our application needs.

I would advice you to take down whatever you understand in this video in a note-book and keep it for your future reference. It would be handy soon.

hooks: this is not for beginners, so will skip that for now.
node_modules: This is where core libraries like angular2, ionic2, array manipulation, regEx etc are present. We import these libraries in our ionic 2 project and utilize their services.
plugins: Here Ionic 2 project specific cordova plugins are stored. There are many plugins which ionic-native provides which we can make use of for our application needs. For example: If you need to use your devices camera functionality, there is a cordova plugin for that which you can use in your ionic 2 project.
resources: Here we store icon and splashscreen files of our app.
src: is where we can find raw, uncompiled code. Inside src we have our page components(src/pages), application root components(src/app), static files(src/assets) etc, which gets transpiled, compiled, minified and stored inside www folder during the build process. If you edit any file inside www folder, it’ll simply be overwritten during the build process.

Anatomy of an Ionic 2 Project

[youtube https://www.youtube.com/watch?v=JpB3FafevH4]

YouTube Link: https://www.youtube.com/watch?v=JpB3FafevH4 [Watch the Video In Full Screen.]

src/assets: We store static resource files in this folder. Example: Image files which we use for our project.

src/pages: For every page you create you’ll add another folder in this directory. For example, if you want to create a login page, you’ll need to create a folder called login(or any other unique name) and then store the login template, login class definition file and login style definition file inside that folder. Ionic CLI can be used to automate this process and I’ll show you how to do it in upcoming video tutorials.

src/theme: This folder has style definition which is applicable for the entire application. We can simply change the value of some variables and customize the look and feel of our application. This will also be explained in a separate video tutorial in coming days.

src/app: This folder is where the ‘root components’ of our application are located. main.dev.ts and main.prod.ts files are responsible for the bootstrapping process of the application. main.dev.ts is active in development mode and main.prod.ts should be used in production environment.

src/app/app.module.ts is the entry point for the app.

import { NgModule } from '@angular/core';
import { IonicApp, IonicModule } from 'ionic-angular';
import { MyApp } from './app.component';
import { AboutPage } from '../pages/about/about';
import { ContactPage } from '../pages/contact/contact';
import { HomePage } from '../pages/home/home';
import { TabsPage } from '../pages/tabs/tabs';

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  imports: [
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage
  ],
  providers: []
})
export class AppModule {}

This essentially controls the work flow of rest of the application.

Using NgModule of angular core library we manage the modules in our ionic 2 applications. All the components and data services we create must be imported in this file and its class name must be specified inside the declarations and entryComponents section. If we have any data service providers we must specify it inside providers block. This file also points to the first component of our Ionic 2 application i.e., MyApp class of src/app/app.component.ts

src/app/app.component.ts is the first component of Ionic 2 application

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar, Splashscreen } from 'ionic-native';

import { TabsPage } from '../pages/tabs/tabs';


@Component({
  template: `<ion-nav [root]="rootPage"></ion-nav>`
})
export class MyApp {
  rootPage = TabsPage;

  constructor(platform: Platform) {
    platform.ready().then(() => {
      // Okay, so the platform is ready and our plugins are available.
      // Here you can do any higher level native things you might need.
      StatusBar.styleDefault();
      Splashscreen.hide();
    });
  }
}

This is the first component which gets loaded in our application. It’s simply an empty shell for other components to load into.

One important thing to note here is the rootPage. Since this is a project which uses tabs template, it has automatically assigned the rootPage to the TabsPage present in our src/pages/tabs/tabs.ts page.

src/pages/tabs/tabs.ts component

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

import { HomePage } from '../home/home';
import { AboutPage } from '../about/about';
import { ContactPage } from '../contact/contact';

@Component({
  templateUrl: 'tabs.html'
})
export class TabsPage {
  // this tells the tabs component which Pages
  // should be each tab's root Page
  tab1Root: any = HomePage;
  tab2Root: any = AboutPage;
  tab3Root: any = ContactPage;

  constructor() {

  }
}

Here we are importing 3 pages HomePage, AboutPage and ContactPage and then assigning it to each tab.

src/pages/tabs/tabs.html template file

<ion-tabs>
  <ion-tab [root]="tab1Root" tabTitle="Home" tabIcon="home"></ion-tab>
  <ion-tab [root]="tab2Root" tabTitle="About" tabIcon="information-circle"></ion-tab>
  <ion-tab [root]="tab3Root" tabTitle="Contact" tabIcon="contacts"></ion-tab>
</ion-tabs>

Which is then assigned as root pages on each tab. This is to maintain the sanity of navigation history. We’ll discuss about navigation in Ionic 2 in a separate video shortly.

src/index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
  <meta charset="UTF-8"/>
  <title>Ionic App</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0, 
        minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <meta name="format-detection" content="telephone=no"/>
  <meta name="msapplication-tap-highlight" content="no"/>
 
  <link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico"/>
  <link rel="manifest" href="manifest.json"/>
  <meta name="theme-color" content="#4e8ef7"/>
 
  <!-- cordova.js required for cordova apps -->
  <script src="cordova.js"></script>
 
  <!-- un-comment this code to enable service worker
  <script>
    if ('serviceWorker' in navigator) {
      navigator.serviceWorker.register('service-worker.js')
        .then(() => console.log('service worker installed'))
        .catch(err => console.log('Error', err));
    }
  -->
 
  <link href="build/main.css" rel="stylesheet"/>
 
</head>
<body>
 
  <!-- Ionic's root component and where the app will load -->
  <ion -app></ion>
 
  <!-- The polyfills js is generated during the build process -->
  <script src="build/polyfills.js"></script>
 
  <!-- The bundle js is generated during the build process -->
  <script src="build/main.js"></script>
 
</body>
</html>

This file has some minimal configurations and links to some JavaScript library files. Ionic 2 application looks for ion-app tag present inside the body of index.html to kick-start the visuals of the project.

config.xml (located at the root of the project)

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<widget id="com.technotip.radio" version="0.0.1" 
        xmlns="http://www.w3.org/ns/widgets" 
        xmlns:cdv="http://cordova.apache.org/ns/1.0">
  <name>Radio</name>
  <description>Internet radio streaming live ..</description>
  <author email="[email protected]" href="https://technotip.com/">SATISH</author>
 .
 .
 .
 .
</widget>

Using this file we can configure the display mode and other such things of the device for our application. We can also set the app name, description. author email id, name and the URL. We can set the id of the application which’ll be shown in the URL of the playstore once your app has been uploaded to the playstore. We have a radio application in the playstore which has an id com.technotip.radio You can visit our Radio Application and check the URL.

package.json (located at the root of our application)
This file has the list of our dependencies and plugins our application is using. It gets updated automatically when we install new plugins.

Important: Keep in mind that, whenever you are using any page component or data services in any of your project files, make sure to import it first. Also make sure to register its existence by importing it in src/app/app.module.ts file and listing it in specific sections which it belongs to.