Skip to main content


Showing posts with the label Ionic

A Getting Started Sample On Ionic5 Application Using Vue

In this article, we are going to understand the steps for installing and creating the Ionic5 sample application using Vue and also run our sample on the android mobile device emulator. Create A Sample App Of Ionic5 Using Vue : To begin to create an Ionic application, we should have the Ionic CLI installed in our system environment. Command to install latest Ionic CLI: npm install -g @ionic/cli@latest Now run the following command to create Ionic5 using the Vue application. Command to create Ionic Vue application ionic start your_app_name blank --type vue By default Ionic provides few templated projects here I'm creating the 'blank' project. TypeScript Or Javascript: By default Ionic sample created with the support of TypeScript in any library like angular, react, and vue. Typescript can be chosen to develop our application. But in the case of Vue most of the developers or preferred to choose javascript syntax instead of Typescript for application development. So to m

Part-2 Ionic Angular JWT(JSON Web Token) Authentication(Refresh Token Implementation)

In  Part-1  we have implemented steps for jwt authentication in Ionic5 angular application. This is a continuous article of  Part-1 , our main goals here are to use access token in the authorization header and refresh token implementation for user authentication. NestJS(Node.js) Todos API: In  Part-1  we discussed steps to set up the Nestjs API. In that API we have a secured endpoint called 'Todos'. In the next step, we are going to consume this 'Todo' API from our Ionic application. http://localhost:3000/todos Ionic Application Use Authorization Header: Now let's try to consume the secured 'Todos' endpoint by adding the access token to the header. Let's now create a TodoService as below. src/app/services/todo.service.ts: import { Injectable } from "@angular/core"; import { HttpClient } from "@angular/common/http"; import { Observable } from 'rxjs'; @Injectable() export class TodoServie { constructor(private http:HttpCl

Part-1 Ionic Angular JWT(JSON Web Token) Authentication(Access Token Implementation)

In this article, we are going to understand the implementation steps on Jwt authentication in Ionic5 angular application. Here we mainly concentrate on authenticated user access token. What is JSON Web Token?: JSON Web Token is a digitally signed and secured token for user validation. The jwt is constructed with 3 informative parts: Header Payload Signature Create A Sample Ionic Angular Application: Let's begin our journey by creating a sample Ionic Angular application where we are going to implement our JWT authentication. Command To Install Ionic CLI: npm install -g @ionic/cli Command To Create Ionic Tabs Structure APP: ionic start your_application_name tabs Command To Run Application: ionic serve Ionic Storage: The access token on receiving to our Ionic application we need to store it to use it in a subsequent request, the ideal choice for it to use Ionic Storage. Ionic storage provides an easy way to store key/value pairs and JSON objects. It has the capability of picking the

An Overview On Ionic Action Sheet In Angular(ion-action-sheet)

Ionic Action Sheet is a dialog that contains a collection of actionable buttons that display over the application. Here we are going to understand Ionic Action Sheet implementation in Angular. ActionSheetController And ActionSheetOptions: The main building blogs for developing Ionic Action Sheet can be like ActionSheetController ActionSheetOptions ActionSheetController is imported from the package '@ionic/angular'. ActionSheetController is injectable controller into our any of the ionic angular component through constructor injection. An ActinSheetController can create an n-number of action sheets within the components. ActionSheetController bundled with three main methods like create dismiss getTop create  method helps to instantiate or build the Ionic Action Sheet by taking ActionSheetOptions as input configuration. Ionic Angular create(action sheet create method) syntax: create(opts?: Opts): Promise<Overlay>; dismiss method helps to destroy the action sheet, it ta

Ionic Angular Page Life Cycle Methods

Page Life Cycle Methods: Page life cycle methods are like default method gets executed on navigate to the page. Major life cycle methods in the Ionic application are: ionViewWillEnter ionViewDidEnter ionViewWillLeave ionViewDidLeave Route Effects On Ionic Page State: In angular <router-outlet> prebuild component where any page will be displayed inside of it dynamically based on route configuration components. Ionic with angular we have route template like <ion-router-outlet> which is extended from <router-outlet>. On using <ion-router-outlet> ionic navigation work like :- In an ionic application when the user navigates to a new page, ionic will save or store the old page(old page exists within the DOM in the hidden state) and display the new page. Now if the user clicks on the old page link from the current page, ionic loads the old page from the storage(this means components will not be initialized freshly). It is like a cache for pe