Search and buy domains from Namecheap

Angular Material - Getting Started

In this lecture, we will see how to add angular material to an angular application, so before we dive into that I just want to tell that for this course we will be closely looking at the documentation and that's for two major reasons:

  1. To stay updated with the changes, there will be future releases of angular material and it is safe to rely on the documentation as it is constantly updated.
  2. To be familiarized with the directives that will be used for different components, when we start writing the code we need to import certain components and it is almost impossible to know the names of the components without referring to the documentation.

So please make sure to have a tab open for the docs while you're following the entire course. Now let's start the fun things.

Add Angular Material To Angular Application

You can always refer to this page to add angular material to your existing angular application, but don't worry we will do it here.

As I mentioned before on this course we'll be working with angular 7. So here is how to add angular material with CLI schematics which is valid for angular version 6 and above.

Now open your terminal I recommend using Cmder if you're on windows. if you just type ng --version you'll see what version is installed on your machine. ng --version For me I have angular 7.3.9, if you're at a lower version please make sure to update it before creating a new angular project.

Update angular CLI

You can only update your angular CLI by uninstalling the current version and then install the latest one again by running those commands:

npm uninstall -g angular-cli
npm cache clean or npm cache verify (if npm > 5)
npm install -g @angular/cli@latest

Create a new Angular Project

Now that everything is okay let's create a new project, I'll name material-demo feel free to name what you like, so here is how to create a new angular project using angular CLI:

ِng new material-demo

It would ask you some questions just type yes and choose SCSS as a stylesheet format to use.

After that the project folder that has been generated let's open it with vscode.

Set up Angular Material

Make sure you navigate into the folder project using your terminal and run this command:

ng add @angular/material

When we run the command it's going to ask as which theme we would like to use, I'm going to stick to the default one which isIndigo/Pink and also it's gonna ask if you want to use HammerJs for gesture recognition Just chose yes, for now, next browser animations again yes.

ng add @angular/material

That is pretty much what you have to do, you are ready to start using angular material in your application, of course, this was possible because angular material is packaged CLI schematics, that means that angular team provided us with a single command that will handle setting up material in our applications.

To see what changes are made by running the command, just click on that icon in vscode before you commit any changes and compare each file and see what have been added by clicking this icon, it's just like you tap git status if you have any knowledge of git.

adding angular material

Checking If Angular Material Working

To check if angular material is added and working successfully on our application, I will choose a button component from angular material and implement it in my application. For that, there will be three simple steps to do first.

Step 1: Import Button Component

In order to work with any component from angular material you should import it first in src/app/app.module.ts

import { MatButtonModule } from '@angular/material';

Step 2: Add Button Component to Imports Array

After adding that single line in your app.module.ts now you should add it to import array:

  imports: [
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    MatButtonModule
  ],

Step 3: Use Button Component in HTML

Now let's open src/app/app.component.html Just delete all existing HTML code and write this new line, notice that I added a new directive which is mat-button which is the name of button component.

<button mat-button>Click Me!</button>

Serve The Application

Now that we have done these changes let's open our application in the browser and see what's there. In order to serve an angular application just run this command in your terminal.

ng serve -o

It's gonna take some time because it's the first time it compiles the files, but don't worry it will be fast after that.

The result in the browser looks like that: serving angular app Ase you can see the button doesn't look as it should be like a real button, but when you hover you can see that the cursor becomes a pointer and the button's background changes. Let's make these buttons looks good by changing mat-button to mat-raised-button.

<button mat-raised-button>Click Me!</button>

When you save the files the changes appear on the browser almost instantly that's because of angular CLI magic, of course, you should keep your terminal running. mat raised button So the button changes a little bit there is some elevation (drop shadows) and it looks like a real button now with the effect of the waves by material design from Google.

Conclusion

Now we are 100% that the material library is working just fine as it should. But did you ask how should I know the names of these components, well this is a good question.

The answer is pretty simple refer to the documentation it's kind of a necessity for this particular course. There no other way that we can know what directives have to be used for which component.

This was a simple getting started with angular material. in the next lecture, we will see how to setup the Angular Module.