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
72
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
8
Get started with Lit
hardikpthv
0
35
PWA, Tools and Frameworks
hardikpthv
1
100
Routing in Angular
hardikpthv
0
62
Reactive forms in Angular
hardikpthv
2
120
Rise with Angular
hardikpthv
0
76
Angular Starter
hardikpthv
0
110
Other Decks in Technology
See All in Technology
TiDBにおけるテーブル設計と最適化の事例
cygames
0
790
Taking Flight with Tailwind CSS
opdavies
0
4.3k
拓展QA日常工作的邊界
line_developers_tw
PRO
0
550
生成AIと産業向けソフトウェアの自動生成 〜 ハノーバーメッセ2024より〜
kioto
2
420
Laboratories in Science and Technology: Deep Neural Networks
keio_smilab
PRO
3
110
技術力の伸ばし方を考える
khirata
0
140
試作とデモンストレーション / Prototyping and Demonstrations
ks91
PRO
0
160
エムスリーQAチーム紹介資料 / Introduction of M3 QA Team
m3_engineering
1
320
本番環境で Cloudflareを 使ってみた話
miu_crescent
2
120
知識と実践を紡ぐGenAI / Connecting Knowledge and experience with GenAI
aki_moon
2
180
Domain-driven Design: A Complete Example
ewolff
2
250
サービス開発におけるVue3とTypeScriptの親和性について
tsukuha
10
1.8k
Featured
See All Featured
Keith and Marios Guide to Fast Websites
keithpitt
408
22k
Rails Girls Zürich Keynote
gr2m
91
13k
The Pragmatic Product Professional
lauravandoore
26
5.9k
Become a Pro
speakerdeck
PRO
13
4.6k
Music & Morning Musume
bryan
41
5.6k
The Cult of Friendly URLs
andyhume
74
5.7k
How To Stay Up To Date on Web Technology
chriscoyier
782
250k
A Philosophy of Restraint
colly
197
16k
Atom: Resistance is Futile
akmur
260
25k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
26
2.3k
Imperfection Machines: The Place of Print at Facebook
scottboms
261
12k
The Power of CSS Pseudo Elements
geoffreycrofte
62
5k
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