Angular Material is an UI-Kit used for implementing the Material Design into web application. It’s based on the android style but it can be used for both, web and mobile applications. The UI-Kit offers you a set of reusable, well-tested, and accessible UI components.
Material Design is a specification for a unified system of visual, motion, and interaction design that adapts across different devices and different screen sizes. It’s developed by google and it based on the Android design, but it’s useable for mobile and desktop applications. Material defines rules for a good design. It gives convention how to design things and how it looks good. If you like to know more about Material-Design you can read the documentation from Google visit the following link for it: http://www.google.com/design/spec/material-design/introduction.html
Why Angular Material?
Angular-Material has some good implementation for AngularJS and has some powerful features and build directives for AngularJS.
Capabilities of Angular Material
Angular Material provides a big list of directives and services which can be used. These features are powerful tools to build the front of a webpage. Angular Material provides also many designs for your web application within buttons, forms and other things.
API References are splitted in 3 sections Layouts,Services and Directives.
AngularJS is based on the responsive flexbox design. The layout is based on css classes which you can add to the html.
Here is a list of Services which can be used:
Here is a list of the nine best Directives which can be used:
How do you use Angular Material?
Implement Angular-Material on your AngularJS app:
To implement Angular-Material to your app you only need to add the required files and the Angular-Material module to your app. You can do it with a bower. Bower is a package manager for applications and you can use it for a lot of plugins in AngularJS. Just type in your console:
bower install angular-material
Or you can use the CDN from Google as described:
Angular-Material will install for you into your application then you only need to include the Angular-Material module to your app, like the following line:
Now you can use Angular-Material in your AngularJS application.
What does Angular-Material offer you?
Angular-Material offers a lot of UI-design for your AngularJS application, like buttons, form elements, modals, list and so on. The implementation is very easy you only need to add css classes to your html elements to get the design. In the following chapters we tell you more about the styling of html elements. On the demo page you can see all the things who angular-material offers for your: https://material.angularjs.org/latest/#/demo/material.components.autocomplete
Style a button with Angular-Material
For example, if you have a button like the following in basic html:
You need to change the html tags, to use the Angular-Material Directives, like:
This directive generate the following code for you:
<button class="md-raised md-button md-default-theme"></button>
The Angular-Material looks like the following button, very nice!
You can change the button style by changing the class.
“md-primary” for a blue button with white font color.
“md-warn” for a red button with white font color
Without a specific class you have light grey button with dark grey font.
Dialogs with Angular-Material
Here is an example of how to implement an alert into your application: