Tutorials, guides and articles on Angular Material framework.
Tutorials, guides and articles on Angular Material framework.
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…
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…
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…
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…
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…
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…
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…
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…