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
82
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
28
Get started with Lit
hardikpthv
0
57
PWA, Tools and Frameworks
hardikpthv
1
110
Routing in Angular
hardikpthv
0
75
Reactive forms in Angular
hardikpthv
2
130
Rise with Angular
hardikpthv
0
99
Angular Starter
hardikpthv
0
130
Other Decks in Technology
See All in Technology
メルカリIBIS:AIが拓く次世代インシデント対応
0gm
2
500
Infrastructure as Prompt実装記 〜Bedrock AgentCoreで作る自然言語インフラエージェント〜
yusukeshimizu
2
180
コミュニティと計画的偶発性理論 - 出会いが人生を変える / Life-Changing Encounters
soudai
PRO
7
1.3k
そのコンポーネント、サーバー?クライアント?App Router開発のモヤモヤを可視化する補助輪
makotot
3
210
知られざるprops命名の慣習 アクション編
uhyo
4
170
[OCI Skill Mapping] AWSユーザーのためのOCI(2025年8月20日開催)
oracle4engineer
PRO
2
110
RAID6 を楔形文字で組んで現代人を怖がらせましょう(実装編)
mimifuwa
0
280
第64回コンピュータビジョン勉強会@関東(後編)
tsukamotokenji
0
220
Autonomous Database Serverless 技術詳細 / adb-s_technical_detail_jp
oracle4engineer
PRO
18
52k
信頼できる開発プラットフォームをどう作るか?-Governance as Codeと継続的監視/フィードバックが導くPlatform Engineeringの進め方
yuriemori
1
360
KiroでGameDay開催してみよう(準備編)
yuuuuuuu168
1
110
[kickflow]20250319_少人数チームでのAutify活用
otouhujej
0
200
Featured
See All Featured
Code Review Best Practice
trishagee
70
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
Build The Right Thing And Hit Your Dates
maggiecrowley
37
2.8k
Bash Introduction
62gerente
614
210k
The Cost Of JavaScript in 2023
addyosmani
53
8.8k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
It's Worth the Effort
3n
187
28k
Navigating Team Friction
lara
188
15k
Faster Mobile Websites
deanohume
309
31k
Documentation Writing (for coders)
carmenintech
73
5k
Writing Fast Ruby
sferik
628
62k
Keith and Marios Guide to Fast Websites
keithpitt
411
22k
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