The Angular Material project integrates Google’s Material Design with the AngularJS MVC framework and offers web engineers(especially AngularJS devs) a solid foundation of tools.
Google’s Design project is a system of tools for prototyping both web and native applications. From this Google created Material Design, a framework centered around design-driven principles.
Material Design was eventually adapted to work with AngularJS, thus marking the creation of angular-material. Throughout this article I’m going to talk further about different aspects of the angular-material project and show you how well it integrates these 2 platforms together.
Harnessing the Power of Angular-Material
When dealing with headings and other typography related styles, Angular-Material offers css classes for you to use. Much of the true power of Angular-Material is accessed through custom components that allow you to control every aspect of an Angular application.
These components come in the form of directives and attributes, and offer a broad range of functionality.
The Layout Attribute
Angular-material utilizes several variations of the
layout attribute to style web applications. In the same way that BootStrap uses classes, Angular-Material uses custom attributes to define your applications layout.
Material Design utilizes flexbox, therefore Angular-Material provides the
flex attribute for developers to use. Due to its recent struggles with browser support, many are unaware of the inherent control flexbox gives to developers.
flex attribute can take a value, though it does not necessarily have to.
Let’s take a look at a bit of code in an example from the Angular-Material website. It gives you a bit of insight as to how the flex attributes work.
<div layout="row"> <div flex="66" flex-sm="33"> This is the first div! </div> <div flex="33" flex-sm="66"> This is the second div! </div> </div>
The first div tag would flex to one-third of the space on mobile, and two-thirds on other devices, and the second div expands to two-thirds of the space on mobile, and one-third on other devices.
Functionality Through Different Directives
The flex attribute is just one of the many things that Angular-Material offers.
The framework also makes great use of directives that make tons of different thing possible. For example, Angular-Material provides directives such as
md-autocomplete which a will query through a data set depending on a user’s input. Angular-Material will perform this query in realtime, thus providing a the best possible experience for the user.
Among the other directives Angular-Material offers out of the box is
md-grid-list. This directive allows you to define complex grids layout and gives the developer a great deal control over what is displayed inside an angular app.
md-grid-list directive takes different attributes such as
md-row-height. This directive allows you to define highly complex layouts that are fully responsive, which you can see for yourself in this demo.
The angular-material framework gives you all the tools you need to create highly functional web applications that provide users with a great design & experience. Now that you have some background of the framework, I encourage you to experiment as it is truly a web developer’s best friend.