ngFor is directive that iterates through a list of data and instantiates a template for each item in the list. It does an amazing job when dealing with small list. The issue with ngFor is that it loads everything on DOM, which is slow – possibly …

Basically, a service worker intercepts all outgoing http requests sent by your application on the browser. You can choose which request to respond to by using a set of rules (policies) to guide the service worker on how to handle different requests. …

Angular Component Development Kit (CDK) is a set of un-opinionated developers’ tools to add common interaction behavior to your angular UI with minimal effort. It mainly offers some of the tools found in Angular 2 Material, but with the freedom to …

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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 …

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 …