Angular Material

Ionic 5 + Angular Material 9 | How to Add Angular Material in Ionic to Use its Components

Angular Material is an awesome UI framework which is fully compatible to work with Angular applications. It is fully loaded with a wide variety of awsome UI components which are supported for responsive and multi-device platforms. There are a number of easy to use components like Autocomplete, Datepicker, Stepper, Tree structures, DataTables, etc which can …

Ionic 5 + Angular Material 9 | How to Add Angular Material in Ionic to Use its Components Read More »

Angular Material 9|8 Stepper Tutorial with Examples

In this post, we will discuss How to Implement the Stepper component in Angular application using the Material library. Angular Material provides a wide range of web components which are very easy to implement and use in Angular applications. In many applications which includes large forms to take data submission, it is very important to …

Angular Material 9|8 Stepper Tutorial with Examples Read More »

Angular 8 + Material | Adding Tabs Component in Angular using Material v8.x.x

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 …

Angular 8 + Material | Adding Tabs Component in Angular using Material v8.x.x Read More »

Angular Material 9|8|7 Add Dialog Modal and Pass Data between Parent Component Tutorial by Example

In this Angular Material 9 tutorial, we’ll discuss how to implement Material Modal popup using Dialog API and pass data between parent and Modal dialog component. The Dialog component is used to show dynamic HTML content which component in a container floating over the content box, this can be closed down by user action like …

Angular Material 9|8|7 Add Dialog Modal and Pass Data between Parent Component Tutorial by Example Read More »

Angular Material 9|8 Datepicker Tutorial with Examples

In this article, we will discuss the Angular Material 8/9 Datepicker tutorial. We will develop an Angular application and learn how to add the Material UI library to use Datepickers. Angular Material is a UI library which provides several useful and Angular compatible UI components. Material’s latest version 9 can be easily installed by running …

Angular Material 9|8 Datepicker Tutorial with Examples Read More »

Angular Material 9/8 Check/ Uncheck Multi Checkbox List with Indeterminate State

In this Angular 9 tutorial, we’ll create a Multi checkbox list using the Material UI library’s mat-checkbox component. This checkbox list can be checked and unchecked by clicking a master checkbox which will also display indeterminate state. Checking/ Unchecking a list of items with checkboxes is provided with a master checkbox to provide ease to …

Angular Material 9/8 Check/ Uncheck Multi Checkbox List with Indeterminate State Read More »

Angular Material 10|9 Adding Tooltips with Options Tutorial by Example

In this Angular Material tutorial, we’ll learn How to Add Tooltip using Material UI matTooltip component in the Angular 10/9/8/7/6/5/4 project. The tooltip component is a piece of information shown to the user for actions. Tooltips prove very handy for developers to communicate with users with useful messages in the application. The best thing is …

Angular Material 10|9 Adding Tooltips with Options Tutorial by Example Read More »

Angular Material 9|8 Add Expansion Panel and Accordion in Angular project using Material

In this post, we’ll implement Expansion panel which can also be converted into an Accordion component in Angular application using Material UL library. An Accordion is an interactive component consisting of panels with headers and content section. These panels can be clicked to expand collapse to show description area. We are very well familiar with …

Angular Material 9|8 Add Expansion Panel and Accordion in Angular project using Material Read More »

Angular 10|9|8 Edit/ Add/ Delete Rows in Material Table with using Dialogs inline Row Operation

In this Angular tutorial, we are going to learn how to implement a Material table in Angular 10/9/8/7/6/5 application and perform inline CRUD operations using a dialog modal. We’ll be creating a datatable grid with the Angular Material Table component which will have some basic operations like Add, Update and Delete rows using the Dialog …

Angular 10|9|8 Edit/ Add/ Delete Rows in Material Table with using Dialogs inline Row Operation Read More »

Angular + Material | How to Install Angular Material in Angular Project

In this tutorial, we will go through quick steps to Install Angular Material in Angular project and also discuss how to add themes and different Material Components in an Angular project. Angular Material is a UI framework based on Material concepts of designs. It is a mobile-first framework properly built for Angular. The material provides …

Angular + Material | How to Install Angular Material in Angular Project Read More »

Angular Material 9/8 DataTables, Pagination, Sorting, Filter & Fixed Columns Tutorial

Angular Material is a Material Design based UI library which provides a number of easy to use UI components. Angular Material data tables are used to display data in tabular format on pages. In this tutorial, we will create a new Angular project using Angular CLI. Then we will install the Material library in an …

Angular Material 9/8 DataTables, Pagination, Sorting, Filter & Fixed Columns Tutorial Read More »

Angular 9|8|7 Material Loading Progress Spinner and Loader Bar Example

In a web application, we generally show a process status by graphical indicators like progress bars and spinners. In this post, we will discuss How to Implement the most common progress indicator Progress bar and Spinners. Angular Material provides a wide range of web components which are very easy to implement and use in Angular …

Angular 9|8|7 Material Loading Progress Spinner and Loader Bar Example Read More »

Angular 10|9 Material Autocomplete Example with Remote/ Server Side Results

In the Angular Material tutorial, we’re going to discuss how to create a Material Autocomplete showing suggestion results from a remote server by using the mat-autocomplete component in the Angular 10/9/8/7/6/5/4 application. We have already discussed the basic usage and implementation of Angular Material Autocomplete Component in an Angular Application in our previous post here. …

Angular 10|9 Material Autocomplete Example with Remote/ Server Side Results Read More »

Angular Material 10|9 AutoComplete Tutorial with Examples

In the Angular Material tutorial, we’re going to discuss how to create a Material Autocomplete showing suggestion results by using the mat-autocomplete component in Angular 10/9/8/7/6/5/4 application. An Autocomplete control looks similar to an input field but it helps a user to select a suggestion matching from a typed string.  The list of predefined suggestions …

Angular Material 10|9 AutoComplete Tutorial with Examples Read More »

Angular 9|8|7 Drag and Drop Across Multi Lists in Angular Material

In this Angular 9 tutorial, we’ll discuss how to implement drag and drop functionality using Angular Material library components. In the drag and drop lists, items can be dropped across multiple lists or in the same list. In the Angular Material version 7, two major updates were introduced, Virtual Scroll, and Drag and Drop. Both …

Angular 9|8|7 Drag and Drop Across Multi Lists in Angular Material Read More »

Angular 7 – Implement Infinite Virtual Scroll in Few Easy Steps in Latest Angular 7.x

In this post, we will discuss one of the major updates in Angular 7 version, its new Virtual scroll feature in CDK which is Material Component Development Kit. Virtual scrolling comes into action where we have a long list of item in applications, the performance of page decreases due to lots of hidden HTML data which …

Angular 7 – Implement Infinite Virtual Scroll in Few Easy Steps in Latest Angular 7.x Read More »

Scroll to Top