Angular Material 8 | Datepicker Tutorial with Examples

In this article, we will discuss how to add Datepicker using Angular Material in the project. Also, discuss some tricks to solve some basic challenges like

How to open Datepicker on Input focus?

How to Set Min and Max date in Datepicker?

Change Material Datepicker view to Year or Month by default.

Disable some of the dates or days in Datepicker calender.

Let’s start with a new Angular 8 project. Then we will install Angular Material 8 and do some configuration. If you already have a project up and running then directly jump to interesting part 🙂

Continue reading Angular Material 8 | Datepicker Tutorial with Examples

Angular Material 8/7 | Check/ Uncheck Checkbox List with Indeterminate state using MatCheckboxModule

Checking/ Unchecking a list of items with checkboxes is provided with a master checkbox to provide ease to users to control all list items. Angular Material Checkbox module MatCheckbox proves very handy in creating such lists with a number of properties.

In Material Checkbox module there are three states with Checked and Unchecked which are common, but there is also a third state called Indeterminate which is a middle of these two. Indeterminate Checkbox state indicates that some of the list items are checked but not all. It is indicated with a hyphen (-) in the checkbox.

Here we will create a list of items with a master checkbox using which a user can check to uncheck all item lists. Also if a user checks some of the items but not all, the master checkbox will show Indeterminate state which is very easy to implement.

Continue reading Angular Material 8/7 | Check/ Uncheck Checkbox List with Indeterminate state using MatCheckboxModule

Angular 7/8 | How to Add Tooltips using Angular Material components

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 developer doesn’t need to care about space as they are overlays floating above content.

Angular material provides a number of useful components which are very easy to use after configuration.

In this article, we will discuss How to add Angular Material Tooltip in the application. There is a number of parameters and options available for customizing tooltip behavior. Continue reading Angular 7/8 | How to Add Tooltips using Angular Material components

Angular Material 7/8 | Add Expansion Panel/ Accordion in Angular project using Material

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 jQuery UI library which was having a beautiful accordion component with a number of API options available.

In this tutorial, we will Implement Angular Material Accordion/ Expansion Panel component using the latest CLI and Material version 8.

Continue reading Angular Material 7/8 | Add Expansion Panel/ Accordion in Angular project using Material

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

In this guide, we are going to create a datatable grid with Angular Material Table component which will have some basic operations like Add, Update and Delete rows using Dialog component. Continue reading Angular 7/8 | Edit/ Add/ Delete Rows in Material Table with using Dialogs inline Row Operation

Angular Material 7 | Data Tables Example with Sorting, Filter, Pagination and Fixed header columns

Angular Material provides datatable components equipped with many common features like data filter, pagination, sorting on columns and even frozen columns and headers.

In this post, we will create an Angular application using Angular Material Tables component to show JSON data in tabular form. We can get data from server side using API’s. Continue reading Angular Material 7 | Data Tables Example with Sorting, Filter, Pagination and Fixed header columns

Angular 7 Material | Add Progress Spinner / Loader in Angular Application 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 applications. Continue reading Angular 7 Material | Add Progress Spinner / Loader in Angular Application Example

Angular 7/6 | Add AutoComplete in Angular Application using Angular Material

In this post, we will discuss How to Add and Autocomplete/ Suggestion box in Angular Application. Autocomplete helps a user to see predefined list items to choose from. These items in Autocomplete suggestions can be saved on local component, JSON file or remote results shown as user types in.

Autocomplete is attached to a simple input field which shows values to be filled as we see in chrome browser AutoFill. Data items to show in Autocomplete can be a simple list of an array or a JSON object.

Continue reading Angular 7/6 | Add AutoComplete in Angular Application using Angular Material

Angular 7 – Drag and Drop Across Multi Lists in Angular Material 7

Angular Material 7 has introduced two major updates, Virtual Scroll, and Drag and Drop. Both these features prove very useful and productive from a user perspective. You can check my previous post on Virtual Scroll here. In this post, we will create an application to demonstrate Drag and Drop functionality in Angular Material 7.

Drag and Drop enables a user to move anything from one place to another in a web application with the help of a mouse, this helps in creating interactive, highly simple clean user interface. In our application we will have three user lists i.e Still Doing, Done and Nevermind. A user can drop an item from any list and can drop to any other list.

Continue reading Angular 7 – Drag and Drop Across Multi Lists in Angular Material 7

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 are of no use.

Virtual scrolling improves the performance of pages by dynamically rendering only that list data which is visible to the user, as a user scrolls the current set of items replaced by new giving a glimpse of a continuous traditional list.

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