Angular Material
嚜澤ngular Material
i
Angular Material
About the Tutorial
Angular Material is a UI component library for Angular JS developers. Angular Material
components help in constructing attractive, consistent, and functional web pages and web
applications while adhering to modern web design principles like browser portability, device
independence, and graceful degradation. It helps in creating faster, beautiful, and responsive
websites. It is inspired by the Google Material Design.
Audience
This tutorial is meant for professionals who aspire to learn the basics of Angular Material and
how to use it to create faster, beautiful, and responsive websites. This tutorial explains the
fundamental concepts of Angular Material.
Prerequisites
Before proceeding with this tutorial, you should have a basic understanding of Angular JS,
HTML, CSS, JavaScript, Document Object Model (DOM), and any text editor. In addition, it will
help if you know how web-based applications work.
Execute Angular Material Online
For most of the examples given in this tutorial, you will find a Try-it option. Use this option to
execute your Angular Material programs then and there and enjoy your learning.
Try the following example using the Try-it option available at the top right corner of the
following sample code box 每
angular.module('firstApplication', ['ngMaterial']);
i
Angular Material
HTML 5
HTML5 is the next major revision of the HTML standard superseding HTML
4.01, XHTML 1.0, and XHTML 1.1. HTML5 is a standard for structuring and presenting
content on the World Wide Web.
HTML5 is a cooperation between the World Wide Web Consortium (W3C) and
the Web Hypertext Application Technology Working Group (WHATWG).
The new standard incorporates features like video playback and drag-anddrop that have been previously dependent on third-party browser plug-ins such as
Adobe Flash, Microsoft Silverlight, and Google Gears.
Copyright & Disclaimer
? Copyright 2017 by Tutorials Point (I) Pvt. Ltd.
All the content and graphics published in this e-book are the property of Tutorials Point (I) Pvt.
Ltd. The user of this e-book is prohibited to reuse, retain, copy, distribute or republish any
contents or a part of contents of this e-book in any manner without written consent of the
publisher.
We strive to update the contents of our website and tutorials as timely and as precisely as
possible, however, the contents may contain inaccuracies or errors. Tutorials Point (I) Pvt. Ltd.
provides no guarantee regarding the accuracy, timeliness or completeness of our website or its
contents including this tutorial. If you discover any errors on our website or in this tutorial,
please notify us at contact@
ii
Angular Material
Table of Contents
About the Tutorial ............................................................................................................................................. i
Audience ........................................................................................................................................................... i
Prerequisites ..................................................................................................................................................... i
Execute Angular Material Online ....................................................................................................................... i
Copyright & Disclaimer ..................................................................................................................................... ii
Table of Contents ............................................................................................................................................ iii
1.
ANGULAR MATERIAL 每 OVERVIEW .............................................................................................. 1
2.
ANGULAR MATERIAL 每 ENVIRONMENT SETUP ............................................................................. 2
How to Use Angular Material? ......................................................................................................................... 2
Local Installation .............................................................................................................................................. 2
CDN Based Version ........................................................................................................................................... 4
3.
ANGULAR MATERIAL 每 AUTOCOMPLETE...................................................................................... 6
Attributes ......................................................................................................................................................... 6
4.
ANGULAR MATERIAL 每 BOTTOM SHEET ..................................................................................... 13
5.
ANGULAR MATERIAL 每 CARDS.................................................................................................... 17
6.
ANGULAR MATERIAL 每 WIDGETS ............................................................................................... 23
Angular Material 每 Buttons ............................................................................................................................ 26
Angular Material 每 CheckBoxes ...................................................................................................................... 33
Angular Material 每 Content ............................................................................................................................ 35
Angular Material 每 DatePicker........................................................................................................................ 37
Angular Material 每 Dialogs ............................................................................................................................. 41
Angular Material 每 Divider ............................................................................................................................. 45
Angular Material 每 List ................................................................................................................................... 48
iii
Angular Material
Angular Material 每 Menu ............................................................................................................................... 51
Angular Material - Menu Bar .......................................................................................................................... 54
Angular Material 每 Progress Bars ................................................................................................................... 57
Angular Material 每 Radio Buttons .................................................................................................................. 64
Angular Material 每 Selects .............................................................................................................................. 67
Angular Material 每 Fab Toolbars..................................................................................................................... 70
Angular Material 每 Sliders .............................................................................................................................. 73
Angular Material 每 Tabs ................................................................................................................................. 76
Angular Material 每 Toolbars ........................................................................................................................... 80
Angular Material 每 Tooltips ............................................................................................................................ 84
Angular Material 每 Chips ................................................................................................................................ 87
Angular Material 每 Contact Chips ................................................................................................................... 92
7.
ANGULAR MATERIAL 每 LAYOUTS................................................................................................ 97
Layout Directive ............................................................................................................................................. 97
Flex Directive ................................................................................................................................................ 100
8.
ANGULAR MATERIAL 每 INPUTS ................................................................................................ 103
9.
ANGULAR MATERIAL 每 ICONS .................................................................................................. 107
10. ANGULAR MATERIAL 每 GRIDS .................................................................................................. 112
Attributes ..................................................................................................................................................... 112
11. ANGULAR MATERIAL 每 SIDENAV .............................................................................................. 116
12. ANGULAR MATERIAL 每 FAB SPEED DIAL ................................................................................... 119
Attributes ..................................................................................................................................................... 119
13. ANGULAR MATERIAL 每 SUBHEADERS ....................................................................................... 124
14. ANGULAR MATERIAL 每 SWIPE .................................................................................................. 127
iv
................
................
In order to avoid copyright disputes, this page is only a partial summary.
To fulfill the demand for quickly locating and searching documents.
It is intelligent file search solution for home and business.
Related download
- learn angular 8 in 15 easy steps
- angularjs notes for professionals
- jeremy wilken 郈郋迣訄邾邾邽
- angular icdst
- 35 angular interview questions and answers for 2019
- introduction to testing angular applications web age solutions
- uscis form i 9
- angular material
- angular technical university of valencia
- angular 9 ccsa checkpoint sevenmentor
Related searches
- material and non material cultures
- material and non material elements of culture
- material and non material culture examples
- material and non material culture
- non material culture vs material culture
- angular material table custom sort
- angular material table sorting
- angular material charts
- angular material table tutorial
- angular material button size
- angular material documentation
- angular material data table