Angular

Enabling Hot Module Replacement (HMR) in Angular 6

Enabling Hot Module Replacement (HMR) in Angular 6

August 31, 2018
Hot Module Replacement (HMR) is a key webpack feature that is not enable by default in Angular. It allows for modules to be replaced without need for a full browser refresh. This allows you to retain much of the application state, usually lost when reloading. It also saves …

Building Docker Images for Deploying Angular Apps

Building Docker Images for Deploying Angular Apps

August 29, 2018
In this post, we are going to look at how to deploy an angular app using docker. Docker containers can be used to simplify the process of developing, testing and deploying your app into different environments. With docker containers, you can be assured that the application will …

Logging HTTP Errors in Angular 6

Logging HTTP Errors in Angular 6

August 26, 2018
In my last post, I looked at how you can use HTTP Interceptors to attach and refresh authorization tokens. In this post, we are going to use the same HTTP Interceptor to catch HTTP errors – 500, 401, 400 etc. – and logging them remotely. It is important to analyze how your …

Refreshing Authorization Tokens – Angular 6

Refreshing Authorization Tokens – Angular 6

August 22, 2018
In this post, we are going to build a http interceptor for refreshing authorization tokens once expired. The idea here is to be able to intercept http requests, attach an authorization header to the request. And to intercept http response, check for authentication errors and …

Getting Started with Debugging Angular Apps in VSCode

Getting Started with Debugging Angular Apps in VSCode

August 20, 2018
In this post, I am going to show you how to get started with debugging angular apps in VSCode. We shall target Firefox, Chrome and Microsoft Edge. VSCode Debugger provide important features that can improve your development experience. These features include: break point, code …

How to build an image cropper form control in angular

How to build an image cropper form control in angular

August 17, 2018
In an earlier post, I demonstrated how to build an extremely simple custom form control. Today, I have decided to try to up the stakes. We are going to build an image cropper and package it as a form control which is ready to be used in any of our forms – be it template driven …

Angular Material Autocomplete with HTTP Lookup

Angular Material Autocomplete with HTTP Lookup

August 15, 2018
In this demo, we will build an angular autocomplete component that gets autocomplete suggestions from a http service such as a REST API. The idea here is that, instead of using a static autocomplete list, we are going to pull autocomplete suggestions directly from our database. …

Lazy Loading Images in Angular 6

Lazy Loading Images in Angular 6

August 13, 2018
In most web apps, images form a huge chunk of the size of the content. If you had, let’s say over 50 images with each having 100Kbs (after compression and resizing) in size, the total of that would be 100 x 50 which is 5MBs in total size. While storage wise, that is not a lot, …

Options for Deploying Angular Apps

Options for Deploying Angular Apps

August 10, 2018
We all develop application so that other people can use them, it’s not different for Angular apps. In this post, I will focus on options for deploying angular apps. This guide is applicable to almost all JavaScript Frameworks – with a few modifications. Using a Content …

How to Build a Custom Form Control in Angular

How to Build a Custom Form Control in Angular

August 10, 2018
As a developer, sometimes you are required to take some inputs from a form control and do some preprocessing before submitting – commonly on the submit function. A good example of this is a phone number, where you take a country code and phone number and combine them into a …

Angular Reactive Forms – Building Custom Validators

Angular Reactive Forms – Building Custom Validators

August 8, 2018
Angular has built-in input validators for common input validation such as checking min and max length, email etc. These built-in validators can only take you so far, at some point you might need to build a custom validator. In this post, I will show you how to build your own …

SVG/Webfont Icon Packs for your Angular App

SVG/Webfont Icon Packs for your Angular App

August 6, 2018
If you are looking to improve your web app both visually and functionally, icons are a very good place to start. Icons if applied correctly, are easily recognized by users and therefore can substitute long text. This enables developers to utilize the screen real estate wisely …