Angular Material In Depth (Angular 14)

In-depth guided tour to the Angular Material component library (in Angular 14)

What you'll learn
Code in Github repository with downloadable ZIP files per section
Learn how to use the Angular Material Library
Learn how to design responsive applications with Angular Material
Learn how to setup the Navigation Menu of your Angular Material Application
Learn how to use the most commonly needed Angular Material Form Widgets
Master the Angular Material Data Table, learn server-side Pagination, Sorting and Filtering
Learn how to build Angular Material Custom Dialogs
Learn how to build an Angular Material Custom Theme
Learn the Angular Material Tree component, Virtual Scrolling and other advanced components
Requirements
Just some previous knowledge of Angular and Typescript
Description
This course covers in detail the Angular Material component library, and comes with a running Github repo.This Course in a NutshellAngular is an amazing framework that does a lot of the work for us, but one thing that the core modules don't do by themselves is provide you with commonly used user interface components.Imagine what it would be like to use Angular, but have to develop all your dropdown boxes, date pickers, menus, and all those commonly needed and very standard components every time that you need to develop an application.This would be not only impractical, but in most cases impossible as some of these components might take weeks to months to develop and test given their complexity!Also, how about styling and theming your application and make sure that everything looks neat and professional?Imagine what it would like to have to style your whole application from scratch, from a completely empty page. This is a huge amount of work and custom development that most companies prefer to avoid.And so this is where Angular Material comes in! :-)Angular Material is an amazing component suite for Angular which is based on Material Design (a UI development standard from Google).With Angular Material, you can quickly give your applications that typical Android-like Material Design look and feel, just by adding a few components and styles to your application.Also, you will never have to develop your own date picker and many other commonly needed components, everything is already available from the beginning of your project.These are very high quality components that have been extensively tested in thousands of applications, including for usability, user-friendliness and responsiveness.These components, developed by Google themselves are some of the highest quality UI components that you can choose to build your application, and they are ready to be used from day one in your project.Course OverviewIn this course we are going to build a sample Angular application from scratch using Angular Material.We are going to first set up the menu structure of the application, and then we are going to display some data on the screen using commonly used container components like tab containers, and we will apply some Material Design principles.We will then learn how to use some of the most commonly needed form controls, like inputs and text areas, date pickers, dropdowns, radio buttons and checkboxes, and other commonly used form components.We will build a complex form using Angular Material, and show how to properly display form control errors. We will then learn how to use Material data table component to display tabulated data, including how to credit in-place editable tables and expandable table rows.We will show how to paginate the data in the data table, and we will display a loading indicator to the user while the data gets loaded.We will also cover in detail a very commonly used feature which are dialogs, and discuss when to use them and when not to use them and talk about some useful best practices.We will then cover some of the most advanced components in the Angular Material suite, including it's powerful drag and drop features, the responsive design capabilities of Angular Material, and we will cover also in detail how to use the material tree component.We will learn how to handle large amounts of data using virtual scrolling, and we will finish the course by learning how to create your own custom themes.Table of ContentsThis course will go over the following topics:Set up Angular Material from scratchnavigation and containers, side menu, tab containerdisplay data with cards, use some buttonscommonly used form controls and buttons - create course forminputs and text areasradio buttons, checkboxes, tooltipsdate picker, date/time formattingDisplaying form errorsAngular Data Table in depthEditable in-line tableExpandable table rowspagination and loading indicatorOverlays, best practices to use themDrag and DropResponsive design with mat-grid-listResponsive breakpoint observersTree componentVirtual scrolling - handling large amounts of dataCustom ThemesSwitching themes at runtimeWhat Will You Learn In this Course?At the end of this course, you will feel very comfortable using the Angular Material library to build and style your applications.You will know how to add Angular Material to an existing Angular application, and you will be familiar with most of its more commonly used components, as well as with many of the most advanced components.Have a look at the course free lessons below, and please enjoy the course!

Overview

Section 1: Introduction

Lecture 1 IMPORTANT

Lecture 2 Angular Material In Depth - Helicopter View

Lecture 3 How to Take this Course - Set Up Your Local Development

Lecture 4 What is Angular Material?

Lecture 5 How to Add Angular Material to Your Project

Section 2: Angular Material Navigation and Container Components

Lecture 6 Setting Up a Complete Navigation System With Angular Material

Lecture 7 Angular Material Dropdown Menus

Lecture 8 Angular Material Tab Groups

Lecture 9 Angular Material Cards - How to Use Them?

Lecture 10 Angular Material Stepper - Multi-Step Forms

Lecture 11 Angular Material Input Field: Lots Of Useful Options

Lecture 12 Angular Material Radio Button

Lecture 13 Angular Material Select Box

Lecture 14 Angular Material Date Picker

Lecture 15 Angular Material Date Picker - Highlighting a Calendar Date

Lecture 16 Angular Material Check Box

Lecture 17 Angular Material Text Area

Lecture 18 Angular Material Tooltip - Several Useful Options

Lecture 19 Angular Material Data Table - Complete Example With Simplified DataSource

Lecture 20 How To Style The Columns of an Angular Material Data Table

Lecture 21 Angular Material Data Table - Loading Data From the Backend

Lecture 22 Angular Material Loading Indicator

Lecture 23 Angular Material Data Table Paginator

Lecture 24 Angular Material Data Table - Sorting Data

Lecture 25 Angular Material Data Table - Multi-Template Data Rows and Expandable Rows

Lecture 26 Angular Material Data Table Data Selection

Lecture 27 Angular Material Data Table - Sticky Header and Sticky Columns

Section 3: Angular Material Dialogs

Lecture 28 Angular Material Dialogs - How To Create a Dialog

Lecture 29 Angular Material Dialog - Final Implementation and Demo

Lecture 30 Angular Material Dialog - Best Practices, Patterns and Anti-Patterns

Section 4: Angular Material Advanced Features

Lecture 31 Angular Material Drag and Drop - Complete Step-by-Step Example

Lecture 32 Angular Material Drag and Drop Between Different Lists

Section 5: Responsive Design With Angular Material

Lecture 33 Introduction To Responsive Design With Angular Material

Lecture 34 The Angular Material mat-grid-list Component

Lecture 35 The Angular Material Responsive Breakpoint Observer Service

Lecture 36 Writing Responsive CSS for Angular Material Components

Lecture 37 Angular Material Responsive Dialogs

Section 6: Angular Material Tree Component

Lecture 38 Introduction to The Angular Material Tree Component

Lecture 39 Angular Material Nested Tree - Step-by-Step Example

Lecture 40 Angular Material Flat Trees

Section 7: Virtual Scrolling and Custom Themes

Lecture 41 Angular Material Virtual Scrolling

Lecture 42 Angular Material Custom Theme

Section 8: Conclusion

Lecture 43 Bonus Lecture

Lecture 44 Angular Material In Depth - Conclusions & Key Takeaways

Developers looking to get in-depth knowledge on the Angular Material Library