Blog

One of the most loved features of Angular is its ability to automatically update the view whenever data changes. This is thanks to the default Angular's change detection mechanism, which constantly checks for changes in data and updates the view accordingly. While this is great for most use cases, it…

In this post, I will show you how to set page title based on route in Angular. Angular provides a built-in Title service that we can use to set the title of the web page dynamically from code. We will use the title service in combination with router events to…

In this blog post, I will show you how to generate a routes file for prerendering an Angular Universal application. We will create a basic routes file and append routes dynamically from an XML sitemap ahead of running npm run prerender command when building the application. Pre-requisites This post assumes…

While upgrading Node from v12 to v16, I came across a problem with Angular unit tests where an exception would stop the test run with error Cannot read property 'range' of undefined. In this post, I'll explain the steps I took to identify the root cause of issue and propose…

Angular Universal gives superpowers to traditional Angular apps such as server-side rendering (SSR) and full features using Express.js server. This allows us to implement features like returning HTTP status codes in appropriate scenarios. In this post, I will show you how to set the HTTP status code from an Angular…

While updating my Angular Material Starter Template to Angular 14, I ran into an error causing broken builds. The console output seems to suggest this is a problem with Dialog module from Angular Component Dev Kit (CDK): Cannot resolve type entity i3.DialogModule to symbol. ./src/polyfills.ts - Error: Module build failed…

ng-deep is a special selector in Angular that you should use very carefully. I often come across ng-deep in code reviews, where I investigate further to see if it is really necessary. In this post, I will talk a little bit about ng-deep: what it does, where it is useful…

In this post, we'll look at how we can apply styles to html content rendered via innerHtml attribute. By default, styles defined in an Angular component only work in that specific component. This is due to the Emulated view encapsulation policy set by Angular. This logical scope is great because…