A presentation at Voyager Back to Base in in Melbourne VIC, Australia by Melissa Houghton
Easy, Breezy, Beautiful: Angular Material melissahoughton.dev melissahoughton @meliss_houghton melissa-houghton
@meliss_houghton
@meliss_houghton
Angular Material @meliss_houghton
Angular @meliss_houghton
Google Angular @meliss_houghton
Google Angular Material Design @meliss_houghton
Google Angular Material Design @meliss_houghton
Google Angular Material Angular Material Design @meliss_houghton
1 How to get started 2 How to customise 3 Pros and Cons @meliss_houghton
Bank @meliss_houghton
Bank @meliss_houghton
@meliss_houghton
@meliss_houghton
@meliss_houghton
@meliss_houghton
@meliss_houghton
Reusability @meliss_houghton
How can you use Angular Material? @meliss_houghton
ng new my-app ng add @angular/material @meliss_houghton
Demo @meliss_houghton
Pros Cons Made by Angular for Angular No Built in Flex Layout Well Maintained Hard to Fully Customise Well Documented Couples your app Material is Cross Platform Built-in and Custom Themes Open Source @meliss_houghton
Angular Material Bootstrap Prime NG Kendo UI 16.6K 139K 5.8K 314 Fully Open Source Responsive Layout Builtin Built-in Themes Custom Themes No jQuery Dependency Number of Github Stars @meliss_houghton
Is Angular Material right for you? @meliss_houghton
Thank You Questions? melissahoughton.dev melissahoughton @meliss_houghton melissa-houghton
Are you an Angular developer? Do you want to make beautiful, consistent angular apps? Don’t reinvent the wheel! Use Angular Material - Angular’s UI component library based on Google’s Material Design. Made by Angular for Angular.
Angular Material is fast and easy to use, and will instantly give your app that professional polished look! Taking care of the design heavy lifting, leaving you to focus on functionality.
What is Angular Material? How do you use it? What does it give you out of the box? How can you customise it to match your style and brand?
What are the downfalls, gotchas and things to keep in mind?
Is Angular Material right for you?
Come find out the answers to all these questions and more!
The following resources were mentioned during the presentation or are useful additional information.
Completed demo on GitHub to set up Angular Material in an Angular App, with steps to set up and demonstrate the use of components and themes.
Password Reset form example set up using Angular Material, showcasing the stepper and form validation.
All the Angular Material imports in one module, to be copied into your app and imported as a separate module.
for free. You
can too.