In this article you will learn about how to make your angular app run even if there is no Internet (angular pwa offline). For this we are going to use Service Workers in Angular and apply caching method.

To learn about Progressive Web Apps in angular read Angular PWA

Service workers augment the traditional web deployment model and empower applications to deliver a user experience with the reliability and performance on par with natively-installed code. Adding a service worker to an Angular application is one of the steps for turning an application into a Progressive Web App also known as a PWA (angular pwa offline) and make angular run in offline mode,

So in short Service Workers is a script which intercepts all your network calls and cache the their responses in local cache system. You can cache API call responses and even your resource files too such as images etc.

Adding a service worker to your project

ng add @angular/pwa --project *project-name*

By running this cli command the angular does following changes

1. Adds the @angular/service-worker package to your project.
2. Enables service worker build support in the CLI.
3. Imports and registers the service worker in the app module.
4. Updates the index.html file: (Includes a link to add the manifest.webmanifest file, Adds meta tags for theme-color).
5. Installs icon files to support the installed Progressive Web App (PWA).
6. Creates the service worker configuration file called ngsw-config.json, which specifies the caching behaviors and other settings.

The main file to set configuration of which resources are to be cached you have to check the ngsw-config.json file.

{
  "$schema": "./node_modules/@angular/service-worker/config/schema.json",
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/manifest.webmanifest",
          "/*.css",
          "/*.js"
        ]
      }
    }, {
      "name": "assets",
      "installMode": "lazy",
      "updateMode": "prefetch",
      "resources": {
        "files": [
          "/assets/**",
          "/*.(eot|svg|cur|jpg|png|webp|gif|otf|ttf|woff|woff2|ani)"
        ]
      }
    }
  ]
}

As you can see in the above file angular by default adds some resources to this file which should be cached in the "assetGroups" object.

No we can go ahead and check service workers in action to do this first we have to create a Build of our angular project

//step1 build angular project
ng build --prod

//step2 server the build files using http-server
http-server dist/<project-name> -o

//step 2 Alternate method: Or go in your dist folder from your directory and run this command
http-server -o

Make sure you have installed http-server on your system if not use this command to install it .

//install http-sever
npm i http-server

Note: If you are not using HTTPS, the service worker will only be registered when accessing the app on localhost.

Now once your app is completely loaded in the Browser go to your developer tools and in newtork tab switch to offline mode as showed in image below.

Switching the offline method it switches off the internet access to your site in chrome. Now refresh your page and check network tab again you would see that the resources are loaded from the local cache and it will show as loaded from service worker check the image below, this verifies that your service workers are working as expected.

Now to Cache the API calls made by your application you have to mention it in ngsw-config.json file by adding another array as "dataGroups" after the "assetGroups" array.

"assetGroups": [{...}],
"dataGroups": [
      {
        "name": "restapiexample dummuy API",
        "urls": ["https://reqres.in/api/users"],
        "cacheConfig": {
          "strategy": "freshness",
          "maxSize": 20,
          "maxAge": "12h",
          "timeout": "5s"
        }
      }
]

//name : Any name .
//urls : Array of API urls in string.
//strategy :  'freshness' | 'performance' 
//maxSize : The maximum number of entries, or responses, in the cache.
//maxAge : '1d' | '1h' | '1m' | '1s' | '1u' 
//timeout : '1d' | '1h' | '1m' | '1s' | '1u' 

In service worker Angular also provides a service to check whether there is a fresh version of application and you should refresh the application to replace the cached version stored in your browser cache or you can even notify the user like "fresh content available please refresh".

//import service
import { SwUpdate } from '@angular/service-worker';

//inject in constructor and use 
constructor(updates: SwUpdate) {
    updates.available.subscribe(event => {
      console.log('current version is', event.current);
      console.log('available version is', event.available);
      console.log('old version was', event.previous);
      console.log('new version is', event.current); 
    });
  } 

Note: Make sure the API or network calls you make user Https because Service Workers doesn't work on Http protocols.

Some of the most common questions related to Angular Service Workers

Angular pwa not working offline

Some of the developers face problem of angular pwa not working offline to fix this firstly you have to check your build files inside dist folder and look for ngsw-manifest.json, sw-register.b73048fe3d9f8a1e7ae5.bundle.js and worker-basic.min.js files. If you don't find these files it means your service worker was not registered correctly. Secondly you have to check your Network Environment, service workers doesn't work in http it requires https so if you don't have a SSL certificate your service worker won't work.

Angular service worker not caching API

When you add angular pwa to your application you get a ngsw-config.json file it consists config for caching the static resources in "assetsGroups" Object. To enable caching of Api in angular service worker you have to set "dataGroups" Object inside ngsw-config.json file.

"dataGroups": [
      {
        "name": "restapiexample dummuy API",
        "urls": ["https://reqres.in/api/users"],
        "cacheConfig": {
          "strategy": "freshness",
          "maxSize": 20,
          "maxAge": "12h",
          "timeout": "5s"
        }
      }
]

How to create a new project in angular offline?

To create new project in angular offline mode use --skip-install followed by ng new --projectName command.

ng new yourProject --skip-install

Angular offline storage

When you are in offline mode no requests will be made to the database as API calls need internet connection to work. You can although cache the API requests using angular service worker which will efficiently deliver the results stored in cache when there is no Internet Connection. Also if you want to save some data temporarily you could still use the LocalStorage. LocalStorage is an default HTML API which stores data locally in your Browser.

Angular service worker cache API

To enable caching of Api in angular service worker you have to set "dataGroups" Object inside ngsw-config.json file.

"dataGroups": [
      {
        "name": "restapiexample dummuy API",
        "urls": ["https://reqres.in/api/users"],
        "cacheConfig": {
          "strategy": "freshness",
          "maxSize": 20,
          "maxAge": "12h",
          "timeout": "5s"
        }
      }
]

Ngsw-worker js not found

If your Ngsw-worker js file is not generate on prod build make sure you serviceWorker is set to true in angular-cli.json.

"build": {
    "configurations": {
        "production": {
            "serviceWorker": true
        }
    }
}

Angular service worker update cache

If you want data to be updated as soon as there's new data available you can set cacheConfig strategy to freshness in ngsw-config.json file.

"dataGroups": [
      {
        "name": "restapiexample dummuy API",
        "urls": ["https://reqres.in/api/users"],
        "cacheConfig": {
          "strategy": "freshness",
          "maxSize": 20,
          "maxAge": "12h",
          "timeout": "5s"
        }
      }
]

Angular service worker exclude url

To exclude url in service worker you just have to skip that url from urls array in "dataGroups" of ngsw-config.json file. You should only specify the urls which you want to be cached.

Hope you find this post useful.

Read the original Article about Progressive Web Apps in angular Angular PWA

How to use Currency Pipe in Angular

In this blog post, we’ll learn about Currency Pipe in Angular.

We all know how much we struggle for making a number format precise when we have to show currency based on the country and their respective currencies.

We have to add an appropriate currency icon and show commas separated values with 2 decimal fixed values. We have to run the Pricing number through certain functions and write code to add commas and currency icons.

Angular here makes it handy by providing a Built in Mechanism that we all know is Pipes which is used for formatting data. Angular has a bunch of pipes currency pipe angular is one of them. Angular has a Currency Pipe built in we just have to use it according to our needs.

CurrencyPipe is an API provided by angular. It is part of the angular CommonModule.

It transforms a number to a currency string, according to locale rules that determine sizing, separator, decimal-point characters, and other locale-specific configurations.

Syntax of Currency pipe Angular :

{{ value_expression | currency [ : currencyCode [ : display [ : digitsInfo [ : locale ] ] ] ] }}

Example:

app.component.ts

price: number = 10050.4521;

app.component.html

{{ price | currency }} //output $10,050.45

This is the basic method of using a currency pipe, the default Currency code for this pipe is 'USD'. But this default is Deprecated from Angular version 9. But you can still set it as default by providing as providers for this pipe as follows:

{provide: DEFAULT_CURRENCY_CODE, useValue: 'USD'}

There are other examples as well which you could use according to your needs and configurations

app.component.ts

a: number = 0.259;
b: number = 1.3495;

app.component.html

<p>A: {{a | currency}}</p>
<!--output '$0.26'-->

<p>A: {{a | currency:'CAD'}}</p>
<!--output 'CA$0.26'-->

<p>A: {{a | currency:'CAD':'code'}}</p>
<!--output 'CAD0.26'-->

<p>B: {{b | currency:'CAD':'symbol':'4.2-2'}}</p>
<!--output 'CA$0,001.35'-->

<p>B: {{b | currency:'CAD':'symbol-narrow':'4.2-2'}}</p>
<!--output '$0,001.35'-->

<p>B: {{b | currency:'CAD':'symbol':'4.2-2':'fr'}}</p>
<!--output '0 001,35 CA$'-->

<p>B: {{b | currency:'CLP'}}</p>
<!--output 'CLP1' because CLP has no cents-->

Angular currency pipe without symbol

If you want to show numbers in currency format without the symbol, or you want to use a currency pipe without a symbol use the below format:

<p> {{ b | currency:'USD':'' }} </p>

<!--output 1.35 -->

Angular currency pipe INR

If you want to show currency in Indian rupees, Use angular currency pipe INR.

<p> {{ b | currency:'INR' }} </p>
<!--output ₹1.35 -->

Angular currency pipe without decimal

Use angular currency pipe without a decimal point with this format

<p> {{ b | currency:'USD':true:'1.0-0' }} </p>
<!--output $1 -->

If you want to show currency without decimal points, using an angular currency pipe without decimal points won't work you should use the number pipe instead, if you need just numbers use this below format.

<p> {{ b | number:'1.0-0' }} </p>
<!--output 1 -->

Angular currency pipe in component

Below is the code to use the angular currency pipe in the component. You have to import it and pass it into with providers inject it via the constructor and it's ready to use.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CurrencyPipe  } from '@angular/common';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ CurrencyPipe ]
})

export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
  priceString:String = '100';
  price:any;

  constructor(private currencyPipe:CurrencyPipe){
    this.price = this.currencyPipe.transform(this.priceString);
  }
  
}

app.component.html

<p> This is angular currency pipe used in component {{price}} </p>

<!--output This is angular currency pipe used in component $100.00 -->


List of currencies with output for Angular Currency Pipe

Here’s the list of currencies for the output of this input

{{number1 |currency:item.key:'symbol'}}.

and number1 = 100

Angular Currency Pipe FAQ

What is Currency Pipe in Angular

Angular Currency Pipe is one of the built in pipes in Angular used to format currency value according to given country code, currency, decimal, locale information.

What is Angular Currency Pipe Syntax?

{{ value_expression | currency [ :currencyCode [ :display [ : digitsInfo [ : locale ] ]]] }}

• value_expression: the number to be formatted as a currency.
• currency: A pipe keyword that is used with a pipe operator.
• currencyCode: The currency code, i.e USD for US dollar or EUR for the Euro.
• digitsInfo : Format: {minIntegerDigits}.{minFractionDigits}-{maxFractionDigits}.
• locale : A locale code for the locale format rules to use. When not supplied, uses the value of LOCALE_ID, which is en-US by default.

How to add CurrencyPipe in TypeScript File

Below is the code to use the angular currency pipe in component. You have to import it and pass it into with providers inject it via constructor and its ready to use.

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CurrencyPipe  } from '@angular/common';
import { AppComponent } from './app.component';

@NgModule({
  imports:      [ BrowserModule ],
  declarations: [ AppComponent ],
  bootstrap:    [ AppComponent ],
  providers:    [ CurrencyPipe ]
})

export class AppModule { }

app.component.ts

import { Component } from '@angular/core';
import { CurrencyPipe } from '@angular/common';

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})

export class AppComponent  {
  priceString:String = '100';
  price:any;

  constructor(private currencyPipe:CurrencyPipe){
    this.price = this.currencyPipe.transform(this.priceString);
  }
  
}

Angular format Currency

<p>A: {{a | currency}}</p>

What is the default value of symbol display while using the currencypipe

{{ price | currency }} //output $10,050.45

This is the basic method of using a currency pipe, the default Currency code for this pipe is 'USD'. But this default is Deprecated from Angular version 9. But you can still set it as default by providing as providers for this pipe as follows:

{provide: DEFAULT_CURRENCY_CODE, useValue: 'USD'}

How do you use currency pipe in input type?

<input type="text" value="">

Angular Currency Pipe with Currency Code Syntax

{{number1 | currency:'CAD'}}

Angular Currency Pipe Remove Decimal(No Decimal)

{{number1 | currency:'USD':'symbol':'4.0'}}

This is useful when you don’t want to display cents in amount. (Angular Currency pipe no cents)

Angular Currency Pipe INR

{{number1 | currency:'INR':'symbol'}}

Output: ₹1,980.00

Hope you have now understood the use of angular currency pipe

Below are some code snippets related to Currency Pipe

Currency pipe in Typescript

Indian currency pipe in Angular 6

Currency pipe in Angular

Currency pipe angular without symbol

Happy Coding!