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 1 Setting up your first Angular (2) Project Using Angular Material2 (1/4)

Part 2 (this article) Using Angular Material (2) Components in your Angular (2) Project — Intro, Custom Styles, Buttons & Indicators (2/4)

Part 3 Using Angular Material Components in your Angular Project — Popups, Modals, and Navigation (3/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!

For reference, I’m using Angular 2.4.6, Angular-CLI 1.0.0-beta.30, and Angular Material2 2.0.0-beta.1.

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.

  1. Having primary-color and accent-color defined in my css so I can add colors, let’s say, to paragraphs or h1 tags easily.
  2. Adding background-color defaults for primary and accent colors for components I may want to style as such.
  3. 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.

.primary-color {
color: #3F51B5!important;
}
.accent-color {
color: #FF4081!important;
}
.background-primary-color {
background-color: #3F51B5!important;
}
.background-accent-color {
background-color: #FF4081!important;
}
.white-text {
color: #FFF!important;
}

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.

Button Component

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!

without mouse hover
with mouse hover

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.

<div>
<button md-button color="primary">I'm a basic button with
color="primary"</button>
</div>

And the button looks like this.

without mouse hover
with mouse hover

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.

The code:

<div>
<button md-button class="background-primary-color white-text">I'm
a basic button with a custom css. background primary color and
white text.</button>
</div>

The button:

without mouse hover

Button Attributes

The material button has a total of 5 attributes. The first is the basic flat md-button, as displayed above.

The other 4 are md-raised button, md-icon-button, md-fab, and md-mini-fab.

md-raised-button

The difference between md-raised-button and 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.

<div>
<button md-raised-button>md-raised-button</button>
</div>
<div>
<button md-raised-button color="primary">md-raised-button with
color="primary"</button>
</div>

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 @import '~https://fonts.googleapis.com/icon?family=Material+Icons';

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.

<div>
<button md-fab><md-icon class="white-text">accessibility</md-icon></button>
</div>

<div>
<button md-mini-fab><md-icon class="white-text">accessibility</md-icon></button>
</div>

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.

without mouse hover
with mouse hover

And here’s the code.

<div>
<button md-icon-button><md-icon>accessibility</md-icon></button>
</div>

Button Toggle Component

With Angular Material2, you can easily create a toggle button using md-button-toggle.

Here are what the buttons look like:

without toggle
with toggle

And here is the code associated with it:

<div>
<md-button-toggle>md-button-toggle</md-button-toggle>
</div>

Chips

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 md-chip-list.

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.

<div>
<md-chip-list>
<md-chip> md-chip</md-chip>

<md-chip class="background-primary-color white-text">md-chip
background-primary-color white-text</md-chip>

<md-chip color="primary" selected="true">md-chip color="primary"
selected="true"</md-chip>

<md-chip color="accent" selected="true">md-chip color="accent"
selected="true"</md-chip>

<md-chip color="warn" selected="true">md-chip color="warn"
selected="true"</md-chip>
</md-chip-list>
</div>

If you’d like to customize md-chip with your own css, use md-basic-chip instead.

When you use md-basic-chip without styles, the chips look like this.

Code below.

<div>
<md-chip-list>
<md-basic-chip>md-basic-chip 1</md-basic-chip>
<md-basic-chip>md-basic-chip 2</md-basic-chip>
<md-basic-chip>md-basic-chip 3</md-basic-chip>
</md-chip-list>
</div>

Progress Spinner

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:

<md-progress-spinner mode="indeterminate"></md-progress-spinner>

The code for determinate spinners (and the example of 3 above).

<div>
<md-progress-spinner mode="determinate" value="25"></md-
progress-spinner>

<md-progress-spinner mode="determinate" value="50"
color="accent"></md-progress-spinner>

<md-progress-spinner mode="determinate" value="75" color="warn">
</md-progress-spinner>
</div>

Progress Bar

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.

Using 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.

<h3 class="primary-color">Determinate</h3>
<div class="margin-top-20">
<md-progress-bar
color="accent"
mode="determinate"
value="33">
</md-progress-bar>
</div>
<h3 class="primary-color">Indeterminate</h3>

<div>
<md-progress-bar
color="accent"
mode="indeterminate">
</md-progress-bar>
</div>
<h3 class="primary-color">Buffer</h3>

<div>
<md-progress-bar
color="accent"
mode="buffer"
bufferValue="40">
</md-progress-bar>
</div>
<h3 class="primary-color">Query</h3>

<div>
<md-progress-bar
color="accent"
mode="query">
</md-progress-bar>
</div>

Read Part 3 in this series to learn how to use popups, modals, and navigation components in your app.

PS you can find me on twitter @ladyleet or at a local conference! Find my schedule at ladyleet.com.