Building a Simple Wallpaper App with Ionic 2 and Angular 2 TypeScript Part III - Adding Slides To Preview Images

In part 2 we created a simple gallery using Ionic 2 grid component to show a list of our wallpaper images. Now in our third post we will add sliding feature to our application. When user taps on an image's thumbnail, it will open as full screen and our users will be able to navigate between images by sliding left and right.

Let's add our slide page first with this command:

ionic g page slide 

After command finished executing, a slide folder and our slide page's files will be generated:


Delete contents of generated files and copy the following code into slide.html:

<ion-row class="slideRow">
  <ion-col class="slideColumn">
    <button ion-button class="slideBackButton" light small outline (click)="goBack()">Back</button>
  </ion-col>
</ion-row>
<ion-slides #mySlider [options]="mySlideOptions">
  <ion-slide *ngFor="let slide of slides">
    <img [src]="slide.image.path" class="slide-image" />
  </ion-slide>
</ion-slides>

Copy the below code into slide.ts:

import { Component, OnInit, ViewChild, AfterViewInit, } from '@angular/core';
import { NavController, NavParams, Platform } from 'ionic-angular';
import { Slides } from 'ionic-angular';
import { Image } from '../../app/image';
import { IMAGES } from '../../app/Images';
import { AlertController } from 'ionic-angular';

/*
  Generated class for the SlidePage page.

  See http://ionicframework.com/docs/v2/components/#navigation for more info on
  Ionic pages and navigation.
*/
@Component({
  templateUrl: 'slide.html',
})
export class SlidePage {
  plugins: any;
  image: Image;
  slides = [];
  mySlideOptions = {
    loop: true
  };
  @ViewChild('mySlider') slider: Slides;

  constructor(public alertCtrl: AlertController, private navCtrl: NavController, private platform: Platform, params: NavParams) {
    this.image = params.get("selectedImage");
    let slideCount = 0;
    for (var i = this.image.id; i < IMAGES.length; i++) {
      this.slides[slideCount] = { image: IMAGES[i] };
      slideCount++;
    }
    for (var j = 0; j < this.image.id; j++) {
      this.slides[slideCount] = { image: IMAGES[j] };
      slideCount++;
    }
  }
  goBack() {
    this.navCtrl.pop();
  }
}

And here is our slide.scss:

ion-slide {
    background-color: #000000;
}
ion-col.slideColumn{
    background-color: #000000;
}
ion-row.slideRow{
    background-color: #000000;;
    height: 7%;
}
ion-slide img {
    height: auto !important;
    width: auto !important;
}

Now we completed our slide feature. When you open the application and tap on an image, our second page should open and look like this:

Read More

Building a Simple Wallpaper App with Ionic 2 and Angular 2 TypeScript Part II - Creating an Image Gallery

In this post we will create a simple image gallery to preview our wallpapers to our users. It will look like this when finished:

First we will start with cleaning up our application which we created at first post. We will not use about, contact and tabs pages so let's delete about, contact and tabs folders under pages folder, leaving only home page folder:


Delete AboutPage, ContactPage and TabsPage references from app.module.ts. Final version should look like this:

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 { }

Remove TabsPage reference from app.component.cs and import HomePage. Set rootPage to HomePage:

import { Component } from '@angular/core';
import { Platform } from 'ionic-angular';
import { StatusBar } 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();
    });
  }
}

We finally removed unnecessary pages in our application. Now we will add some images to our application. In an Ionic application images and other sources are put under src/assets folder. Let's create an img folder under src/assets folder and put some images inside it:


Create an image.ts file under app folder and define and Image class inside it:

export class Image {
  id: number;
  path: string;
}

Create an images.ts file under app folder and define an Image array which contains our image path and id values:

import { Image } from "./image";

export const IMAGES: Image[] = [
    { id: 0, path: "assets/img/image0.jpg"},
    { id: 1, path: "assets/img/image1.jpg"},    
    { id: 2, path: "assets/img/image2.jpg"},    
    { id: 3, path: "assets/img/image3.jpg"},    
    { id: 4, path: "assets/img/image4.jpg"},    
    { id: 5, path: "assets/img/image5.jpg"},    
    { id: 6, path: "assets/img/image6.jpg"},    
    { id: 7, path: "assets/img/image7.jpg"},    
    { id: 8, path: "assets/img/image8.jpg"},    
    { id: 9, path: "assets/img/image9.jpg"},    
    { id: 10, path: "assets/img/image10.jpg"}
];

Create an image.service.ts file under app folder and implement ImageService to return our images:

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

import { Image } from './Image';
import { IMAGES } from './Images';

@Injectable()
export class ImageService {

    getImages(): Promise<Image[]> {
        return Promise.resolve(IMAGES);
    }
}

Put an ion-grid in home.html and bind each of our images to grid cells using Angular 2's *ngFor directive. We will show three images at each row so we will use ion-row's wrap attribute and width-33 as relative width. You can change width to show different numbers of images, for example width-50 to show two images in each row or width-25 for four images etc:

<ion-content>
    <ion-grid>
      <ion-row wrap>
        <ion-col width-33 *ngFor="let image of images">
          <img [src]="image.path">
        </ion-col>
      </ion-row>
    </ion-grid>
</ion-content>

Import ImageService in home.ts to use it. Specify it as a provider for HomePage component and get images by calling ImageService and set return value to component's images property: 

import { Component, ViewChild, OnInit } from '@angular/core';
import { NavController } from 'ionic-angular';
import { SlidePage } from '../slide/slide';
import {Image} from '../../image';
import { ImageService } from '../../image.service';

@Component({
  templateUrl: 'build/pages/home/home.html',
  providers: [ImageService]
})

export class HomePage implements OnInit {
  images: Image[];
  constructor(public navCtrl: NavController, private imageService: ImageService) {
  }
  ngOnInit(): void {
    this.imageService.getImages().then(images => this.images = images);
  }
}

Last of all, change grid background color in home.scss and then our image gallery is ready:

ion-grid {
    background-color: #0e1717;
}

Read More

Building a Simple Wallpaper App with Ionic 2 and Angular 2 TypeScript Part I - Setting Up Development Environment

In this blog series we will build a simple wallpaper application using Ionic 2 and Angular 2 with TypeScript. In this post I will briefly explain the installment process of Ionic 2.

First of all npm is required to install and manage our application's packages and dependencies. If you don't have Node.js and npm installed or installed npm version is lower than 3.x, install the latest version of Node.js.

You can check npm version by running:

npm --version

Install the latest Ionic CLI:

npm install -g ionic

We will use typescript, so let's install it:

 npm install -g typescript

Now we can create our app. --v2 indicates to create application with Ionic 2.

ionic start --v2 simple-wallpaper-app

Let's check our app on browser by running:

ionic serve

So far we have a project running and we can check it on browser, but our main purpose is developing a mobile application. To do that, first add platform(s) you want to work with:

ionic add platform android

You can also add ios platform:

ionic add platform ios

This commands will create a platforms folder at our project directory and a subfolder for each added platform that includes platform specific files and libraries.

We need one more step to go to check our application on a mobie device. Ionic platform runs on Cordova, which is a cross-device mobile development platform for developing mobile applications with web technologies (that is what we are doing with Ionic) and provides native device functionality via its plugins which we will use within our Ionic application. For now just install it:

npm install -g cordova

Let's run our application on android using Cordova:

cordova run android

Cordova will build an apk for us and run it on a connected android device or emulator. For ios it is also pretty much same, just substitute android with ios.

Now we have our development environment ready and we can run our application on a mobile device. In the next post we will start developing our wallpaper application.

Read More