A Look at Angular Material

Sateesh Arveti
Feb 26, 2016

9.2k
0
2
- facebook
- twitter
- linkedIn
- Reddit
- WhatsApp
- Email
- Print
- Other Artcile

In this article, we will look into Angular Material, which will help to build responsive web sites using re-usable UI components. This library is built using AngularJS and has components to build sites faster; it’s like JQuery UI for JQuery. It provides UI components like Tabs, Toolbar, Dialog and enhanced buttons, checkbox, responsive layouts, and theming as well. This library uses TypeScript [superset of JavaScript] andis based on Google's Material Design, which is a specification for a unified system of visual, motion, and interaction design that adapts across different devices and different screen sizes. You can get more details about it from here.

Let’s understand it further by writing few samples using CodePen, which is like a JSFiddle. It has existing pens/demos, built on Angular material. CodePen helps us to develop angular material applications quickly without any installation using a browser. Let’s go to this link, which will show existing pens:

pens

Let’s create a blank pen by going to this link, then click on Blank pen:

pen
It will add required references to AngularJS, material and other libraries as well. Let’s hide CSS and JS panes and add the following material components to HTML pane under body section:

code

Here, I added two tabs with two buttons in first tab. It uses AngularJS directives and services for building UI components. In the above HTML, I used md-tabs directive and md-button for creating tabs and buttons with different styles. It use a layout similar to Bootstrap, I specified layout-sm=”column”, it means layout direction vertically in a column and layout automatically changes depending upon the device screen size [here,600px <= width < 960px]. For other layouts, refer here.

Here, we applied theming to md-button by using intention classes [class=”md-raised md-primary”]. These intention classes change the look and feel of components like buttons, checkbox, radio button, etc.

We can edit existing pens by clicking on the following highlighted icon on any pen.

pen

Apart from UI components, it provides theming, responsive layouts like Bootstrap and CSS customization. We can find demos on all components here. After that click on demos link. We will look into other UI component chips:

code

Here, I bind chips components to an array using ng-model directive. I am ending things here. In the next article, we will drill down more on Angular Material and look into setting up local development environmens using npm or bower and integrating it with AngularJS directives. I hope this article will be helpful for all.