Getting Started with Angular & Angular Material

This article is part 1 of an ? part series of using Angular Material and Angular (4).

End result of the app (available here).

This article will show you how to set up Angular (4) and Angular Material. For reference, I will be using Angular CLI 1.4.4, Angular 4.2.5 and Angular Material2 2.0.0-beta.12.

Getting Started

Firstly, install Angular CLI via this command:

Installs the Angular CLI globally

Which will globally install the latest version of angular-cli.

After that, do the following which creates a new app with the app’s name and changes the directory to the app’s folder:

The first command will create a new Angular 4 project and install dependencies and the second command goes to the project folder.

Next, execute this line in your terminal on the app root in order to get the material module:

Then, in your app.module.ts file, import MatButtonModule from @angular/material as well as BrowserAnimationsModule from @angular/platform-browser/animations:

Sorry if the tab indent goes a bit wrong here. It’s like that.

Afterwards, ensure that you import the font styles for Roboto (And since you’re at index.html, you also have to add the mat-app-background class to your body element.):

Lastly, in your app’s styles.css, make sure that you import one of the four themes that is prebuilt (In this example, we’ll be using indigo-pink):

  • indigo-pink
  • deeppurple-amber
  • pink-bluegrey
  • purple-green
How on earth did I almost forget this step? 🤦‍♂

Afterwards, run ng serve in your command line to serve the app locally.


Buttons

The next step is to create a button. In the future, we will be making the app’s UI more advanced, so stay tuned for the next part of this tutorial! Anyways, to create a button, import MatButtonModule and MatCheckboxModule from @angular/material and place it under the imports in your app’s app.module.ts:

Next, to add a button, simply add a standard <button> with one of these five attributes:

  • mat-button for a normal Material Design button (we’ll be using this one)
  • mat-raised-button for a raised (aka elevation) button (we’ll be using this one as well)
  • mat-icon-button for an icon button
  • mat-fab for a Material Design FAB
  • mat-mini-fab for a mini Material Design FAB
Examples for what I meant

Setting the colour (color) of a button

(P.S. Yes, I’m not from America. I’m from Singapore. :D) Anyways, we’ll be also making use of the color attribute of a <button>. The attribute supports three properties — primary, accent and warn.

Disabling a button

To disable a button, use the disabled attribute on a <button> or <a> element.

We’ll use mat-checkbox which is basically a Material Design checkbox. Add a ref to it by specifying a hashtag with the name of the ref.

(I’m going off-topic for some reason. Back to the app!) Add the following to app.component.html:

Are you wondering what the row class is? Here’s the full styles.css:

Buttons with links

Did you know that Angular Material also supports a elements as a Material Design button? It’s as simple as adding a mat-button attribute (or whatever other attribute you want your button to be)!


Checkboxes

Checkboxes are pretty simple to do. Just use the <mat-checkbox> element and add a label (just place the label in the element). It also natively supports forms, so you can put a ngModel on the checkbox (or a ref to it).

Setting the colour of a checkbox

It’s basically the same as a button. Use the color attribute with values primary, accent or warn.

Disabling a checkbox

Use the disabled attribute to disable a checkbox.

Initially checking a checkbox

To initially check a checkbox, use the checked attribute. Alternatively, you can add an ngModel with two-way data-binding (aka [(ngModel)]) on the checkbox. Then make your app’s component implement OnInit (import from @angular/core) and adding an ngOnInit() method. Define an attribute which will be the same as the ngModel (set it to be of type boolean) and then in your ngOnInit(), set the value of this attribute to be true.


Wrap up

And that’s done! We’ve done the following:

  • Created a Material button
  • Created Material buttons with links
  • Learnt some of the attributes of a Material button
  • Created a Material checkbox
  • Learnt some of the attributes of a Material checkbox

And here’s the end result. Thanks for reading this article and have a good day developing your Angular app! Part 2 will be coming soon.