Tutorials, guides and articles on Angular framework.

How to Queue Messages Sent to LiveAnnouncer →

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…

  • Post author:

5 Angular CLI Tips You Should Know →

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…

  • Post author:

How to Use PDFjs to Parse PDF Documents in Angular →

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

  • Post author:

Monitoring Live Angular Apps with Application Insights →

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…

  • Post author:

Best Visual Studio Code Extensions for Angular Developers →

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…

  • Post author:

Simplifying Angular Components with Route Resolvers →

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…

  • Post author:

Angular Testing Overview: Unit, Integration & E2E Tests →

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…

  • Post author:

Execute Angular E2E Tests in Different Environments →

The default Angular project template executes end-to-end tests using the development environment. If you're like me and switch to a Mac from Windows quite frequently, you may want to have the ability to execute your e2e tests in a different configuration. We will enable executing Angular e2e tests in different…

  • Post author:

What’s New in Angular 8? [Update Guide] →

Angular 8 is finally here! In this post we will look at what's new in Angular 8. Angular 8 is a major release for the entire Angular framework, Angular Material and the CLI. Ivy renderer to be available as an opt-in previewFaster startup time on modern browsersNew APIs to interact…

  • Post author:

How to Prevent Caching Get Requests in Angular →

In this post, we will explore how to prevent caching get requests in Angular. This is an old issue that gets me every time I begin working on a new Angular project. Internet Explorer caches all GET requests, which means that a user won't see any changes after a database…

  • Post author:

Angular Loading Spinner on HTTP Request →

Loading spinners are an essential requirement for any Angular app to indicate the application is busy. This is often the case when an HTTP request is in progress. While it is possible to manually show and hide a loading spinner, we can avoid code duplication with a custom HttpInterceptor. In…

  • Post author:

Writing an Angular Pipe to Display TimeSpan Values →

I recently had an interesting problem to solve around displaying TimeSpan values in Angular. Introduction My API happens to be written in .NET Core using C#, which returns a timespan representing a duration value. Our aim is to convert TimeSpan values to the display format 1d 1h 10m. As an…

  • Post author: