Ionic 4 and Angular 7 Tutorial: HTTP Interceptor Example

Ionic 4 and Angular 7 Tutorial: HTTP Interceptor Example

The comprehensive step by step tutorial on using HTTP Interceptor with Ionic 4 and Angular 7 including a complete example of authentication or login.

The comprehensive step by step tutorial on using HTTP Interceptor with Ionic 4 and Angular 7 including a complete example of authentication or login. We will stick Authentication Token to Angular 7 interceptor. So, you don’t have to repeat calling token when call or consume RESTful API. For the RESTful API, we will use our existing Node, Express, Passport and MongoDB that you can get from our GitHub.

Table of Contents:

The following tools, frameworks, and modules are required for this tutorial:

Before going to the main steps, we assume that you have to install Node.js. Next, upgrade or install new Ionic 4 CLI by open the terminal or Node command line then type this command.

sudo npm install -g ionic

You will get the latest Ionic CLI in your terminal or command line. Check the version by type this command.

ionic --version
4.3.1

1. Create a new Ionic 4 and Angular 7 App

To create a new Ionic 4 and Angular 7 application, type this command in your terminal.

ionic start ionic4-angular7-interceptor blank --type=angular

If you see this question, just type N for because we will installing or adding Cordova later.

Integrate your new app with Cordova to target native iOS and Android? (y/N) N

After installing NPM modules and dependencies, you will see this question, just type N because we are not using it yet.

Install the free Ionic Pro SDK and connect your app? (Y/n) N

Next, go to the newly created app folder.

cd ./ionic4-angular7-interceptor

As usual, run the Ionic 4 and Angular 7 app for the first time, but before run as lab mode, type this command to install @ionic/lab.

npm install --save-dev @ionic/lab
ionic serve -l

Now, open the browser and you will the Ionic 4 and Angular 7 app with the iOS, Android, or Windows view. If you see a normal Ionic 4 blank application, that’s mean you ready to go to the next steps.

2. Create a custom Angular 7 HttpInterceptor

Before creating a custom Angular 7 HttpInterceptor, create a folder under app folder.

mkdir src/app/interceptors

Next, create a file for the custom Angular 7 HttpInterceptor.

touch src/app/interceptors/token.interceptor.ts

Open and edit that file the add this imports.

import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse,
  HttpErrorResponse
} from '@angular/common/http';
import { Observable, throwError } from 'rxjs';
import { map, catchError } from 'rxjs/operators';
import {
  Router
} from '@angular/router';
import { ToastController } from '@ionic/angular';

Create a class that implementing HttpInterceptor method.

@Injectable()
export class TokenInterceptor implements HttpInterceptor {

}

Inject the required module to the constructor inside the class.

constructor(private router: Router,
  public toastController: ToastController) {}

Implement a custom Interceptor function.

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

&nbsp; const token = localStorage.getItem('token');

&nbsp; if (token) {
&nbsp; &nbsp; request = request.clone({
&nbsp; &nbsp; &nbsp; setHeaders: {
&nbsp; &nbsp; &nbsp; &nbsp; 'Authorization': token
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; });
&nbsp; }

&nbsp; if (!request.headers.has('Content-Type')) {
&nbsp; &nbsp; request = request.clone({
&nbsp; &nbsp; &nbsp; setHeaders: {
&nbsp; &nbsp; &nbsp; &nbsp; 'content-type': 'application/json'
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; });
&nbsp; }

&nbsp; request = request.clone({
&nbsp; &nbsp; headers: request.headers.set('Accept', 'application/json')
&nbsp; });

&nbsp; return next.handle(request).pipe(
&nbsp; &nbsp; map((event: HttpEvent<any>) => {
&nbsp; &nbsp; &nbsp; if (event instanceof HttpResponse) {
&nbsp; &nbsp; &nbsp; &nbsp; console.log('event--->>>', event);
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; return event;
&nbsp; &nbsp; }),
&nbsp; &nbsp; catchError((error: HttpErrorResponse) => {
&nbsp; &nbsp; &nbsp; if (error.status === 401) {
&nbsp; &nbsp; &nbsp; &nbsp; if (error.error.success === false) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.presentToast('Login failed');
&nbsp; &nbsp; &nbsp; &nbsp; } else {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.router.navigate(['login']);
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; return throwError(error);
&nbsp; &nbsp; }));
}

Add function for call a toast controller.

async presentToast(msg) {
&nbsp; const toast = await this.toastController.create({
&nbsp; &nbsp; message: msg,
&nbsp; &nbsp; duration: 2000,
&nbsp; &nbsp; position: 'top'
&nbsp; });
&nbsp; toast.present();
}

Next, we have to register this custom HttpInterceptor and HttpClientModule. Open and edit src/app/app.module.ts then add this imports.

import { HTTP_INTERCEPTORS, HttpClientModule } from '@angular/common/http';
import { TokenInterceptor } from './inteceptors/token.interceptor';

Add those modules to the provider array of the @NgModule.

providers: [
&nbsp; StatusBar,
&nbsp; SplashScreen,
&nbsp; { provide: RouteReuseStrategy, useClass: IonicRouteStrategy },
&nbsp; {
&nbsp; &nbsp; provide: HTTP_INTERCEPTORS,
&nbsp; &nbsp; useClass: TokenInterceptor,
&nbsp; &nbsp; multi: true
&nbsp; }
],

Now, the HTTP interceptor is ready to intercept any request to the API.

3. Create Ionic 4 Angular 7 Authentication and Book Services

First, create a folder for those services under src/app/.

mkdir src/app/services

Create services or providers for authentication and book.

ionic g service services/auth
ionic g service services/book

Next, open and edit src/app/services/auth.service.ts then replace all codes with this.

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';

@Injectable({
&nbsp; providedIn: 'root'
})
export class AuthService {

&nbsp; apiUrl = 'http://localhost:3000/api/';

&nbsp; constructor(private http: HttpClient) { }

&nbsp; login (data): Observable<any> {
&nbsp; &nbsp; return this.http.post<any>(this.apiUrl + 'signin', data)
&nbsp; &nbsp; &nbsp; .pipe(
&nbsp; &nbsp; &nbsp; &nbsp; tap(_ => this.log('login')),
&nbsp; &nbsp; &nbsp; &nbsp; catchError(this.handleError('login', []))
&nbsp; &nbsp; &nbsp; );
&nbsp; }

&nbsp; logout (): Observable<any> {
&nbsp; &nbsp; return this.http.get<any>(this.apiUrl + 'signout')
&nbsp; &nbsp; &nbsp; .pipe(
&nbsp; &nbsp; &nbsp; &nbsp; tap(_ => this.log('logout')),
&nbsp; &nbsp; &nbsp; &nbsp; catchError(this.handleError('logout', []))
&nbsp; &nbsp; &nbsp; );
&nbsp; }

&nbsp; register (data): Observable<any> {
&nbsp; &nbsp; return this.http.post<any>(this.apiUrl + 'signup', data)
&nbsp; &nbsp; &nbsp; .pipe(
&nbsp; &nbsp; &nbsp; &nbsp; tap(_ => this.log('login')),
&nbsp; &nbsp; &nbsp; &nbsp; catchError(this.handleError('login', []))
&nbsp; &nbsp; &nbsp; );
&nbsp; }

&nbsp; private handleError<T> (operation = 'operation', result?: T) {
&nbsp; &nbsp; return (error: any): Observable<T> => {

&nbsp; &nbsp; &nbsp; // TODO: send the error to remote logging infrastructure
&nbsp; &nbsp; &nbsp; console.error(error); // log to console instead

&nbsp; &nbsp; &nbsp; // TODO: better job of transforming error for user consumption
&nbsp; &nbsp; &nbsp; this.log(`${operation} failed: ${error.message}`);

&nbsp; &nbsp; &nbsp; // Let the app keep running by returning an empty result.
&nbsp; &nbsp; &nbsp; return of(result as T);
&nbsp; &nbsp; };
&nbsp; }

&nbsp; /** Log a HeroService message with the MessageService */
&nbsp; private log(message: string) {
&nbsp; &nbsp; console.log(message);
&nbsp; }
}

Next, open and edit src/app/services/book.service then replace all codes with this.

import { Injectable } from '@angular/core';
import { Book } from '../book/book';
import { HttpClient } from '@angular/common/http';
import { Observable, of } from 'rxjs';
import { catchError, tap } from 'rxjs/operators';

@Injectable({
&nbsp; providedIn: 'root'
})
export class BookService {

&nbsp; apiUrl = 'http://localhost:3000/api/';

&nbsp; constructor(private http: HttpClient) { }

&nbsp; getBooks (): Observable<Book[]> {
&nbsp; &nbsp; return this.http.get<Book[]>(this.apiUrl + 'book')
&nbsp; &nbsp; &nbsp; .pipe(
&nbsp; &nbsp; &nbsp; &nbsp; tap(_ => this.log('fetched books')),
&nbsp; &nbsp; &nbsp; &nbsp; catchError(this.handleError('getBooks', []))
&nbsp; &nbsp; &nbsp; );
&nbsp; }

&nbsp; private handleError<T> (operation = 'operation', result?: T) {
&nbsp; &nbsp; return (error: any): Observable<T> => {

&nbsp; &nbsp; &nbsp; // TODO: send the error to remote logging infrastructure
&nbsp; &nbsp; &nbsp; console.error(error); // log to console instead

&nbsp; &nbsp; &nbsp; // TODO: better job of transforming error for user consumption
&nbsp; &nbsp; &nbsp; this.log(`${operation} failed: ${error.message}`);

&nbsp; &nbsp; &nbsp; // Let the app keep running by returning an empty result.
&nbsp; &nbsp; &nbsp; return of(result as T);
&nbsp; &nbsp; };
&nbsp; }

&nbsp; /** Log a HeroService message with the MessageService */
&nbsp; private log(message: string) {
&nbsp; &nbsp; console.log(message);
&nbsp; }
}

4. Create an Ionic 4 and Angular 7 Book Page

Type this command to generate an Ionic 4 and Angular 7 page for the book.

ionic g page book

Create a Typescript file for handle Book object or as a model for Book object.

touch src/app/book/book.ts

Open end edit that file then replaces all codes with this.

export class Book {
&nbsp; _id: number;
&nbsp; isbn: string;
&nbsp; title: string;
&nbsp; author: number;
&nbsp; publisher: Date;
&nbsp; __v: number;
}

Next, open and edit src/app/book/book.page.ts then add this imports.

import { Book } from './book';
import { BookService } from '../services/book.service';
import { AuthService } from '../services/auth.service';
import { Router } from '@angular/router';

Inject all required modules to the constructor.

constructor(private bookService: BookService,
&nbsp; private authService: AuthService,
&nbsp; private router: Router) { }

Declare this variable before the constructor.

books: Book[];

Create a function for consuming or get book list from the book service.

getBooks(): void {
&nbsp; this.bookService.getBooks()
&nbsp; &nbsp; .subscribe(books => {
&nbsp; &nbsp; &nbsp; console.log(books);
&nbsp; &nbsp; &nbsp; this.books = books;
&nbsp; &nbsp; });
}

Call this function from ngOnInit.

ngOnInit() {
&nbsp; this.getBooks();
}

Add a function for log out the current session.

logout() {
&nbsp; this.authService.logout()
&nbsp; &nbsp; .subscribe(res => {
&nbsp; &nbsp; &nbsp; console.log(res);
&nbsp; &nbsp; &nbsp; localStorage.removeItem('token');
&nbsp; &nbsp; &nbsp; this.router.navigate(['login']);
&nbsp; &nbsp; });
}

Next, open and edit src/app/book/book.page.html then replace all HTML tags with this.

<ion-header>
&nbsp; <ion-toolbar>
&nbsp; &nbsp; <ion-title>List of Books</ion-title>
&nbsp; &nbsp; <ion-buttons slot="end">
&nbsp; &nbsp; &nbsp; <ion-button color="secondary" (click)="logout()">
&nbsp; &nbsp; &nbsp; &nbsp; <ion-icon slot="icon-only" name="exit"></ion-icon>
&nbsp; &nbsp; &nbsp; </ion-button>
&nbsp; &nbsp; </ion-buttons>
&nbsp; </ion-toolbar>
</ion-header>

<ion-content padding>
&nbsp; <ion-list>
&nbsp; &nbsp; <ion-item *ngFor="let b of books">
&nbsp; &nbsp; &nbsp; <ion-label>{{b.title}}</ion-label>
&nbsp; &nbsp; </ion-item>
&nbsp; </ion-list>
</ion-content>

The book page just shows the list of the book and log out button on the title bar.

5. Create the Ionic 4 and Angular 7 Pages for Login and Register

Before creating that pages, create this folder under src/app.

mkdir src/app/auth

Now, generate the Ionic 4 and Angular 7 pages.

ionic g page auth/login
ionic g page auth/register

Next, open and edit src/app/auth/login/login.page.ts then replace all codes with this.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
import { ToastController } from '@ionic/angular';

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

&nbsp; loginForm: FormGroup;

&nbsp; constructor(private formBuilder: FormBuilder,
&nbsp; &nbsp; private router: Router,
&nbsp; &nbsp; private authService: AuthService,
&nbsp; &nbsp; public toastController: ToastController) { }

&nbsp; ngOnInit() {
&nbsp; &nbsp; this.loginForm = this.formBuilder.group({
&nbsp; &nbsp; &nbsp; 'username' : [null, Validators.required],
&nbsp; &nbsp; &nbsp; 'password' : [null, Validators.required]
&nbsp; &nbsp; });
&nbsp; }

&nbsp; onFormSubmit(form: NgForm) {
&nbsp; &nbsp; this.authService.login(form)
&nbsp; &nbsp; &nbsp; .subscribe(res => {
&nbsp; &nbsp; &nbsp; &nbsp; if (res.token) {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; localStorage.setItem('token', res.token);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.router.navigate(['book']);
&nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; }, (err) => {
&nbsp; &nbsp; &nbsp; &nbsp; console.log(err);
&nbsp; &nbsp; &nbsp; });
&nbsp; }

&nbsp; register() {
&nbsp; &nbsp; this.router.navigate(['register']);
&nbsp; }

&nbsp; async presentToast(msg) {
&nbsp; &nbsp; const toast = await this.toastController.create({
&nbsp; &nbsp; &nbsp; message: msg,
&nbsp; &nbsp; &nbsp; duration: 2000,
&nbsp; &nbsp; &nbsp; position: 'top'
&nbsp; &nbsp; });
&nbsp; &nbsp; toast.present();
&nbsp; }

}

Next, open and edit src/app/auth/login/login.page.html then replace all HTML tags with this.

<ion-content padding>
&nbsp; <form [formGroup]="loginForm" (ngSubmit)="onFormSubmit(loginForm.value)">
&nbsp; &nbsp; <ion-card>
&nbsp; &nbsp; &nbsp; <ion-card-header>
&nbsp; &nbsp; &nbsp; &nbsp; <ion-card-title>Please, Sign In</ion-card-title>
&nbsp; &nbsp; &nbsp; </ion-card-header>
&nbsp; &nbsp; &nbsp; <ion-card-content>
&nbsp; &nbsp; &nbsp; &nbsp; <ion-item>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ion-label position="floating">Username</ion-label>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ion-input type="text" formControlName="username"></ion-input>
&nbsp; &nbsp; &nbsp; &nbsp; </ion-item>
&nbsp; &nbsp; &nbsp; &nbsp; <ion-item>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ion-label position="floating">Password</ion-label>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ion-input type="password" formControlName="password"></ion-input>
&nbsp; &nbsp; &nbsp; &nbsp; </ion-item>
&nbsp; &nbsp; &nbsp; &nbsp; <ion-item lines="none" lines="full" padding-top>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ion-button expand="full" size="default" shape="round" color="success" type="submit" [disabled]="!loginForm.valid">Login</ion-button>
&nbsp; &nbsp; &nbsp; &nbsp; </ion-item>
&nbsp; &nbsp; &nbsp; &nbsp; <ion-item lines="none">
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ion-button type="button" expand="full" size="default" shape="round" color="medium" (click)="register()">Register</ion-button>
&nbsp; &nbsp; &nbsp; &nbsp; </ion-item>
&nbsp; &nbsp; &nbsp; </ion-card-content>
&nbsp; &nbsp; </ion-card>
&nbsp; </form>
</ion-content>

Next, open and edit src/app/auth/register/register.page.ts then replace all codes with this.

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';
import { ToastController, AlertController } from '@ionic/angular';

@Component({
&nbsp; selector: 'app-register',
&nbsp; templateUrl: './register.page.html',
&nbsp; styleUrls: ['./register.page.scss'],
})
export class RegisterPage implements OnInit {

&nbsp; registerForm: FormGroup;

&nbsp; constructor(private formBuilder: FormBuilder,
&nbsp; &nbsp; private router: Router,
&nbsp; &nbsp; private authService: AuthService,
&nbsp; &nbsp; public toastController: ToastController,
&nbsp; &nbsp; public alertController: AlertController) { }

&nbsp; ngOnInit() {
&nbsp; &nbsp; this.registerForm = this.formBuilder.group({
&nbsp; &nbsp; &nbsp; 'username' : [null, Validators.required],
&nbsp; &nbsp; &nbsp; 'password' : [null, Validators.required]
&nbsp; &nbsp; });
&nbsp; }

&nbsp; onFormSubmit(form: NgForm) {
&nbsp; &nbsp; this.authService.register(form)
&nbsp; &nbsp; &nbsp; .subscribe(_ => {
&nbsp; &nbsp; &nbsp; &nbsp; this.presentAlert('Register Successfully', 'Please login with your new username and password');
&nbsp; &nbsp; &nbsp; }, (err) => {
&nbsp; &nbsp; &nbsp; &nbsp; console.log(err);
&nbsp; &nbsp; &nbsp; });
&nbsp; }

&nbsp; async presentToast(msg) {
&nbsp; &nbsp; const toast = await this.toastController.create({
&nbsp; &nbsp; &nbsp; message: msg,
&nbsp; &nbsp; &nbsp; duration: 2000,
&nbsp; &nbsp; &nbsp; position: 'top'
&nbsp; &nbsp; });
&nbsp; &nbsp; toast.present();
&nbsp; }

&nbsp; async presentAlert(header, message) {
&nbsp; &nbsp; const alert = await this.alertController.create({
&nbsp; &nbsp; &nbsp; header: header,
&nbsp; &nbsp; &nbsp; message: message,
&nbsp; &nbsp; &nbsp; buttons: [{
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: 'OK',
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; handler: () => {
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.router.navigate(['login']);
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }
&nbsp; &nbsp; &nbsp; &nbsp; }]
&nbsp; &nbsp; });

&nbsp; &nbsp; await alert.present();
&nbsp; }

}

Open and edit src/app/auth/login/login.page.html then replace all HTML tags with this.

<ion-header>
&nbsp; <ion-toolbar>
&nbsp; &nbsp; <ion-buttons slot="start">
&nbsp; &nbsp; &nbsp; <ion-back-button></ion-back-button>
&nbsp; &nbsp; </ion-buttons>
&nbsp; &nbsp; <ion-title>Register</ion-title>
&nbsp; </ion-toolbar>
</ion-header>

<ion-content padding>
&nbsp; <form [formGroup]="registerForm" (ngSubmit)="onFormSubmit(registerForm.value)">
&nbsp; &nbsp; <ion-card>
&nbsp; &nbsp; &nbsp; <ion-card-header>
&nbsp; &nbsp; &nbsp; &nbsp; <ion-card-title>Register here</ion-card-title>
&nbsp; &nbsp; &nbsp; </ion-card-header>
&nbsp; &nbsp; &nbsp; <ion-card-content>
&nbsp; &nbsp; &nbsp; &nbsp; <ion-item>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ion-label position="floating">Username</ion-label>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ion-input type="text" formControlName="username"></ion-input>
&nbsp; &nbsp; &nbsp; &nbsp; </ion-item>
&nbsp; &nbsp; &nbsp; &nbsp; <ion-item>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ion-label position="floating">Password</ion-label>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ion-input type="password" formControlName="password"></ion-input>
&nbsp; &nbsp; &nbsp; &nbsp; </ion-item>
&nbsp; &nbsp; &nbsp; &nbsp; <ion-item lines="none" padding-top>
&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <ion-button expand="full" size="default" shape="round" color="success" type="submit" [disabled]="!registerForm.valid">Register</ion-button>
&nbsp; &nbsp; &nbsp; &nbsp; </ion-item>
&nbsp; &nbsp; &nbsp; </ion-card-content>
&nbsp; &nbsp; </ion-card>
&nbsp; </form>
</ion-content>

6. Run and Test the Ionic 4 and Angular 7 Authentication App

Before the run the Ionic 4 and Angular 7 app, we should run the RESTful API server first. After you clone our Express.js API, run this command in the terminal.

npm i

Open another Terminal tabs if your MongoDB server not running then type this command to run it.

mongod

Back to Express API, type this command to run it.

nodemon

or

npm start

Next, we have to run the Ionic 4 and Angular 7 app by typing this command.

ionic serve -l

You should see these pages if everything working properly.

That it’s, the Ionic 4 and Angular 7 HttpIntercepter and HttpClient implementation to the Authentication app. You can find the full working source code on our GitHub.

We know that building beautifully designed Ionic apps from scratch can be frustrating and very time-consuming. Check Ion2FullApp ELITE - The Complete Ionic 3 Starter App and save development and design time.

Learn More

Angular 7 (formerly Angular 2) - The Complete Guide

Learn and Understand AngularJS

Angular Crash Course for Busy Developers

The Complete Angular Course: Beginner to Advanced

Angular (Angular 2+) & NodeJS - The MEAN Stack Guide

Become a JavaScript developer - Learn (React, Node,Angular)

Angular (Full App) with Angular Material, Angularfire & NgRx

The Web Developer Bootcamp

angular ionic

What's new in Bootstrap 5 and when Bootstrap 5 release date?

How to Build Progressive Web Apps (PWA) using Angular 9

What is new features in Javascript ES2020 ECMAScript 2020

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Random Password Generator Online

HTML Color Picker online | HEX Color Picker | RGB Color Picker

Angular 9, Ionic 5, React Navigation 5 - Web Dev Update February 2020

Here's an update on what's important in web development! Angular 9, Ionic 5, React Navigation 5 and more - I'll bring you up-to-date with what you need to know!

Ionic 5 Tutorial: Create Ionic Calculator App (Angular)

In this Ionic 5 tutorial, we will create an Ionic Calculator app (Angular) that run on Android or iOS device. We will use a dark theme for this Ionic calculator appearance, at least similar to a built-in iOS calculator app. The feature of this calculator app is a basic feature that only has basic calculation operators.

How to Build Mobile Apps with Angular, Ionic 4, and Spring Boot

Run Your Ionic App on Android. Make sure you're using Java 8. Run ionic cordova prepare android. Open platforms/android in Android Studio, upgrade Gradle if prompted. Set launchMode to singleTask in AndroidManifest.xml. Start your app using Android Studio...

Angular with ionic 4 required

Please provide me angular and ionic 4 tutorials with some examples.

Angular Workspace: No Application for You!

The how and why of using the --create-application flag with Angular CLI to create a Workspace without the initial application A nice addition to Angular CLI 7.0.0 was the --create-application flag. In this article I will discuss how and when to use this new feature. It will be especially useful when creating Angular libraries. NOTE: Angular CLI accepts both camelCase and kebab-case for this option. So, anywhere you see --create-application, you can also use --createApplication. For more detail