Category: Angular Material

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 a number of easy to add and use flexible UI web components, which works mailing on different device screen sizes.

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

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/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

Integrate Angular Material in Ionic 3

Angular’s team build Google’s Material design-based framework known as Angular Material. This framework is based on principles of Google material design, you can read more about it here.

Today we will discuss, on how we can fuse the beauty of Angular Material and its powerful components with Ionic 3 framework. At the end of this tutorial, you will be able to build an application which will have components from Angular Material which you can find here.

Continue reading Integrate Angular Material in Ionic 3

Angular 7/6 | Parent Child Checkbox List Structure with Expand Collapse

In this post we will discuss on How to Create a Checkbox List having parents and child structure, using single data object.

What we will do here?

– Create a list with parents and children each having a checkbox.
– Parents having controls to expand/ collapse respective children.
– Expand/ Collapse All control on top of the list.
– Select/ Unselect All control on top of the list.

Continue reading Angular 7/6 | Parent Child Checkbox List Structure with Expand Collapse