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
77
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
17
Get started with Lit
hardikpthv
0
48
PWA, Tools and Frameworks
hardikpthv
1
110
Routing in Angular
hardikpthv
0
67
Reactive forms in Angular
hardikpthv
2
130
Rise with Angular
hardikpthv
0
79
Angular Starter
hardikpthv
0
120
Other Decks in Technology
See All in Technology
[CV勉強会@関東 ECCV2024 読み会] オンラインマッピング x トラッキング MapTracker: Tracking with Strided Memory Fusion for Consistent Vector HD Mapping (Chen+, ECCV24)
abemii
0
230
AI前提のサービス運用ってなんだろう?
ryuichi1208
8
1.4k
OTelCol_TailSampling_and_SpanMetrics
gumamon
1
220
DynamoDB でスロットリングが発生したとき/when_throttling_occurs_in_dynamodb_short
emiki
0
270
Security-JAWS【第35回】勉強会クラウドにおけるマルウェアやコンテンツ改ざんへの対策
4su_para
0
180
複雑なState管理からの脱却
sansantech
PRO
1
160
Lexical Analysis
shigashiyama
1
150
飲食店データの分析事例とそれを支えるデータ基盤
kimujun
0
210
Why App Signing Matters for Your Android Apps - Android Bangkok Conference 2024
akexorcist
0
130
Flutterによる 効率的なAndroid・iOS・Webアプリケーション開発の事例
recruitengineers
PRO
0
120
Exadata Database Service on Dedicated Infrastructure(ExaDB-D) UI スクリーン・キャプチャ集
oracle4engineer
PRO
2
3.2k
10XにおけるData Contractの導入について: Data Contract事例共有会
10xinc
7
680
Featured
See All Featured
Visualization
eitanlees
145
15k
Become a Pro
speakerdeck
PRO
25
5k
Rebuilding a faster, lazier Slack
samanthasiow
79
8.7k
Fireside Chat
paigeccino
34
3k
Facilitating Awesome Meetings
lara
50
6.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
325
24k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
38
1.8k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
47
2.1k
CoffeeScript is Beautiful & I Never Want to Write Plain JavaScript Again
sstephenson
159
15k
Code Reviewing Like a Champion
maltzj
520
39k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
33
1.9k
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