Getting Started with Angular & Angular Material
This article is part 1 of an ? part series of using Angular Material and Angular (4).
Firstly, install Angular CLI via this command:
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
@angular/material as well as
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
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
ng serve in your command line to serve the app locally.
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
@angular/material and place it under the
imports in your app’s
Next, to add a button, simply add a standard
<button> with one of these five attributes:
mat-buttonfor a normal Material Design button (we’ll be using this one)
mat-raised-buttonfor a raised (aka elevation) button (we’ll be using this one as well)
mat-icon-buttonfor an icon button
mat-fabfor a Material Design FAB
mat-mini-fabfor a mini Material Design FAB
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 —
Disabling a button
To disable a button, use the
disabled attribute on a
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
Are you wondering what the
row class is? Here’s the full
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 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
Disabling a checkbox
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.
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.