firebase/php-jwt + Angular | REST API Authentication Using JSON Web Token with Guards Example Tutorial Part 2

JSON Web Tokens(JWT) are used to secure communication between client and servers. JWT is an encrypted string which is generated by the server after verification of user credentials when they log in. After that this JWT is used to verify the authenticity of the user asking for server responses.

So at the server end the user always need to pass JWT in HTTP call’s header, which is verified/ matched to generated one on the login process.

In our previous tutorial, we implemented JWT and in our Angular application using angular2-jwt package, which makes it easy to add JWT in every HTTP call and also provide other options to manage JWT at the client end. Continue reading firebase/php-jwt + Angular | REST API Authentication Using JSON Web Token with Guards Example Tutorial Part 2

Angular 8 | JSON Web Token Authentication Tutorial with Login/ Dashboard and Guards using angular2-jwt

In this article, we will discuss the implementation of JSON Web Token Authentication in Angular 8 application by using angular2-jwt package.

This post is compatible with Angular v6+ and RxJS v6+

What is JWT?

JWT or JSON Web Token is an encrypted string which contains information related to the logged in user and secret key, this token is generated at server end after a user is an authentication. This JWT is used for further communication between clients and servers.

After getting JWT from the server, every HTTP call to RESTful APIs must have Authorization header set with JWT, which is encoded at server end for authenticating the source. After successful validation data is transferred. Continue reading Angular 8 | JSON Web Token Authentication Tutorial with Login/ Dashboard and Guards using angular2-jwt

VS Code | How to hide Spec.ts/ Test files from Sidebar File explorer

In the Angular project, we usually see spec.ts files in our application folders. These are test files which are not used most of the times. Also whenever we create a new Service, Component or any Directive, using the generate command in Ng CLI tool, these are created by default.

Continue reading VS Code | How to hide Spec.ts/ Test files from Sidebar File explorer

Angular | Create Documentation of Angular Project in 20 Secs!

Yes! you read it right… with this simple tool, you can create a documentation of your Angular project automatically by simply running an NPM command in your CLI. This package creates complete project documentation in HTML format with an overview and detailed view of each component in the project.

As our application grows, it becomes difficult to keep track of each module and its components. The situation becomes worse when there is a need for giving project structure to co-team members or deliver code source and explain everything to other teams. During maintenance by other team members also slows down the debug or change processes.

So its always a better idea to keep a well maintained, simple and self-explanatory documentation at hand so that others and can understand and go through the structure with their own pace and conveniences. Continue reading Angular | Create Documentation of Angular Project in 20 Secs!

Ionic 4 | Native HTTP Plugin Tutorial with Example

In this tutorial, we will learn how to make HTTP calls using Ionic’s Native HTTP plugin.

Making Native server calls over provides advantages over traditional JavaScript HTTP calls. Native HTTP calls are made in Android and IOS based native applications. It provides more security and better calls handling features.

Some of its advantages are as follows:

Background threading: All requests are done in background thread like native applications.

Handling of HTTP code 401: This error code 401 is returned during an unauthorized access to the server which is not handled properly using JavaScript-based HTTP calls.

SSL Pinning: Pinning is used to improve the security of a service. It is used to create a secure Identity for making communications. Continue reading Ionic 4 | Native HTTP Plugin Tutorial with Example

Ionic 4 HttpClient CRUD Service Tutorial to Consume RESTful Server API

Angular’s HttpClient service enables communication between application and server by making an HTTP call to RESTfull API endpoints. In response, we get JSON data which is consumed to show meaningful content to users in client-side applications.

In this tutorial we are going to learn, how to use HttpClient service in Ionic 4 Application to make server HTTP calls with custom headers and propper Error Handling using RxJS operators. In our student application, we will implement CRUD (Create, Read, Update and Delete) operations to communicate with a Mock Server which we will build using JSON-Server NPM package. Continue reading Ionic 4 HttpClient CRUD Service Tutorial to Consume RESTful Server API

Ionic 4 | Keyboard Native Plugin Tutorial

In a hybrid application which runs in a WebView, we sometimes face challenges to have control on Keyboard to show or hide when the user starts to type in. To resolve this ve have Cordova plugin which controls Keyboards events and provides easy methods to intentionally show or hide Keyboard on user screen.

Here we will discuss How to add Keyboard Native plugin in Ionic 4 application and how to sue Keyboards Hook events.

Continue reading Ionic 4 | Keyboard Native Plugin Tutorial

Ionic 4 Native | Date & Time Picker using Native DatePicker plugin Tutorial by Example

To give a more native look to the Ionic application we can replace HTML based Datepicker with Android’s Native Date and Time picker in Ionic hybrid applications. Ionic’s Native Datetime Picker plugin allows adding Android Date and Time picker with many custom options and themes. Continue reading Ionic 4 Native | Date & Time Picker using Native DatePicker plugin Tutorial by Example

Ionic 4 + Angular Material 8 | How to Install Material and Use its Components in Ionic App

Angular Material is an awesome UI framework which is fully compatible to work with Angular applications. It is fully loaded with We Components which are supported for responsive and multi-device platforms. There is a number of easy to use components like Autocomplete, Datepicker, Stepper, Tree structures, Data tables, etc which can empower Ionic applications to the next level.

In this tutorial, we will get to know how to install Angular Material UI Components in an Ionic application.

We will first install Material packages in Ionic 4 application then try some of its components. For this, we will create a new Ionic 4 application with a blank template. Continue reading Ionic 4 + Angular Material 8 | How to Install Material and Use its Components in Ionic App

Ionic 4 | In App Version Check and Updater Dialog using App Update Native Plugin

Whenever we update APK with the latest version on Playstore, it remains unpredictable if users have upgraded to the latest version or not. So there is a possibility that most of them may have not opted for auto application update in Playstore application.

So as a solution to let the user know there is an updated version available, on application start we will show a Dialog box to prompt the user that there is an update available with OK and Cancel buttons.

Continue reading Ionic 4 | In App Version Check and Updater Dialog using App Update Native Plugin