Angular Material comes with pre-built themes to make getting started easy. Once you've picked a theme such as indigo-pink, you may want to re-use the base colours in your own components for consistency. Instead of creating your own scss variables, I would suggest copying base colours from Angular Material. Let's…
I find myself working on the wrong branch locally far too many times - enough to write a post about it. If you have been working on the wrong branch, your commit could be blocked by git: Please, commit your changes or stash them before you can switch branches. Git…
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…
Producing documentation is a laborious task that most developers dislike. Considering software delivery is an iterative approach, maintaining documentation becomes a full time work, especially for public APIs. For small teams and solo devs, tools like NSwag can do the heavy lifting of creating and maintaining documentation. Benefits of NSwag:…
Learn how to generate a database with a code-first flow using EntityFramework Core in a Web API project. TL;DR: This article will show you how to build your Web API with the new ASP.NET Core 3.1 and how to integrate with EntityFramework Core in order to provide a backing database for…
Due to the same-origin policy, most browsers restrict making requests to different domains than the originally served the website. This is a security feature that prevents a harmful site from accessing sensitive data on other sites. If you are developing an API though, cross-origin requests (CORS) are something you want…
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…
I recently had to figure out how to use JavaScript sort to order objects by date property. JavaScript sort method is available on array objects in JavaScript. It mutates the array, which means it modifies the elements of the array while sorting. The sort method has excellent support across all…
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…