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
19
Get started with Lit
hardikpthv
0
52
PWA, Tools and Frameworks
hardikpthv
1
110
Routing in Angular
hardikpthv
0
71
Reactive forms in Angular
hardikpthv
2
130
Rise with Angular
hardikpthv
0
84
Angular Starter
hardikpthv
0
120
Other Decks in Technology
See All in Technology
個人開発から公式機能へ: PlaywrightとRailsをつなげた3年の軌跡
yusukeiwaki
11
2.7k
AWSでRAGを実現する上で感じた3つの大事なこと
ymae
3
1k
転生CISOサバイバル・ガイド / CISO Career Transition Survival Guide
kanny
3
410
目の前の仕事と向き合うことで成長できる - 仕事とスキルを広げる / Every little bit counts
soudai
22
5.8k
Data-centric AI入門第6章:Data-centric AIの実践例
x_ttyszk
1
370
Postmanを使いこなす!2025年ぜひとも押さえておきたいPostmanの10の機能
nagix
2
120
スタートアップ1人目QAエンジニアが QAチームを立ち上げ、“個”からチーム、 そして“組織”に成長するまで / How to set up QA team at reiwatravel
mii3king
1
1.1k
TAMとre:Capセキュリティ編 〜拡張脅威検出デモを添えて〜
fujiihda
1
110
[2025-02-07]生成AIで変える問い合わせの未来 〜チームグローバル化の香りを添えて〜
tosite
1
290
滅・サービスクラス🔥 / Destruction Service Class
sinsoku
6
1.5k
第13回 Data-Centric AI勉強会, 画像認識におけるData-centric AI
ksaito_osx
0
360
PL900試験から学ぶ Power Platform 基礎知識講座
kumikeyy
0
110
Featured
See All Featured
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
29
2.2k
The Cost Of JavaScript in 2023
addyosmani
47
7.3k
[RailsConf 2023] Rails as a piece of cake
palkan
53
5.2k
Build your cross-platform service in a week with App Engine
jlugia
229
18k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
27
1.5k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Statistics for Hackers
jakevdp
797
220k
Raft: Consensus for Rubyists
vanstee
137
6.8k
YesSQL, Process and Tooling at Scale
rocio
171
14k
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
Imperfection Machines: The Place of Print at Facebook
scottboms
267
13k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
666
120k
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