Angular Material Table provides a great default filter component to filter data shown to the user, but this takes into account all columns and their cells. In this tutorial, we will create custom selection filters for the table’s values with multiple selections. Why do this? Sometimes we have data in the datatable with similar data
Angular Material provides an awesome fully-featured data-table component that can be easily implemented in an Angular application. The datatable UI component provided by Material is based on the material design provides many features like Pagination, Sortable columns, Filter data, Frozen Columns, and Rows, etc. Although Material data-tables provides high-end functionalities, small things can eat-up most
The Angular Material Tree can be added using the mat-tree directive component. This tree structure gives the ability to expand/ collapse data lists into multi-level nodes. In this tutorial, we will get to know how to add the Angular material Tree UI component in the project using the latest version of Angular Material 9.
Angular material tables provide the fully loaded table components in which we can easily add sorting, paging, filter like features without any much codding. It works like charm in real-world applications and provides a nice user-friendly user interface. Sometimes our component may represent more than one grid of tabular data, in that case, it becomes
In this tutorial, we will discuss another but popular Date and Time picker supported by Angular 2+ applications. It is well supported for Datepicker with integrated time picker and Range of date and time picker. Here we will discuss its installation on a new Angular project and all possible features and scenarios which we come
We have already discussed how to use Material UI framework in Angular project and how to use Datepicker component in a view. But sometimes we may need to show Datepicker inline in a view so that it will be always visible to the user for selections. In this tutorial, we will go through steps to
Angular Material is an awesome UI framework which is fully compatible to work with Angular applications. It is fully loaded with We Components which are supported for responsive and multi-device platforms. There is a number of easy to use components like Autocomplete, Datepicker, Stepper, Tree structures, Data tables, etc which can empower Ionic applications to
In many applications which includes large forms to take data submission, it is very important to keep the user interface simple and clean for visitors to understand. The best way is to take data from users in steps. We can divide data into multiple groups and take these input from the user in a step
Tabs component organizes different content views at one area where only one is visible time and the user can switch them by clicking on each tab’s header name. Angular Material Tabs create a beautiful layout filled with animation. Each tab section is provided with a header label name which can be clicked to show its
Dialog component is used to show HTML content in floating over the content box. The dialog is used to create a focused area on-screen generally used for data actions like Create, Update data or show alerts and confirmation. Angular Material also provides Dialog web component which can be easily used and integrated into Angular application.