In this tutorial, we will create our first mobile application using Ionic Angular. Suppose you have not set up ionic 6 development environment; you can follow the steps in this tutorial, How to install Ionic 6 development environment in Windows 10 complete guide.

Outline

Creating a new Ionic Project

To create a new ionic project, open cmd (command prompt) and type in the command:

$ ionic start

We are prompted to choose between using an app creation wizard or not using it to create our project. We do not want to use it, so type n (for No) and press enter.

Next, we are prompted to pick a framework, and we will use Angular, so choose Angular and press enter.

Next, we are prompted to enter the name of the project. So pick a name. I will name mine codeswag-demo.

The last prompt is for the application template. The three most common starters are the blank starter, tabs starter, and sidemenu starter. We are going to choose the blank starter template and press enter.

Fantastic! Our application has been created.

Run the app in the browser

Now we want to run our application. Open another cmd (command prompt), navigate to our project folder, and run the command ionic serve:

$ cd codeswag-demo

$ ionic serve

This will start up a local instance of a node.js server, and it will open your ionic project in the browser.

app in web browser

And if we go to our chrome dev tools, then we can see our application running. Shortcut:

Shift + CTRL + J

app running

Now let’s go back to the first command prompt we opened and type in the command:

$ code .

This is going to open the project in Visual Studio Code.

Making basic modifications to your Ionic App

Now in Visual Studio Code, we want to make some changes to our code. We need to go to src (source), then app, then home, and we want to open home.page.html.

src / app / home / home.page.html

initial code

Let’s change our ion-title to codeswag.net from Blank.

<ion-title>
    codeswag.net
</ion-title>

The title of our app screen changed from Blank to codeswag.net.

Next, let’s get rid of the default content in ion-content, and then we will have a completely blank screen.

<ion-content>

</ion-content>

app preview

How to use the Ionic documentation

Open Ionic Framework Documentation. Go to UI Components, and this will give you all the UI components that are available in the ionic UI library.

We want to use the ion card, so scroll down and select card. Make sure the framework selected is set to Angular. It shows us the markup for the ion-card.

We want to copy the ion-card and paste it inside the ion-content tag.

<ion-card>
    <ion-card-header>
        <ion-card-subtitle>
            Card Subtitle
        </ion-card-subtitle>
        <ion-card-title>
            Card Title
        </ion-card-title>
    </ion-card-header>

    <ion-card-content>
         Keep close to Nature's heart... and break clear away, once in awhile, and climb a mountain or spend a week in the woods.  Wash your spirit clean.
     </ion-card-content>
</ion-card>.

Save and head back to the browser preview, and we will see our card showing up.

app preview

Adding an image

Let’s spice up our application by adding an image. I will be adding the codeswag logo.

So what we want to do is go to our file explorer and access our project directory. In our project, go to src, then assets, and this is the folder that will contain the assets for our application.

codeswag / src / assets

Copy the image you want to put in your application into the assets folder.

file explorer

Let’s head back to Visual Studio, and in html.page.html, let’s add the image right up in the ion-card-header tag.

<ion-card-header>
    <img src="assets\codeswag-logo.png" alt="codeswag-logo"/>
    <ion-card-subtitle>
        Card Subtitle
    </ion-card-subtitle>
    <ion-card-title>
        Card Title
    </ion-card-title>
</ion-card-header>

Let’s head back to the browser to see the changes.

app preview

Let’s remove the text in the ion-card-subtitle tag, and in place of the ion-card-content default text, let’s add some custom text. Let’s also change the text in ion-card-title to codeswag.net.

<ion-content [fullscreen]="true">
  <ion-card>
    <ion-card-header>
      <img src="assets\codeswag-logo.png" alt="codeswag-logo"/>
      <ion-card-subtitle></ion-card-subtitle>
      <ion-card-title>codeswag.net</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      codeswag.net is an awesome blog with software development tutorials and a shop with cool swag and merchandise for software developers.
    </ion-card-content>
  </ion-card>
</ion-content>

Let’s head back to the browser to see our changes.

custom text preview

Adding a new page

We want to learn how to create other pages and link those pages using the angular router.

Head back to our command prompt, and in our cmd, we want to type in the command:

$ ionic g page login

The command tells ionic that we want to generate a new page and call it login.

“g” stands for genarate.

Back in Visual Studio Code, we can see that a new folder called login has been created.

login folder preview

If we go back to our application, we see that we are still on the home page. That is because the home page is the default page for our application. So now, let’s try and change our default page.

Change the default page for your app

Back in Vs. Code, we want to open the file app-routing.module.ts.

We have this constant called routes that has an array of objects. Each object represents a route or a page in our application.

const routes: Routes = [
  // default route
  {
    path: '',
    redirectTo: 'home',
    pathMatch: 'full'
  },
  // route for the home page
  {
    path: 'home',
    loadChildren: () => import('./home/home.module').then( m => m.HomePageModule)
  },  
  // new route for login page
  {
    path: 'login',
    loadChildren: () => import('./login/login.module').then( m => m.LoginPageModule)
  },
];

The default route specifies that if we have no path, we will be redirected to the home page.

So let’s change it from redirectTo: 'home' to redirectTo: 'login'

{
    path: '',
    redirectTo: 'login',
    pathMatch: 'full'
  },

Now, back to our browser preview if we pass our plain URL, we get redirected to the login page and not the home page. So now the login page is the default page.

app login preview

Creating the login page UI

Back to our code editor, copy the ion-card from the home page, and put it in the login page in the ion-content tag. We will change the ion-title to login - codeswag.net and remove the text in ion-card-content.

<ion-card>
    <ion-card-header>
      <img src="assets\codeswag-logo.png" alt="codeswag-logo"/>
      <ion-card-subtitle></ion-card-subtitle>
      <ion-card-title>codeswag.net</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      codeswag.net is an awesome blog with software development tutorials and a shop with cool swag and merchendise for software developers.
    </ion-card-content>
</ion-card>

Let’s go back to the documentation, look for an ion-item and an ion-input, and copy them. The ion-item will create a list structure, and the ion-input will create inputs.

We want to copy an ion-input with a placeholder.

First, paste the ion-item in the ion-card-content. Remove the ion-label, and in the ion-item, paste the ion-item and set the placeholder to Username.

<ion-item>
    <!-- Input with placeholder -->
    <ion-input placeholder="Username"></ion-input>
</ion-item>

The next thing we will do is repeat the process above for the password input. Add the type="password" attribute to mask our password when we are typing it.

<ion-item>
    <!-- Input with placeholder -->
    <ion-input placeholder="Password" type="password"></ion-input>
</ion-item>

Now we want to add a login button. So we are going to create an ion-button and label it login.

<ion-button>login</ion-button>

Let’s separate the ion-items and the ion button with a <br>. Final Code for our Login UI design looks like this:

<ion-content>
  <ion-card>
    <ion-card-header>
      <img src="assets\codeswag-logo.png" alt="codeswag-logo"/>
      <ion-card-subtitle></ion-card-subtitle>
      <ion-card-title>codeswag.net</ion-card-title>
    </ion-card-header>

    <ion-card-content>
      <ion-item>
        <!-- Input with placeholder -->
        <ion-input placeholder="Username"></ion-input>
      </ion-item>

      <br>

      <ion-item>
        <!-- Input with placeholder -->
        <ion-input placeholder="Password" type="password"></ion-input>
      </ion-item>

      <br>

      <ion-button>login</ion-button>
    </ion-card-content>
  </ion-card>
</ion-content>

app preview

That is our login page UI but if we click the button nothing happens.

Adding a click listener

Let’s add a click listener, and when the button is clicked, it runs a method called logMeIn().

<ion-button (click)="logMeIn()">login</ion-button>

Now to create the function, we need to go to login.page.ts, and in the LoginPage class, we need to create the method logMeIn(). As this is a simple tutorial of our very first Ionic app, we will simply login the user no matter what Username and Password they put in, even if it is left blank.

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

@Component({
  selector: 'app-login',
  templateUrl: './login.page.html',
  styleUrls: ['./login.page.scss'],
})
export class LoginPage implements OnInit {

  constructor() { }

  ngOnInit() {
  }

  // logMeIn function goes here

  logMeIn() {
    // code for logging in user goes here
    this.router.navigate(['/home']);
  }

}

So if the user clicks the login button, they should be taken to the home page, but we get an Error with the following message:

Property 'router' does not exist on type 'LoginPage'

error preview

This is because we need to import the router.

Using the Angular Router

So below the Angular component import, we are going to import the Router from @angular/router.

import { Router } from '@angular/router';

In our constructor, we are going to create a private variable of router of the type Router and with that the error dissapears.

export class LoginPage implements OnInit {

  constructor(private router: Router) { }

  ngOnInit() {
  }
  // logMeIn function goes here
  logMeIn() {
    // code for logging in user goes here
    this.router.navigate(['/home']);
  }
}

Download Source Code

Enter your email to get the source code download link.

Once downloaded, extract .zip file, and open the folder in Visual Studio Code. Open Visual Studio code command line, and run the command npm install to install the node modules and ionic serve to run the application.

$ npm install

$ ionic serve

Conclusion

If we test our app, we see it works and with that we have successfully created our first mobile application using Ionic Angular. You can play around with the documentation to try out different UI Components for your application.

app preview

What’s next?

You can check out the other tutorials we have covered below: