Tutorials, guides and articles on Angular Material framework.

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…

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…

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…

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…