Tutorials, guides and articles on Angular framework.
Tutorials, guides and articles on Angular framework.
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…
Angular provides LiveAnnouncer service to trigger screen reader announcements programmatically. It works well in simple scenarios but fails to queue messages when used concurrently. In this post, I will show you how to extend LiveAnnouncer to announce simultaneous messages. Problem demonstration There are many things to consider when it comes…
As Angular developers, we often interact with the command-line interface (CLI) to scaffold components and manage packages. It is very important to master the CLI to make sure your development flow is smooth. Having developed several Angular applications myself, I have come to realise the 5 tips below. Shorten commands…
In this post, I'll show you how to parse a PDF document in Angular. We will extract full text content of a PDF file using pdfjs-dist library. Generate a new Angular application, if you do not have one already: ng new PdfReader Install the latest version of pdfjs-dist from npm:…
In this post, I will explain how you can monitor Angular apps using Microsoft Azure Application Insights. It is not unusual for organisations to ignore monitoring single page applications. Usually, back-end applications such as APIs are monitored via logs, CPU and memory usage. When it comes to front-end, there is…