Intro to Material (2) Components, Custom Styles, Buttons & Indicators — Using Angular Material (2) Components in your Angular (2) Project
This article is part 2 of a 4part series of using Angular Material (2) in your Angular (2) Angular-CLI project.
Part 2 (this article) Using Angular Material (2) Components in your Angular (2) Project — Intro, Custom Styles, Buttons & Indicators (2/4)
Part 4 (coming soon) Using Angular Material Components in your Angular Project — Form Controls (4/4)
This article will take you through using button & indicator components in Angular Material2 in your app and a few custom style configurations I find useful.
What you’ll realize when reading these article is that the Angular Material library has become quite well built out and the number of components is growing quickly!
A List of Angular Material2 Components
The Angular Material2 repository has the full list of components available and being worked on if you want to poke around and see what’s coming down the pipeline (link).
For the one that have documentation and are ready to be used, the docs site has great examples here.
The Angular Material2 component library is broken up into 5 sections — Form Controls, Navigation, Layout, Buttons/Indicators/Icons, and Popups/Modals.
Within these sections are other components and variations of each component.
Adding Some CSS For Ease
When building your app and using this library, you’ll have to add a bit more custom css to get things looking the way you want.
A great example of why this is necessary is the basic button. Adding color change the font color, not the background color of the button which is what needs to change for the button color to change.
Taking your theme’s two colors (primary and accent) and creating custom css from the get go will help increase efficiency as you build your app.
I found a few presets helpful for myself.
- Having primary-color and accent-color defined in my css so I can add colors, let’s say, to paragraphs or h1 tags easily.
- Adding background-color defaults for primary and accent colors for components I may want to style as such.
- Adding white text so I can use white as my font color where I desire.
This is what I put in my styles.css file. It is quite unfortunately I have to use the
!important tag in my css to override the library’s styles, but weighing options, it’s way better than having to stop and do custom css for individual components or non-material pieces in my app every single time.
Buttons & Indicators
In this post, we’ll cover button, button toggle, chips, progress spinner, and progress bar. For other components, see the next post in this series.
Creating a basic flat button by simply adding the attribute md-button to a button element.
<button md-button>I'm a basic generic button</button>
Your button will look like this!
These buttons do not have outlines or color by default. When you click on the button, ink ripples appear.
With adding a primary color using Angular Material2, the code looks like this.
<button md-button color="primary">I'm a basic button with
And the button looks like this.
If you’re like me, you actually want a colored button with white text. Utilizing the additional styles I showed you how to set, you can make all your button dreams come true.
<button md-button class="background-primary-color white-text">I'm
a basic button with a custom css. background primary color and
The material button has a total of 5 attributes. The first is the basic flat
md-button, as displayed above.
The other 4 are
The difference between
md-button is adding
color="primary” button adds the primary color to the background!
What is looks like in your app and the code below.
<button md-raised-button color="primary">md-raised-button with
md-fab & md-mini-fab
This is an elevated circular button that usually contains an icon to signal displaying more data.
md-mini-fab is just a smaller version of
md-fab. This button defaults to the accent color specified in your app and they look like this!
Two things to note —
I had already imported material icons into my styles.css with
The text will default to black, however I used the custom class I previously set up for white text and voila.
Code for the buttons below.
<button md-fab><md-icon class="white-text">accessibility</md-icon></button>
<button md-mini-fab><md-icon class="white-text">accessibility</md-icon></button>
A full list of available material icons is here.
The last one to cover is
md-icon-button which simply encapsulates an icon with a transparent background in a flat circular button.
Here is what the button looks like.
And here’s the code.
Button Toggle Component
With Angular Material2, you can easily create a toggle button using
Here are what the buttons look like:
And here is the code associated with it:
Chips allows you to display lists of values that are individually keyboard accessible, and are great if you need to add tags to items on a page (example, a shopping site looking to sort or filter things like size, style, color, season).
Chips can be selected by using the selected property! Here are five examples of how chips can be styled.
Chips are typically placed in a list called
In order, the first is a normal chip.
The second is a normal chip with custom css classes added.
The third, fourth, and fifth have the selected property on them selected as “true” and the three types of color attributes that can be added to these chips — primary, accent, and warn.
The code for these five below.
<md-chip class="background-primary-color white-text">md-chip
<md-chip color="primary" selected="true">md-chip color="primary"
<md-chip color="accent" selected="true">md-chip color="accent"
<md-chip color="warn" selected="true">md-chip color="warn"
If you’d like to customize
md-chip with your own css, use
When you use
md-basic-chip without styles, the chips look like this.
The progress spinner is a pretty cool feature of Angular Material2. You can use the spinner as determinate to indicate % progress of a task or indeterminate to portray an app’s loading progress.
Indeterminate, the progress spinner looks like this.
Progress spinners can come in 3 colours by default. They always default to the primary colour without specification, but you can choose accent or warn.
Determinate spinners can be set by adding the value property. Below, you will see the progress spinner in the 3 colours as well as with 3 various values — 25, 50, and 75.
The code for indeterminate spinners:
The code for determinate spinners (and the example of 3 above).
<md-progress-spinner mode="determinate" value="25"></md-
<md-progress-spinner mode="determinate" value="50"
<md-progress-spinner mode="determinate" value="75" color="warn">
Progress bars in Angular Material2 can have 4 modes — indeterminate, determinate, buffer, and query.
As with most of the library’s components, you can also choose primary, accent, or warn as colours.
This is what the indeterminate progress bar looks like in motion.
md-progress-bar is pretty simple. Just define the necessary properties for each.
Here is the corresponding code so you can try it in your app.
Read Part 3 in this series to learn how to use popups, modals, and navigation components in your app.