https://github.com/btroncone/egghead-material2
Companion to Egghead.io Angular Material Lessons
https://github.com/btroncone/egghead-material2
angular angular-material2 egghead material-design
Last synced: about 1 month ago
JSON representation
Companion to Egghead.io Angular Material Lessons
- Host: GitHub
- URL: https://github.com/btroncone/egghead-material2
- Owner: btroncone
- Created: 2017-09-13T13:25:03.000Z (over 7 years ago)
- Default Branch: master
- Last Pushed: 2017-12-31T02:27:47.000Z (over 7 years ago)
- Last Synced: 2025-03-25T17:16:02.855Z (about 2 months ago)
- Topics: angular, angular-material2, egghead, material-design
- Language: TypeScript
- Homepage:
- Size: 395 KB
- Stars: 7
- Watchers: 3
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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
```bash
npm install
ng serve
```
Navigate to `http://localhost:4200/`.