Shopping Basket

Shopping Basket is a fictional online grocery and food product provider. It sells fresh fruits, vegetables, groceries, beverages, dairy, branded food and etc..

In a coming video series, I will be explaining how this beautiful user interface can be developed using Angular and spring boot services with step by step instructions.

Shopping basket home page lists a variety of products. The users can browse through these items and can add to items to shopping cart. Items can be added, quantity can be increased or decreased. Selected item get added to users shopping cart in real-time.

Shopping basket can be managed by admin users using 2 options- manage orders and manage inventory.

Manage orders – Lists orders placed using shopping basket. Admin user can check the delivery status of the orders.

Manage Inventory – Items inventory can be managed using this option. This provides an option to add the new item to inventory, add/update/delete item etc.

Reusable Angular Template

Reusable angular template is available for reuse in your project. It provides following features

  1. Left Navigation Menu – Provides Navigation URL to different pages
  2. Header – Provides following option
    • Search Bar
    • Help menu
    • Tiles menu
    • User Profile Details
    • Logout option
  3. Footer – Provides the following option
    • Copyright location

This template is absolutely free and can be customized as per your project requirement.

Github Location –


By default set HashLocationStrategy for Angular Project

HashLocationStrategy should be set by default in the angular project.

Suppose you have deployed Angular code in webserver(in PRD environment). When you refresh the page after navigating to some pages(for eg., you will receive 404 error. The reason is Browser tries to get new content from the server, but the server does not understand this request from where to bring the content.

As Angular code gets downloaded to the browser, it should not ask the server to send new content on refreshing the page

This can be avoided by setting HashLocationStrategy in AppModule

Due to this parameter, URL will have a hash fragment(for eg., This says browser to check in his local files to get new URL details instead of sending the request to the server.

Another 404 issue you can avoid using this feature is if the user tries to open an angular page in another tab/window by using right-click option.

HashLocationStrategy in AppModule

HashLocationStrategy in AppModule

Reference –

Logger Library for Angular Projects

PWNLogger is a logging module for Angular(v5) project. It Provides following features.

  • Browser console logging
  • Server Logging
  • To enable logging only to a dedicated user
  • Option to control logging level


Install the package using below command

$ npm install pwn-logger-lib --save

Import Angular Logger module to the main module (For e.g., AppModule)

import {PWNLoggerModule} from 'pwn-logger-lib';

Pass configuration to initialize logger module


Import logger in your typescript files and call one of the logging method


Following dependencies are needed for logger module

  • @angular/common
  • @angular/core
  • @angular/http


Configuration Option

Param Name Allowed Values Description
ConsoleLogLevel ALL,TRACE,DEBUG,INFO,LOG,WARN,ERROR,FATAL,OFF Only sends logs to the browser console for the level specified or higher


ServerLogLevel ALL,TRACE,DEBUG,INFO,LOG,WARN,ERROR,FATAL,OFF Only sends logs to the server for the level specified or higher


ServerLoggingUrl server URL to POST the log messages


Any additional HTTP Header parameter to invoke ServerLoggingUrl
userParams ALL,TRACE,DEBUG,INFO,LOG,WARN,ERROR,FATAL,OFF To enable logging for a dedicated user

Enable Logging to a Dedicated User

There may be a situation when a single user will be facing the issue and want to enable additional logging for that user without redeploying the application. userParams parameter makes it possible to enable this.

Add ‘USER_LOG’ as key and value as required log level to debug user issue in Google Chrome session store and refresh the user session in the same browser session

Session Storage

Open developer tools by pressing F12 (or Ctrl + Shift + i) then go to the Application tab in google chrome(storage tab in Firefox). In this tab, section expand session storage. Select your application and add key/value pair.

on OS X use: + ⌘ + i  to open developer tools

In Google Chrome

In Firefox

Sample Output Format

Additional Details




Log Level Description
ALL The ALL has the lowest possible rank and is intended to turn on all logging.
TRACE The TRACE Level designates fine-grained informational events than the DEBUG.
DEBUG The DEBUG Level designates fine-grained informational events that are most useful to debug an application.
INFO The INFO level designates informational messages that highlight the progress of the application at coarse-grained level.
LOG The LOG Level designates information message that highlight the progress of the application at the coarse-grained level and to log exception flows.


WARN The WARN level designates potentially harmful situations.


ERROR The ERROR level designates error events that might still allow the application to continue running.
FATAL The FATAL level designates very severe error events that will presumably lead the application to abort.
OFF The OFF has the highest possible rank and is intended to turn off logging.









Get client IP in Angular

There are 2 types of IP addresses associated with a computer connected to an internet – Private and Public IP

What is the difference between public and private IP address?

Private IP – Private IP address is the address used for identification of a device within a network. 

Public IP – Public IP address is the address that is assigned to a computer by your Internet Service Provider(ISP) to allow direct access to the Internet.

The devices residing outside of your local network cannot directly communicate via the private IP address but uses your router’s public IP address to communicate.

How to know Public IP in the Angular project?

Client Public IP can be accessed by making an API call to 3rd party services like or Since this API will be issued from the client browser, you don’t have to worry about security failure as this call will not be flow through any of your server resources.

How to know Private IP in the Angular project?

with the introduction of WebRTC support in modern browsers like Chrome and Firefox,  it is possible to know Client Private IP. RTCPeerConnnection provided by webRTC can be used to retrieve the client IP using JavaScript.

WebRTC Details –

In Angular, the same feature can be used to retrieve client IP. But the problem is where to place javascript related code? All sorts of errors will be thrown by the compiler If Javascript code related to WebRTC is placed in Typescript or in the template file. A good place to host this piece of code is inside index.html file where Angular App root details will be mentioned.

Refer my GitHub project to access the source code for this article. Below screenshot shows final output –

Github location –

Demo video –