Being a Materialist

Google’s Material Gods ©Google

I spent the last couple of days mostly over using Material 2 only in my Angular app against using bootstrap\foundation, and my conclusion is:

Material 2 takes a while to get used to, but it is amazing when it works and cuts a lot of time on basic UI

*At the time of writing, material 2 is in beta and should be regarded as such, the documentation is not complete and more components are in the works

If you haven’t heard by now about the Material Design concept that Google embraced in the last couple of years, you have at least seen it on numerous websites (All of Google’s services , Facebook and even Medium ^ )


I’ve read this April Fool’s post from last year on WebDesignerDepot:

As much as it is terrifying and funny ( Google taking over the web standardizing every website through the power of Google Chrome), It practically happened over the last years in some sense, from android applications through web applications and WordPress themes, material design really holds the web at the moment.


But is it good?

Before talking about material 2 which is just an ‘UI toolbox’, Generally speaking, I think embracing material design web-wide would increase the usability and positive user experience in a whole lot of websites, for example, many news websites and government websites are really lacking in that area. On the other side of the coin, I believe niche design concepts and methods should still be primarily used when necessary.


And now about material 2:

Material 2 as I mentioned earlier is an ‘UI toolbox’ for developers to use while applying Google’s Material design concepts, It is material 1’s successor for Angular 2+.

Material 2 provides you with great basic UI components which are actually angular 2 components and can and should be used as such (Example coming up) ranging from input and buttons all the way to dialogs, tooltips, and grids.

Of course, BootStrap supplies you with these too, But when building an Angular application, you’d have to incorporate angular’s component logic into them anyway, I started my application using BootStrap but felt it cluttered my HTML from being simplistic, also: BootStrap uses jQuery separately against angular 2’s recommendation.

You could use an integration of BootStrap 4 and Angular 2 which is in the works, But if you’re going for that, why not to try material 2 first?


I’ll give a few examples from the application I’m currently working on and from the docs:

Tabs and Routers:

Probably something you’ll see in every one-page application or website, the tabs component that material 2 equips you with, handles routing out of the box assuming you have set a router.

You could use it to either display some content with its’ out of the box configuration, or activate routers:

The content would be displayed upon selection of the tab:

<md-tab-group>
<md-tab label="Tab 1">Content 1</md-tab>
<md-tab label="Tab 2">Content 2</md-tab>
</md-tab-group>

*From angular material 2 documentation

The current route will be set upon selection of the tab:

<navid="nav"md-tab-nav-bar>
<a md-tab-link
*ngFor="let link of navLinks"
[routerLink]="link"
routerLinkActive #rla="routerLinkActive"
[active]="rla.isActive">
{{link}}
</a>
</nav>
<router-outlet></router-outlet> // Can be placed in any other template

As you can see, both are short and readable, and not clogged of bootstrap (Read further, there's a catch). Also, the whole logic stays in the template where it really should be

*From my project


Inputs, Selections, and Buttons:

Pretty much basic user interaction, not only easily applicable with material 2, also helps with transferring the information between them and controlling the whole ‘Form’.

For example, a simple drop-down select menu, with easy transfer of the current selection without writing any native JS, jQuery event handlers. Only using angular’s data binding syntax:

<md-selectplaceholder="Skill"name="skill"
[(ngModel)]="selectedSkill">
<md-option *ngFor="let skill of skills" [value]="skill">
{{skill.name}}
</md-option>
</md-select>
I must stress at this point that I don’t know if vueJS or React make it even simpler but as an angular 2 newcomer, I found it really intuitive even though the documentation isn’t fully ready for some components.

Regarding inputs, buttons and even checkboxes: material 2 gives you a handy API to handle their events, require them, disable them and even styling them! Some of the API options provided don’t always work as expected which is a shame, but I hope it will be better on the release.

Okay..So far it sounds like I’m advertising and pushing Google’s Materials (Eh?).

But now comes the part of which I’m writing this blog post in the first place.


Grid System

Don’t mistake for the Grid-List component which is a fabulous component to lay out a gallery of items: I’m talking about a Grid Layout System like BootStrap and Foundation have.

material 2 doesn’t come with such, that is written on the box in letters too small and took me a while to find these letters (in the docs btw).

For that, you’re recommended to use angular/flex-layout. And I’m surprised it is not bundled with material as from my experience of the last couple of days:

Material DOESNT PLAY WELL WITH CSS -> ONLY WITH FLEX CSS

You could set flexbox rules on your own, and that would definitely work well. But flex-layout provides you with a very handy tool to do it on your own which:

  • Plays very well with material 1 and 2
  • Very responsive
  • Follows Google’s Material design responsive sizes rules (See Responsive API)

I wish I’ve found it earlier, after a while it works as expected and surprisingly much easier and readable than bootstrap’s HTML syntax.


Thank you for the read, I’d love to hear from you and your experience with material 2, please correct me if I made a mistake.

Have a great Easter and Passover :)