Tutorials, guides and articles on Angular Material framework.

Read more about the article How to Use Angular Material Theme Colours in Your Components
Angular Material

How to Use Angular Material Theme Colours in Your Components

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…

0 Comments
Read more about the article How to Set Focus on Form Control in Angular
Angular Material Focus Form Input

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. [toc] Here's a…

1 Comment
Read more about the article How to Make Angular Material Dialog Draggable with cdkDrag
Angular Material Draggable Dialog

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…

2 Comments
Read more about the article Select All Option for MatSelect
Angular Material Select All Options Mat Select

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…

4 Comments
Read more about the article How to Force Selection in Angular Material Autocomplete
Force Selection in Autocomplete

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. [toc] The autocomplete component is an input with a dropdown of suggested options. It allows the user to…

16 Comments

Calendar Component in Angular Material

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…

21 Comments
Read more about the article Angular Material Confirm Dialog
Angular Material Reusable Confirm Dialog

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…

11 Comments
Read more about the article How to Add Angular Material Components Correctly
Import Angular Material

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…

2 Comments