Angular Material Design
Material Design is a language developed by Google. It aimed to make a persistent experience across all Google applications & platforms such as YouTube, Android, Google Play, Inbox, and Gmail. Google has announced Material Design at the 2014 Google I/O conference.
In this article we’re going to explore about Angular Material Design and its importance.
ANGULAR MATERIAL IS ABOUT:
Angular Material is a UI component library for Angular JS developers. Angular Material components help the user in constructing attractive, steady, and functional web pages and web applications while complying with modern web design principles such as browser portability, device independence, and graceful degradation. It helps the user in creating faster and responsive websites and it is inspired from Google Material Design.
SALIENT FEATURES OF ANGULAR MATERIAL DESIGN:
- In-built responsive designing.
- It also includes new versions of common user interface controls such as, buttons, check boxes, and text fields which are adapted to follow Material Design concepts.
- Standard CSS with basic essential footprint.
- It enhances the specialized features like cards, toolbar, speed dial, side navigation, and swipe.
- Cross-browser can be used to create reusable web components.
RESPONSIVE DESIGN
Angular Material has an in-built responsive designing so that, the website which is created using Angular Material will be recreated depending on the device size. The Angular classes are created in such a way that the website has to fit in any screen size. The websites which are created using Angular Material is fully compatible with PC, tablets, and mobile devices.
PROTRACTILE
- Angular Material is by design is very minimum and flat.
- It is designed by considering the fact that it is much easier to add new CSS rules than to overwrite existing CSS rules.
- It supports bold colors.
- The colors and shades remain constant across various platforms and devices.
Usage of Angular Material
There are two ways to use Angular Material, they are as follows:
- Local Installation
- CDN Based Version
Local Installation: A user can download the Angular Material libraries using npm, jspm, or a bower on a local machine and can include it in HTML code.
CDN Based Version: A user can include the angular-material.min.css and angular-material js files into their HTML code directly from the Content Delivery Network.
Local Installation:
- Firstly, the user has to install Node.js.
- Use the following command to install Angular material libraries
- npm install angular-material
- The Output will be as shown below
- angular-animate@1.5.2 node_modules\angular-animate
- angular-aria@1.5.2 node_modules\angular-aria
- angular-messages@1.5.2 node_modules\angular-messages
- angular@1.5.2 node_modules\angular
- angular-material@1.0.6 node_modules\angular-material
- npm will download the files in node_modular > angular-material folder.
CDN Based Version:
A user can include the angular-material.css and angular-material.js files into HTML code directly from the CDN.