Angular 10|9 Copy to Clipboard using Material or ngx-clipboard package

In this Angular tutorial, we’ll learn how to implement Copy to Clipboard feature in Angular 10/9/8/7/6/5/4 application by using two ways.

Copy to Clipboard feature is required in an application to facilitate the user to quickly copy a text or content. Like we can have Cuopns, Offer codes, Some poems, Lyrics, etc which is intended to be copied by users.

For this to get happened, we simply add a button using which a user just clicks on a button to copy the test without any mouse or keyboard operations.

In Angular application, we can easily implement Copy to Clipboard feature in two ways:

Angular Material: If you are using the Material UI package in your application, then there is no need to incorporate any third-party package. You can just use the ClipboardModule API and start using the feature.

NPM package: If your Angular application is not using Material, then we can install the best available NPM package, to provide Copy to Clipboard feature in few steps.

Read more

Angular Material 10/9 Datatable Expand/ Collapse Single or Multiple Rows

In this Angular 10/9/8/7 Material tutorial, we’ll discuss how to add extra rows and enable Expand and Collapse for single or multiple rows on button click in the material datatable.

Angular material provides a wide variety of UI components, Datatables is one of the topmost used components to create a tabular grid with multiple features and functionality support. The Material Database supports many awesome features like Sorting, Data filter, Pagination, Column and Row freeze, etc.

Today we are going to discuss how to implement Expand and Collapse rows feature in the material data tables. Tables can have varied types of data, sometimes in a hierarchy where each row can in turn have a table or som more data to show. User can click on a row to expand and explore more data which can be loaded from a remote server.

We’ll create a new Angular project, add Material UI package then implement Datatable to explore how to add expand collapse feature. We will add additional row on the table to perform expand/ collapse functionality. There will be a button on top of the grid, a user can click on that button to expand/ collapse multiple rows in the tables.

Read more

Angular Material Datatable | ‘No Records Found!’ & Hide Pagination

In this Angular 9/8 Material tutorial, we’ll discuss how to show a ‘No records found!‘ message when there is no data to show in the data list and also hide the pagination.

Angular Material’s Datatables is a well-equipped component to show data in tables with lots of features like Sorting, Data filtration, Pagination Column freeze, etc. But believe me or not it lacks a very basic user experience. Yes! you got it right.

I just want to show a message to a gazing soul that there is nothing found my friend…

How to show a small UX enhancing ‘No data found!’ message in the Material Datatable Grid?

I tried to dig into the Table and Paginator API’s but nothing was there to solve this simple and very basic UX.

Read more

Angular Material 9|8 Progress Bar Loader Example Tutorial

In this post, we will discuss How to Implement the Progress bar in Angular application using the Material library.

Angular Material provides a wide range of web components that are very easy to implement and use in Angular applications.

Here we will create a new Angular project using CLI and discuss How to use Progress bar with different options and types. A progress bar is a horizontal line with animation to indicate that a process is number progress which can be related to document o image upload or some server transaction.

It is used to indicate a process status which can be a determinate process which shows a percentage of task completed and left or indeterminate which just indicates that the process is under progress but not know how much time it will take.

Read more

Angular Material 9 Modal Popup Example

In this post, we’ll learn how to open a Modal Popup Dialog in Angular 9/8 application using the Material UI library.

Angular Material is a UI library which provides a number of components. It works great with the Angular framework and helps in developing awesome applications. This UI library is based on Material design principals which add on user experience a lot!

Here we will discuss How to add and use Modals as we have seen in Bootstrap projects. But in an Angular project, we’ll use the Material library to implement Modals. Like any other library, Material Modals can communicate with data which we can pass from parent and in return, the Modals can return back the data on close events.

Read more

Angular 12 Material Datatable Inline HttpClient CRUD Operations using RestFull APIs

In this Angular tutorial, we’ll learn how to use the HttpClient module in Angular application to make RESTFull API Ajax calls.

We’ll set up a new Angular 12 project and create API endpoints to perform Create, Read, Update and Delete operations using HTTP methods using a mock server using the json-server package. Using json-server we can create a local JSON file which can act as a database for our application. There is no difference between a local mock server and a real database.

We’ll perform HTTP operation using API endpoints to add, edit, delete and get list of items listed in an Angular Material Datatable. This Material Datatable will have action column using which user an Edit or Delete a row. There will be a form over the table to Add or Update existing rows in the table.

Read more

Angular Material 9|8 DataTable, Pagination, Sorting, Filter and Fixed Columns Tutorial

In this tutorial, we will learn How to add data tables in Angular 9/8 application using the Material UI library.

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 a single NPM command in Angular CLI command line. A Datatable is an advanced form of a table which supports advanced functionalities including Pagination, Sorting, Filter bar and Fixed columns.

Using the Material Datatables, implementation of these functionality becomes very easy. In this demo tutorial, we will create a new Angular 9 application using Angular CLI tool. After that, we will install the Material library in the project to use Datatables and its features.

Read more

Angular Material 9|8|7 mat-table multiple column filters using select boxes

Angular Material 9/8 DataTable columns with each having its own separate filter, we are going to learn with an example tutorial in this post.

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 values for example STATUS column may have Active, InActive, Blocked values. So we can create a filter for Status to show only Active rows.

Here we will also create a function to fetch Unique values from Table rows itself and generate Filte drop down to the filter.

Read more

Angular 9|8|7 Material Table Column Width, Text Alignment Customization

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 of our time.

One such case is sometimes developers find it difficult to fix the width of columns according to needs. In Angular Material data-table each column is equally divided according to the width of the container where it is kept.

Read more

Angular Material 8/9 Tree Tutorial By Example

In this tutorial, we will explore the Angular Material’s Tree structure UI component. A tree structure depicts a hierarchy of data in a parent-child relation. These tree nodes can be collapsed and expanded to deep drill over child items.

Material is an Angular compatible UI library which provides a wide variety of components following a Material design approach.

The Angular Material Tree can be added using the mat-tree component directive. This tree structure gives the ability to expand/ collapse data lists into multi-level nodes. Here 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.

The Material Tree UI component will be dynamically created using a JSON object.

Read more

Angular Material 9|8|7 Adding Multiple MatTables on Single Component Tutorial

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 a bit confusing on how to add more than one Angular material tables in a single component having respective sorting and pagination components.

Read more

Angular 9|8 Owl Datepicker & Timepicker using Ng Pick Datetime Tutorial by Example

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 across in a real-world app.

Read more

Angular 9|8|7 Material Inline MatCalender/ Datepicker Tutorial by Example

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 demonstrate how to use Calendar inline in component with available options like:

  • Set Max Date
  • Set Min Date
  • Filter some of the dates; Disable Sundays and Saturdays in Inline MatCalender
  • Start At property
  • Event trigger control on date selected.

Read more

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 empower Ionic applications to the next level.

In this tutorial, we will get to know how to install Angular Material UI Components in an Ionic application.

We will first install Material packages in Ionic 5 application then try some of its components. For this, we will create a new Ionic application with a blank template.

Read more