Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Materializing Angular
Search
Hardik Pithva
October 07, 2017
Technology
0
75
Materializing Angular
Find Google Slides @
https://bit.ly/devfest-pune-17
Hardik Pithva
October 07, 2017
Tweet
Share
More Decks by Hardik Pithva
See All by Hardik Pithva
Monorepo with Micro-frontend
hardikpthv
0
13
Get started with Lit
hardikpthv
0
43
PWA, Tools and Frameworks
hardikpthv
1
110
Routing in Angular
hardikpthv
0
66
Reactive forms in Angular
hardikpthv
2
120
Rise with Angular
hardikpthv
0
78
Angular Starter
hardikpthv
0
120
Other Decks in Technology
See All in Technology
OR学会2024秋_短期収益と将来のオフ方策評価性能を考慮したクーポン割当方策混合比の決定
recruitengineers
PRO
4
470
可視化により内部品質をあげるAIドキュメントリバース/20240910 Hiromitsu Akiba
shift_evolve
0
220
『GRANBLUE FANTASY: Relink』最高の「没入感」を実現するカットシーン制作手法とそれを支える技術
cygames
1
140
AI活用したくてもできなかった不動産SaaSの今とこれから
nealle
0
330
スタッフエンジニアの道: The Staff Engineer’s Path
snoozer05
PRO
44
14k
学術機関におけるID連携とOpenID Connect
fujie
0
270
テスト”ケース”駆動開発 で手戻りをなくそう
ryohma0510
0
320
あなたの知らないiOS開発の世界
recruitengineers
PRO
3
180
Fediverse Discovery Providers overview
andypiper
0
170
株式会社EventHub・エンジニア採用資料
eventhub
0
3k
Cloud Run と GitHub Template Repository による軽量なアプリケーションプラットフォーム/ #nikkei_tech_talk
nikkei_engineer_recruiting
0
110
OCI で始める!! Red Hat OpenShift / Get Started OpenShift on OCI
oracle4engineer
PRO
1
190
Featured
See All Featured
5 minutes of I Can Smell Your CMS
philhawksworth
202
19k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
Fontdeck: Realign not Redesign
paulrobertlloyd
80
5.1k
Clear Off the Table
cherdarchuk
91
320k
WebSockets: Embracing the real-time Web
robhawkes
59
7.3k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
248
20k
Building Applications with DynamoDB
mza
90
6k
VelocityConf: Rendering Performance Case Studies
addyosmani
322
23k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
225
22k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
123
18k
Building Flexible Design Systems
yeseniaperezcruz
325
38k
How to Ace a Technical Interview
jacobian
274
23k
Transcript
None
Materializing Angular 7 October, 2017 Google DevFest | Pune Hardik
Pithva @hardikpthv
Play @ youtu.be/jE1EU1ACe6s
What is Material Design? A unified system that combines: •
Theory • Resources • Tools
Principles Material is the metaphor Bold, graphic, intentional Motion provides
meaning
Bold, graphic, intentional Relevant Informative Delightful
None
Motion provides meaning Respects and reinforces the user as the
prime mover Meaningful and appropriate, serving focus to attention Subtlety clear feedback
None
Components Helps to create beautiful apps with modular and customizable
UI components Accurate Regularly updated Open source Android, iOS and Web material.io/components
None
None
Icons material.io/icons
Typography fonts.google.com/specimen/Roboto
Color Palette
Resizer material.io/resizer
Material Design in
Available for... v.2.x.x or above material.angular.io v.1.x.x material.angularjs.org
Angular Material UI Component framework for web, mobile and desktop
Fast and Consistent Versatile Optimized for Angular
Form controls
Tabs & Paginator
Menu & Chips
Expansion Panel
Autocomplete
More @ material.angular.io/components
Flex Layout
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
Setup
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
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
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
Flex layout dependency npm install --save @angular/flex-layout * Angular Flex
Layout
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.
Import modules import {FlexLayoutModule} from '@angular/flex-layout; @NgModule({ ... imports: [FlexLayoutModule],
... }) export class AppModule { } * Import the NgModule to support flex layout
Theming @import "~@angular/material/prebuilt-themes/indigo-pink.css"; style.css Available themes : deeppurple-amber, indigo-pink, pink-bluegrey,
and purple-green <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> Add icons in your app
Demo <>
View @ online-edu.github.io/devfest
Download @ bit.ly/ng-material-vscode
Thank You Hardik Pithva @hardikpthv @GDGPune @GoogleDevIndia
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