Tutorials, guides and articles on Angular framework.
Tutorials, guides and articles on Angular framework.
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. [toc] Shorten…
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…
Without a doubt, Visual Studio Code is one of the most popular front-end IDEs. It's popularity is due to its speed and customisability with extensions from the marketplace. Even though Microsoft has been improving VS Code to include new features, there are still missing features! I will share the best…
I often come across Angular components that retrieve data from a remote API inside the ngOnInit lifecycle hook. While this is an easy way to load data into the component, it can can increase the size of the component and lead to duplication. A better approach is to use route…
Angular is a modern, highly performant application framework. Learning Angular is one of the best things you can do in your career as a web developer. But it is no good if your code does not work, which is where a good test suite comes into play. I have built…
Azure Application Insights is a cloud based application monitoring service from Microsoft. You can monitor your applications in all of your environments with Application Insights, including development and production. Microsoft has been shipping Visual Studio with built-in support for Application Insights in Windows. However, Visual Studio for Mac does not…