Tech Seeker

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

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

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

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