{"id":18658018,"url":"https://github.com/btroncone/egghead-material2","last_synced_at":"2025-09-07T12:37:27.105Z","repository":{"id":149335445,"uuid":"103402928","full_name":"btroncone/egghead-material2","owner":"btroncone","description":"Companion to Egghead.io Angular Material Lessons","archived":false,"fork":false,"pushed_at":"2017-12-31T02:27:47.000Z","size":404,"stargazers_count":7,"open_issues_count":0,"forks_count":3,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-11T21:21:25.041Z","etag":null,"topics":["angular","angular-material2","egghead","material-design"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/btroncone.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-09-13T13:25:03.000Z","updated_at":"2018-02-07T16:38:35.000Z","dependencies_parsed_at":null,"dependency_job_id":"d9082f9a-44b6-4e01-bc2c-11549a38f368","html_url":"https://github.com/btroncone/egghead-material2","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/btroncone/egghead-material2","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/btroncone%2Fegghead-material2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/btroncone%2Fegghead-material2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/btroncone%2Fegghead-material2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/btroncone%2Fegghead-material2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/btroncone","download_url":"https://codeload.github.com/btroncone/egghead-material2/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/btroncone%2Fegghead-material2/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":274039404,"owners_count":25211901,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-09-07T02:00:09.463Z","response_time":67,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","angular-material2","egghead","material-design"],"created_at":"2024-11-07T07:31:07.435Z","updated_at":"2025-09-07T12:37:27.064Z","avatar_url":"https://github.com/btroncone.png","language":"TypeScript","readme":"# Structure an Angular Application with Angular Material Components\n\n##### Companion to video course - egghead.io\n\nIn this course we will explore the major Angular Material components. We will\nstart with components related to navigation, layout, and structure. We will then\nmove through the utility, form, and datatable components, demonstrating how each\ncan be used to suit your project’s needs. Finally we will touch on theming your\napplication to create a custom look and feel that fits within the Material\nDesign guidelines.\n\nBy the end of the course you will be comfortable leveraging the Angular Material\nlibrary to structure your next Angular application, creating an awesome\ninterface and user experience!\n\n### 1. Install and Configure an Angular Material Project\nVideo - Coming Soon!\n\nThis lesson demonstrates the basic project setup required to get started with\nAngular Material. Required and suggested packages are discussed as well as\ncustom material module and theme configuration.\n\n### 2. Using the Angular Material Sidenav Component\nVideo - Coming Soon!\n\nThis lesson explores the material design sidenav component. This includes input\nand display options as well as hooking into output events to listen to sidenav\nactions within your Angular components.\n\n### 3. Using Angular Material Toolbars\nVideo - Coming Soon!\n\nThis lesson explores the material design toolbar component, configuration and\nstyling options, and how to utilize this component to create a material design\nextended app header.\n\n### 4. Using Material Design Icons for App Icons and Buttons\nVideo - Coming Soon!\n\nThis lesson explores how to configure your project to use material design icons,\ndisplay icons and icon buttons, and registering custom icons for use with the\nmaterial icon component.\n\n### 5. Manage User Input with Angular Material Inputs\nVideo - Coming Soon!\n\nThis lesson will explore the Angular Material input component. We will touch on\nsetup, configuration, display options, and error display. This lesson will also\ndemonstrate how to configure input options globally and implement custom error\nmatching strategies for your application form fields.\n\n### 6. Manage Application Loading with Angular Material Spinners and Progress Bars\nVideo - Coming Soon!\n\nThis lesson explores how to manage a variety of loading scenarios in your\napplication utilizing the built in progress bar and spinner components.\n\n### 7. Create Tabbed Interfaces using Angular Material Tabs\nVideo - Coming Soon!\n\nThis lesson explores the material design tabs component. We will discuss\nconfiguration, basic tabs, and creating a routable tabbed interface.\n\n### 8. Manage Date Selections with the Angular Material Datepicker\nVideo - Coming Soon!\n\nThis lesson explores the angular material datepicker component. This includes\nbasic setup and configuration options, validation and date range scenarios,\nconfiguring the datepicker for touch use, and how to integrate momentjs with the\nmaterial datepicker.\n\n### 9. Manage Notifications with the Angular Material Snackbar\nVideo - Coming Soon!\n\nThis lesson demonstrates how to handle notifications and alerts using the\nsnackbar component. We will cover snackbar configuration options and creating\ncustom snackbar templates utilizing dynamic data.\n\n### 10. Manage Application Dialogs with the Angular Material Dialog Component\nVideo - Coming Soon!\n\nThis lesson demonstrates how to utilize the Angular Material dialog module for\napplication dialogs. We will touch on methods to present and close dialogs,\nconfiguring your dialog to accept data, and responding to user actions when a\ndialog is dismissed.\n\n### 11. Manage Tabular Data with the Angular Material Datatable Component\nVideo - Coming Soon!\n\nThis lesson explores the Angular Material datatable component. This includes\nconfiguring your data source, setup of row and column templates, and adding\nfiltering and paging to your datatable.\n\n### 12. Create and Manage Themes with Angular Material Theming\nVideo - Coming Soon!\n\nThis lesson explores the theming hooks Angular Material provides to create a\ncustom look and feel for your application. We will discuss best practices for\ncreating and managing your own theme and using common theme variables throughout\nyour application.\n\n### To Start Project\n\n```bash\nnpm install\nng serve\n```\n\nNavigate to `http://localhost:4200/`.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbtroncone%2Fegghead-material2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fbtroncone%2Fegghead-material2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fbtroncone%2Fegghead-material2/lists"}