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:

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:

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:

Calendar Component in Angular Material: The Missing Guide →

In this post, you'll learn how to use Angular Material calendar component without date picker input. The calendar component allows date selection in a month view, which could be useful for a wide range of use cases such as booking forms. In addition to displaying a calendar, we will validate…

  • Post author:

Easily Decode JSON Web Token (JWT) in Your SPA →

JSON Web Tokens (JWT) are commonly used in single page application frameworks like Angular for authentication and authorisation. In situations where you want grab the details of the user from the token, you need a way to decode it yourself. In this post, I will be using jwt-decode, which is…

  • Post author:

Angular Material Confirm Dialog →

It is a common requirement for any Angular application to prompt the user for a confirmation dialog. For instance, you may want to show a message when the user wants to delete a record or send an email. In this post, we will look at how we can implement a…

  • Post author:

How to Add Angular Material Components Correctly →

In this post, I will show you how to add Angular Material components in an Angular application. Importing UI components directly in the app.module increases the size of the module. The root module should be easy to maintain. Importing a button is not a great idea here. For example, consider…

  • Post author:

Creating a Scalable Angular Project Structure →

In this post, we create a scalable Angular project structure that is ideal for medium to large applications. Introduction Although Angular CLI does a great job at generating a new project, it does not force you to use a specific folder structure. Your initial project contains a single module, which…

  • Post author:

Angular Logging Made Simple with ngx-logger →

In my previous post, I talked about catching all errors in Angular with a global error handler. If you want to keep the errors you capture, you need to implement a reliable logging mechanism. Today, I want to explain how to enable Angular logging in your applications with ngx logger…

  • Post author:

Global Error Handling in Angular – Step by Step Tutorial →

In this post, we will implement global error handling in Angular. Global error handling is one of the first things I implement in a new project. It helps avoid repetitive try/catch blocks in Angular components, services or directives. It gives me confidence that all errors will be captured consistently. Create…

  • Post author:

Getting Started with Angular Step by Step →

Angular is a single page application (SPA) development framework for well-structured, testable and maintainable front-end applications. It is one of the most-widely used application framework in the world. According to Stack Overflow Developer Survey, Angular is used by 36.9% participants. Angular's popularity is due to its compatibility across platforms. Apps…

  • Post author: