How to Fix VS Code Rename Symbols Feature for TypeScript →

Visual Studio Code is an open-source, lightweight IDE from Microsoft. I enjoy using it on a day-to-day basis, generally for front-end projects like Angular web applications. VS Code has many handy features, one of my favourite is the rename symbols feature. The rename feature allows you to easily change the…

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

How to Set Focus on Form Control in Angular →

In this post, I will show you how to programmatically set focus on a form control in Angular. Instead of the popular ElementRef solution, we will use Renderer2 to set focus on a form input. This approach is secure, easier to test and compatible with reactive forms. Here's a live…

  • Post author:

How to Make Angular Material Dialog Draggable with cdkDrag →

With the Angular Material 7 release, an exciting feature we've been waiting for — drag and drop is available with the component dev kit. In my previous article, I explained how to create a reusable confirm dialog with Angular Material. Today, we’ll learn how to make the dialog draggable. We will…

  • Post author:

Select All Option for MatSelect →

In this post, you'll learn how to implement select all option for mat-select from Angular Material. Our solution will involve creating a custom component that will be embedded inside a select dropdown. It will also support indeterminate mode of checkbox, meaning our new option will show a different icon based…

  • Post author:

Angular Routing and Navigation Tutorial →

Implement routing in Angular to enable navigation from one view to another. Users click buttons, anchor links and select options in drop-downs to perform tasks in web applications. Routing plays a key role in any modern web application and Angular makes it very easy to implement routing with router outlet.…

  • Post author:

Downloading Files in Angular →

In this post, I will show you how to download a file in Angular from a remote web API. CSV files, Excel spreadsheets, Word documents, PDF reports and images are common types of files that a functional Angular web app may need to download. In most cases, back-end APIs return…

  • Post author:

How to Force Selection in Angular Material Autocomplete →

In this post, we'll look at how to validate autocomplete component from Angular Material. Working with reactive forms, we'll write a custom validator to force selection only from the list of options. The autocomplete component is an input with a dropdown of suggested options. It allows the user to type…

  • Post author: