Note : this is some intermediate Angular stuff, check out my previous posts if you are just getting started:
Also Note : Change is coming... Angular 2 is just around the corner, but for the time being we'll be working with Angular and Angular Material 1 since they are well documented/stable
Pre flight Check:
Angular Material Website - Check The release though, this post was made with 1.1.1
- Google Material Design - Read it (long read) or gloss over the documentation to get acquainted with the style,what,why,etc. In production you will most likely be given a wire frame from a designer, but if you are a one man show, it's up to you to keep things consistent or not.
Ok, Let's get started
And there you have it sir, the very simple but ubiquitous cat card component, what did we learn ? couple of things:
- 1. You need to import a few scripts plus the CSS ( Check the settings )
- 2. It works like a charm and a lot like Bootstrap ( Check the HTML )
In General :
Layouts are a huge part of what makes a front end library useful, let's look at what Angular Materials has to offer.
Lessons learned ? Angular Material builds on top of flexbox via directives to specify your layout, sounds a little complicated, but in reality ( after a bit of trial and error), it goes like this:
- 1. Add a Layout directive and speciy a row or Column flow, add responsive layouts attributes
- 2. Add content
Like any other grid system ( think Bootstrap) there are specific breakpoints for different devices and a host of other niceties to center, add padding, hide, order etc,etc, a good way to get into them is checking the very nice documentation:
Since Layouts are such a big part of development, let's dig deeper.
So like bootstrap, you concatenate or chain options to both the layout container and the individual content blocks to affect display ( following flexbox conventions ), only here you do it with directives instead of classes, all the extra options,troubleshooting and details are explained in the very concise documentation.
More Complex Directives
Now that we have a decent grasp of the basics ( or so I hope), let's explore more interactive elements, let's start with an autocomplete:
A super minimal example of autocomplete, note I am also using googles material icon library, in a nutshell, the autocomplete provides handles for expressions in the model and options (extra directives) for customizing your autocomplete, if you get stuck or want to implement a real world autocomplete, consult the docs...
Feeling a little more confident, so let's try adding more than one directive inside a layout to up the ante.
And there you have it, a very,very,very simple semi functional ( I left out the model), but practical Angular Material App.
Angular Material is a powerful,complex and extensive companion to the Angular Framework, I tried my best to cover all the bases, but I left a lot of things out which hopefully I'll cover in a second post, I hope this serves you as a gentle introduction to Angular Material.