Angular Material the powerful UI-KIT for AngularJS

AngularJS MaterialWhat is Angular Material?

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 Reference

API References are splitted in 3 sections Layouts,Services and Directives.

Layouts

AngularJS is based on the responsive flexbox design. The layout is based on css classes which you can add to the html.

Services

Here is a list of Services which can be used:

Angular Material Services

Directives

Here is a list of the nine best Directives which can be used:

Angular Material Directives

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:

1
bower install angular-material

Or you can use the CDN from Google as described:
https://github.com/angular/material#cdn

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:

1
angular.module(‘angularApp’, ['ngMaterial'])

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:

1
<button>Press me!</button>

You need to change the html tags, to use the Angular-Material Directives, like:

1
PRESS ME!

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!

Press me box image
Also it is possible to change easily the color of button, here are some examples for buttons:

Image buttons Angular MaterialYou 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

Angular-Material offers you also to add some Dialogs. There are some functions for JavaScript / AngularJS to interact with the dialogs. A dialog is a box which you can open via JavaScript and the box overlaps the complete page.
Here is an example of how to implement an alert into your application:

Conclusion

Angular-Material is a very powerful UI-Kit for AngularJS with some nice features and a beautiful design. But it’s often too complicated (as it should be). Sometimes you need to do a lot of code to style elements or fire up dialogs and other JavaScript related things. A good alternative is Bootstrap, although it has no directives but some more features and it’s easy to use. also offers a lot of nice things for your web application. Give both a try. For more informations about AngularJS just visit their page: https://material.angularjs.org

Sharing is caring!

Leave a Reply

Your email address will not be published. Required fields are marked *

Time limit is exhausted. Please reload CAPTCHA.