Angular Material 8 | Adding Multiple Tables 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. Continue reading Angular Material 8 | Adding Multiple Tables on Single Component Tutorial

Angular 7/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. Continue reading Angular 7/8 | Owl Datepicker & Timepicker using Ng Pick Datetime Tutorial by Example

Angular 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.

Continue reading Angular 8/7 Material Inline MatCalender/ Datepicker Tutorial by Example

Ionic 4 + Angular Material 8 | How to Install Material and Use its Components in Ionic App

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 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 4 application then try some of its components. For this, we will create a new Ionic 4 application with a blank template. Continue reading Ionic 4 + Angular Material 8 | How to Install Material and Use its Components in Ionic App

Angular Material 8 | Stepper Tutorial with Examples

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 by step formats. This type of data submission is done with the help of Stepper.

Continue reading Angular Material 8 | Stepper Tutorial with Examples

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 content on the same place.

In this tutorial, we will add Angular Material Tab’s component and also discuss available options and features in Tab’s component.

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

Angular Material 8 | Implement Dialog Modal and Pass Data between Parent Component Tutorial by Example

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. There are a number of options available for Dialog Modal configurations.

Here we will create a new Angular application then install Material to demonstrate How to add Angular Material Dialog in Application with options available also discuss on How to pass data between the parent page and Dialog component.

Continue reading Angular Material 8 | Implement Dialog Modal and Pass Data between Parent Component Tutorial by Example

Angular 8 | Template Driven Form Validation Tutorial by Example

In this tutorial, we will discuss how to add a form using Angular Material Form controls with validation. The form will have a text field, select dropdown and radio control to select an option from.

Continue reading Angular 8 | Template Driven Form Validation Tutorial by Example

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