Angular is a development platform for creating applications using modern web standards. Angular includes a wealth of essential features such as mobile gestures, animations, filtering, routing, data binding, security, internationalization, and beautiful UI components. It's extremely modular, lightweight, and easy to learn.

angular

In this course we will explore integral Angular Material components. We will start with components related to navigation, layout, and structure. We will then move through the utility, input, and datatable components, demonstrating how each can be used to suit your project’s needs. Finally we will touch on theming your application to create a custom look and feel that fits within the Material Design guidelines.

By the end of the course you will be comfortable leveraging the Angular Material library to create an outstanding interface and user experience!

In this course we'll start from scratch by installing and configuring Angular Material to be used in a project. This will include configuring a custom Angular Material module as well as some prebuilt themes available to us.

We'll look through the Material api as well as apply tips and tricks on common problems you'll face when applying this style to your application. We'll cover topics such as how Material handles user input, common Material utility components (spinners, progress bars etc.), and how to properly manage tabular data and themes in Angular Material.

By the end of this course, you will be comfortable leveraging the Angular Material component library to create applications that look and feel great based on the Material design guidelines and have a high focus on accessibility.

Angular Material Components Course Overview

This lesson demonstrates the basic project setup required to get started with Angular Material. Required and suggested packages are discussed as well as custom material module and theme setup.

 Install and Configure a Project with Angular Material

This lesson explores the Angular Material sidenav component. This includes input and display options, creating a sidenav with a nav list, and utilizing the `@angular/cdk` to update sidenav settings based on the users screen size.

Use the Angular Material Sidenav Component

This lesson explores the material design toolbar component, configuration and styling options, and how to utilize this component to create an extended app header. 

Create an Extended Header Using Angular Material Toolbars

This lesson explores how to configure your project to use material design icons, display icons and icon buttons, and register custom icons for use with the material icon component.

Utilize Material Design Icons for App Icons and Buttons

This lesson will explore the input component within the material design library. We will touch on setup, configuration, display options, and error display. This lesson will also demonstrate how to configure input options globally and implement custom error matching strategies for your application form fields.

Manage User Input with Angular Material Inputs

This lesson explores how to manage different loading scenarios in your application utilizing the built in progress bar and spinner components.

Manage Loading with Angular Material Progress Bars and Spinners

This lesson explores the material design tabs component. We will discuss configuration, basic tabs, and creating a routable tabbed interface.

Create Tabbed Interfaces using Angular Material Tabs

This lesson explores the angular material datepicker component. This includes basic setup and configuration options, validation and date range scenarios, configuring the datepicker for touch use, and how to utilize momentjs with the material datepicker.

Manage Date Selection with the Angular Material Datepicker


This lesson demonstrates how to handle notifications and alerts using the snackbar component with Angular Material. We will cover snackbar configuration options and creating custom snackbar templates with dynamic data.

 Manage Notifications with the Angular Material Snackbar


This lesson demonstrates how to utilize the Angular Material dialog module for application dialogs. We will touch on methods to present and close dialogs, configuring your dialog to accept data, and responding to user actions when a dialog is dismissed.


Manage Application Dialogs with the Angular Material Dialog Component

This lesson explores the Angular Material datatable component. This includes configuring your data source, setup of row and column templates, and adding filtering and paging to your datatable.


Manage Tabular Data with the Angular Material Datatable Component

This lesson explores the theming hooks Angular Material provides to create a custom look and feel for your application. We will discuss best practices for creating and managing your own theme and theming custom components.

Structure Angular Apps with Angular Material Components

Brian Troncone

Course Content