ng-europe 2018 | Creating Beautiful Experiences Fast with Angular Material

Slides from ng-europe 2018 Talk

Overview of Material Design, Angular Material and CDK
Covers Angular Material setup, top 5 most under-appreciated components and custom theming

Transcript

1. Stefanie Trimble Fluin @stefaniefluin Creating Beautiful Experiences Fast with Angular Material
2. @stefaniefluin
3. BUSINESS DESIGN DEV
4. Angular repo
5. What We’ll Cover 1. Material Design 2. Angular Material 3. CDK 4. Top 5 Underappreciated Components
6. Material Design
7. Material Design • By Google • Visual Language • Specifications
8. Material Design Color Palette
9. EXAMPLE
10. Angular Material
11. Angular Material • By Angular Team = • Reliable = Tested Across Browsers • Accessibility
12. Angular Material • Material Design 100% • Internal Tools • Quick & Fast Prototypes ◦ + Look Good!
13. Angular Material CDK Common Behaviors Components ANGULAR MATERIAL Components Theming
14. Theming customization Corporate branding
16. Set Up
17. New Project | CLI ng new newproject cd newproject ng serve 4200
18. New Project | CLI ng new newproject --style scss cd newproject ng serve 4200 SASS | Sassy CSS
19. 1. Install Dependencies npm install @angular/material @angular/cdk npm install @angular/animations foundation Ux (DEFAULT)
20. 2. Import Animations import { BrowserAnimationModule } from '@angular/platform-browser/animations'; + Add to root ngmodules polyfill? app.module.ts
21. 3. Material Icons Font <link href="https://fonts.googleapis.com/icon?family=Material+I cons" rel="stylesheet"> + Roboto font index.html
22. 4. Prebuilt Theme Selection @import "~@angular/material/prebuilt-themes/indigo-pink.css"; colors styles.scss
23. Using Components import {MatComponentModule} from '@angular/material/component; + Add to root ngmodules Each component = small bundle size app.module.ts
24. Using Components import {MatComponentModule} from '@angular/material/component; + Add to root ngmodules Each component = small bundle size <mat-component attribute=”selection”></mat-component> app.module.ts
25. The top 5 under-appreciated Angular Material components
26. 1. Toolbar
27. 1. Toolbar import { MatToolbarModule } from '@angular/material/toolbar'; <mat-toolbar color=”primary”><STUFF></mat-toolbar> app.module.ts component.html
28. 1. Toolbar import { MatToolbarModule } from '@angular/material/toolbar'; <mat-toolbar color=”primary”> <mat-toolbar-row>STUFF</mat-toolbar-row> </mat-toolbar> app.module.ts component.html
29. 2. Button
30. 2. Button import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; <button mat-icon-button> <mat-icon>face</mat-icon> </button> app.module.ts component.html
31. 2. Button import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; <button mat-icon-button color=”primary”> <mat-icon>face</mat-icon> </button> app.module.ts component.html
32. 2. Button import { MatButtonModule } from '@angular/material/button'; import { MatIconModule } from '@angular/material/icon'; <button mat-icon-button disabled> <mat-icon>face</mat-icon> </button> app.module.ts component.html
33. 3. Sidenav
34. 3. Sidenav import { MatSidenavModule } from '@angular/material/sidenav'; <mat-sidenav-container> <mat-sidenav> <mat-nav-list><mat-list-item></… <mat-sidenav-content>MAIN CONTENT</… </mat-sidenav-container> app.module.ts component.html
35. 3. Sidenav import { MatSidenavModule } from '@angular/material/sidenav'; <mat-sidenav-container> <mat-sidenav mode=”side"> <mat-nav-list><mat-list-item></… <mat-sidenav-content>MAIN CONTENT</… </mat-sidenav-container> app.module.ts component.html
36. 3. Sidenav
37. 3. Sidenav: Button Interaction open ( ) close ( ) toggle ( ) Sidenav Methods
38. 3. Sidenav: Button Interaction <button mat-icon-button> <mat-icon>#</mat-icon> </button> app.module.ts
39. 3. Sidenav: Button Interaction <button mat-icon-button> <mat-icon>#</mat-icon> </button> ... <mat-sidenav>STUFF</mat-sidenav> app.module.ts
40. 3. Sidenav: Button Interaction <button mat-icon-button> <mat-icon>#</mat-icon> </button> ... <mat-sidenav #sidenav>STUFF</mat-sidenav> TEMPLATE REFERENCE app.module.ts
41. 3. Sidenav: Button Interaction <button mat-icon-button (click)="sidenav.toggle()"> <mat-icon>#</mat-icon> </button> ... <mat-sidenav #sidenav>STUFF</mat-sidenav> TOGGLE FUNCTION app.module.ts
42. 3. Sidenav: Button Interaction Outcome
43. 4. Dialog | Pop-Up
44. 4. Dialog | Pop-Up import { MatDialogModule } from '@angular/material/dialog'; <mat-dialog-content> <mat-dialog-actions> + Create dialog component app.module.ts component.html
45. 4. Dialog | Pop-Up constructor(private dialog: MatDialog) { } openDialog() { this.dialogRef = this.dialog.open(MyDialogComponent); } component.ts
46. 4. Dialog | Pop-Up openDialog() { this.dialogRef = this.dialog.open(DialogComponent); } <button mat-icon-button (click)=”openDialog()”> <mat-icon>#</mat-icon> </button> app.module.ts component.html
47. 5. Snackbar
48. 5. Snackbar import { MatSnackBarModule } from '@angular/material/snack-bar'; constructor( private snackBar: MatSnackBar) { } app.module.ts component.ts
49. 5. Snackbar snackTime(message: string, action: string) { this.snackBar.open(message, action, { duration: 2000,}); <button mat-icon-button> <mat-icon>content_copy</mat-icon> </button> component.ts component.html
50. 5. Snackbar snackTime(message: string, action: string) { this.snackBar.open(message, action, { duration: 2000,}); <button mat-icon-button (click)="snackTime('Code copied!', 'OK')"> <mat-icon>content_copy</mat-icon> </button> app.module.ts component.html OPEN FUNCTION
51. 5. Snackbar
52. Bonus Item: Theme
53. Custom Theme //my-custom-theme.scss 1. Import Theming Styles @import '~@angular/material/theming’;
54. Custom Theme 2. Include Common Styles (ONCE!) @include mat-core();
55. Custom Theme 3. Define Theme Colors $my-theme-primary: mat-palette($mat-blue); OR $my-theme-primary: mat-palette($mat-blue, 700, 500 , 900); $my-theme-accent: mat-palette($mat-teal);
56. Custom Theme 3. Define Theme Colors $my-theme-primary: mat-palette($mat-blue); OR $my-theme-primary: mat-palette($mat-blue, 700, 500 , 900); $my-theme-accent: mat-palette($mat-teal); $my-theme-warn: mat-palette($mat-red); ** OPTIONAL
57. Custom Theme 4. Create Theme Object $my-custom-theme: mat-light-theme($my-theme-primary, $my-theme-accent, $my-theme-warn); 5. Theme Styles @include angular-material-theme($my-custom-theme); DEFINED
58. Custom Component Styling @import '~@angular/material/theming’; $my-theme-primary: mat-palette($mat-blue); $my-theme-accent: mat-palette($mat-teal); @include angular-material-theme($my-custom-theme); @include mat-core-theme($my-custom-theme); @include mat-button-theme($my-custom-theme);
59. Custom Theme //styles.scss 6. Import Custom Theme to Main Stylesheet @import "~@angular/material/prebuilt-themes/indigo-pink.css"; @import "/my-custom-theme.scss";
60. Material Design Color Tool https://material.io/color/
61. community
62. Stefanie Trimble Fluin @stefaniefluin thanks!