Structure an Angular Application with Angular Material Components
Companion to video course - egghead.io
In this course we will explore the major Angular Material components. We will start with components related to navigation, layout, and structure. We will then move through the utility, form, 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 structure your next Angular application, creating an awesome interface and user experience!
1. Install and Configure an Angular Material Project
Video - Coming Soon!
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 configuration.
2. Using the Angular Material Sidenav Component
Video - Coming Soon!
This lesson explores the material design sidenav component. This includes input and display options as well as hooking into output events to listen to sidenav actions within your Angular components.
3. Using Angular Material Toolbars
Video - Coming Soon!
This lesson explores the material design toolbar component, configuration and styling options, and how to utilize this component to create a material design extended app header.
4. Using Material Design Icons for App Icons and Buttons
Video - Coming Soon!
This lesson explores how to configure your project to use material design icons, display icons and icon buttons, and registering custom icons for use with the material icon component.
5. Manage User Input with Angular Material Inputs
Video - Coming Soon!
This lesson will explore the Angular Material input component. 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.
6. Manage Application Loading with Angular Material Spinners and Progress Bars
Video - Coming Soon!
This lesson explores how to manage a variety of loading scenarios in your application utilizing the built in progress bar and spinner components.
7. Create Tabbed Interfaces using Angular Material Tabs
Video - Coming Soon!
This lesson explores the material design tabs component. We will discuss configuration, basic tabs, and creating a routable tabbed interface.
8. Manage Date Selections with the Angular Material Datepicker
Video - Coming Soon!
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 integrate momentjs with the material datepicker.
9. Manage Notifications with the Angular Material Snackbar
Video - Coming Soon!
This lesson demonstrates how to handle notifications and alerts using the snackbar component. We will cover snackbar configuration options and creating custom snackbar templates utilizing dynamic data.
10. Manage Application Dialogs with the Angular Material Dialog Component
Video - Coming Soon!
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.
11. Manage Tabular Data with the Angular Material Datatable Component
Video - Coming Soon!
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.
12. Create and Manage Themes with Angular Material Theming
Video - Coming Soon!
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 using common theme variables throughout your application.
To Start Project
npm install
ng serve
Navigate to http://localhost:4200/
.