Materializing Angular - Speaker Deck

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

Materializing Angular 7 October, 2017 Google DevFest | Pune Hardik Pithva @hardikpthv

Slide 3

Slide 3 text

Play @ youtu.be/jE1EU1ACe6s

Slide 4

Slide 4 text

What is Material Design? A unified system that combines: ● Theory ● Resources ● Tools

Slide 5

Slide 5 text

Principles Material is the metaphor Bold, graphic, intentional Motion provides meaning

Slide 6

Slide 6 text

Bold, graphic, intentional Relevant Informative Delightful

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

Motion provides meaning Respects and reinforces the user as the prime mover Meaningful and appropriate, serving focus to attention Subtlety clear feedback

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

Components Helps to create beautiful apps with modular and customizable UI components Accurate Regularly updated Open source Android, iOS and Web material.io/components

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

Icons material.io/icons

Slide 14

Slide 14 text

Typography fonts.google.com/specimen/Roboto

Slide 15

Slide 15 text

Color Palette

Slide 16

Slide 16 text

Resizer material.io/resizer

Slide 17

Slide 17 text

Material Design in

Slide 18

Slide 18 text

Available for... v.2.x.x or above material.angular.io v.1.x.x material.angularjs.org

Slide 19

Slide 19 text

Angular Material UI Component framework for web, mobile and desktop Fast and Consistent Versatile Optimized for Angular

Slide 20

Slide 20 text

Form controls

Slide 21

Slide 21 text

Tabs & Paginator

Slide 22

Slide 22 text

Menu & Chips

Slide 23

Slide 23 text

Expansion Panel

Slide 24

Slide 24 text

Autocomplete

Slide 25

Slide 25 text

More @ material.angular.io/components

Slide 26

Slide 26 text

Flex Layout

Slide 27

Slide 27 text

Why! Pure-Typescript UI Layout engine No external stylesheets Independent of Angular Material (v1 or v2) Only available for Angular (v2.x or higher) Applications Support (future) for Handset/Tablet and Orientation breakpoints

Slide 28

Slide 28 text

Setup

Slide 29

Slide 29 text

Existing angular app npm install --save @angular/material @angular/cdk * Angular Material and Angular CDK npm install --save @angular/animations Animations npm install --save hammerjs Gesture Support

Slide 30

Slide 30 text

Starting from scratch npm install -g @angular/cli * Angular CLI ng new material-demo Create an Angular App ng serve Run an Angular App speakerdeck.com/hardikpthv/rise-with-angular

Slide 31

Slide 31 text

Material dependencies npm install --save @angular/material @angular/cdk * Angular Material and Angular CDK npm install --save @angular/animations Animations npm install --save hammerjs Gesture Support

Slide 32

Slide 32 text

Flex layout dependency npm install --save @angular/flex-layout * Angular Flex Layout

Slide 33

Slide 33 text

Import modules import {MatButtonModule, MatCheckboxModule} from '@angular/material'; @NgModule({ ... imports: [MatButtonModule, MatCheckboxModule], ... }) export class TutorialAppModule { } * Import the NgModule Note : Create a separate NgModule that imports all of the Material components that you will use in your application.

Slide 34

Slide 34 text

Import modules import {FlexLayoutModule} from '@angular/flex-layout; @NgModule({ ... imports: [FlexLayoutModule], ... }) export class AppModule { } * Import the NgModule to support flex layout

Slide 35

Slide 35 text

Theming @import "~@angular/material/prebuilt-themes/indigo-pink.css"; style.css Available themes : deeppurple-amber, indigo-pink, pink-bluegrey, and purple-green Add icons in your app

Slide 36

Slide 36 text

Demo <>

Slide 37

Slide 37 text

View @ online-edu.github.io/devfest

Slide 38

Slide 38 text

Download @ bit.ly/ng-material-vscode

Slide 39

Slide 39 text

Thank You Hardik Pithva @hardikpthv @GDGPune @GoogleDevIndia

Slide 40

Slide 40 text

Get the content and stay tuned ● Presentation : onlineedu.in/devfest-pune-17 ● Slides : goo.gl/pgXLJg ● Repo. : github.com/online-edu/devfest ● Tutorials : youtube.com/onlineedu ● VS Code Snippets for Material : bit.ly/ng-material-vscode