Latest Posts

Working with Angular CLI Budgets in Angular 6

Working with Angular CLI Budgets in Angular 6

September 8, 2018
In this post, I am going to cover Angular CLI Budgets in details. So, what are CLI Budgets? CLI Budgets is a way of way of ensuring that your angular final build bundles do not deviate by much from the expected sizes. For instance, if you expected the whole built application …

Must Have Tools for Angular Developers 2018

Must Have Tools for Angular Developers 2018

September 6, 2018
In web development or any job in general, tools are very vital for you to do your job right. Tools help improve productivity, reduce mistakes and provide useful and rich insight towards your code. Angular is build around excellent tools such as Angular CLI. You can improve your …

Angular Hidden Treasures – Features you might know About

Angular Hidden Treasures – Features you might know About

September 4, 2018
In this post, we are going to look at four important features in angular that can help you during your app development life cycle. These features are there but are mainly not openly advertised unless you go out looking for them. This is not because they are not useful but can …

How to Handle Errors Globally in Angular

How to Handle Errors Globally in Angular

September 2, 2018
By default, when errors occur in Angular during runtime, they are written to the browser console. This is great during development and testing but not great when running on production. This is one environment where you have no access to. And the users may lack technical skills …

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, …