July 17, 2024

Angular Material: Thoughts & Review

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.

Angular-Material logo

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.

angular material website homepage

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.

Nonetheless Angular-Material’s 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 flex="33" flex-sm="66">
  This is the second 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.

The md-grid-list directive takes different attributes such as md-cols and 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.

Thomas Greco is a web developer based out of New York City specializing in full-stack development with the M.E.A.N. stack technologies. Before web development Thomas worked as a graphic designer, and he continues to utilize his background in design when building web applications. Have a question for Thomas? You can reach him at thomasjosephgreco@yahoo.com or on social media via Twitter.

Leave a Reply

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