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…

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

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:

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:

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: