In this article, I will talk about how to use the Decorator pattern to consume REST API in Angular 6.

HttpClient Service

Consuming REST API data using HttpClient in Angular is the most common way of connecting an Angular App to the back end services. HttpClient Service handles the JSON data parsing under the cover and return a Rxjs observable. It can also support generic typing functionality, for example, in the code snippet below, getAllTodos will return a observable with a array of objects that match the type “TodoModel”.

constructor(private http: HttpClient) {}getAllTodos(): Observable<TodoModel[]> {
       return this.http.get<TodoModel[]>(this.url);
}

It is very…

One reason I really like TypeScript is its Type system, it is practical and feature rich. Applying the types in right use cases can make our code cleaner and easier to maintain.

The purpose of this article is to share an example of code refactoring with type script discriminated union type and Generics.

The original code

This piece of code is to represent user roles and feature/permissions mapping, to build a user access matrix in an Angular App.

Angular state management is the core of any Angular App, but there is no one-size-fits-all solution. Although Ngrx is the most popular Angular state management framework, its excessive boilerplate codes make it overkill for many small to middle-size apps.

This article talks about a simple but effective Angular state management pattern using observable data service. What I want to achieve is to have the following key benefits by using a concept similar to Redux pattern.

• Single source of truth
• Unidirectional data flow
• Immutable state at the component level

A demo Hero application is available as an example of how to…

Record is one of the TypeScript utility types and has been available out of the box since version 2.1.

I have to admit that I was a little confused when I read the official definition for the first time:

“Record<Keys,Type>

Constructs an object type whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type.” — TypeScript’s documentation

At face value, it says the Record type creates an object type that has properties of type Keys with corresponding values of type Type. But a similar…

After working with NodeJs for more than two years, I really enjoy the efficiency, rich features and powerful tools available. However, as a Developer, we tend to immerse ourselves in the world of coding details and forget some basic issues that can impact an application’s performance and security.

1) Enable gzip compression

It’s surprising how often gzip is forgotten to be turned on. Turning on gzip compression can make your App much faster by reducing the size of http calls up to 10 times.

How to verify whether it’s enabled? Just open the App in Chrome, open chrome Devtools, select “networks” tab, then look…

As one of the common creation patterns, the factory pattern makes application loose coupling by hiding the implementation details from client code using interface. It leaves the creation of object instance to the factory implementation. The purpose of this article is to show how to improve the factory “creator” with Type script type map.

Users Factory Implementation

We’ll be using a typical example of a factory that creates different types of users: Manager and Developer for the sake of simplicity. You can imagine there will be much more types in a real project.

Firstly, let’s define our Manager and Developer classes.

Everything in JavaScript world is an Object. We often need to clone an Object, and when working with TypeScript, preserve the object type may also be required. This article will explore the options of deep clone an Object with TypeScript, and implement the clone functionality without dependencies to external libraries.

Shallow copy

A shallow copy using Object.Assign or Spread operator will duplicate the top-level properties, but the properties as an Object is copied as a reference, thus it is shared between the original source and target(copied Object).

const objShallowCopy = Object.assign({}, Obj1);
// or
const objShallowCopy = {...Obj1};

Although the above methods…

Managing different environment configurations for a Web App is an essential task. NestJS provides an out-of-box config package based on .env files. However, my personal preference is to use the Angular style environment config files. Thus, this article will describe a simple environment config solution. The solution is illustrated in a NestJS App, but it can work in any NodeJs Apps.

Environment specific configs with default

The config files structure is shown below. The settings.json contains base configurations with default values, and a settings.[environment].json stores the environment specific configs which can overrides the default values.

└──Project/src/environments/
                   └──settings.json
                   └──settings.prod.json
                   └──settings.dev.json

The sample settings are listed below…