First steps with Angular 6 using angular-cli and Angular Material

6 min readJun 1, 2017

Update 2018.12.03: If you are looking for the steps for Angular 7 look at this other post first steps Angular 7

Update 2018.07.04: Upgraded dependencies to angular-cli@6.0.8, angular/core@6.0.3 and angular/material@6.3.2, created new repo, archive previous one.

Material Design is a set specifications defined by Google to keep a consistent and appealing structure in the web and mobile applications, and with Angular-Cli to handle the project structure and Angular Material for the styling and components is very easy to get started in the creation of SPA (Single-Page-Applications) that are easy to customize and scale.

Requirements

To begin, make sure you have NodeJS (v8.9+) and NPM (v5.5.1+) installed on your machine.

You don’t need to know TypeScript to complete this tutorial, but if you want to dive deeper into the development of Angular(v2 or higher) applications you will need it.

Preparing the environment

First let’s install the Angular-Cli, just execute:

npm install @angular/cli -g

This will install globally the angular-cli tool that helps you with the scaffolding and execution of angular applications.

Once everything is complete, run:

ng -v

This will print in the console some ASCII art of angular-cli and the versions.

Now you can create an Angular project using the cli “new” command, in this case, I will name the project “angular-material-begin” and then use the parameter — style to use SASS as my css preprocessor, you can omit it and it will use CSS by default (thanks @TymothyAlcaide for the observation)

ng new angular-material-begin --style=scss

Your output may vary depending on if you have npm or yarn, or if you already have user configurations for your cli.

The cli will create a folder with the project name you set, so navigate to the applications’s folder and install the angular material dependencies.

cd angular-material-begin

And then execute this two commands:

npm install --save @angular/material @angular/cdk
npm install --save @angular/animations

These are the additional libraries that you will need to run the material component in your app, the “--save” flag is to add the dependencies to your package.json, now run the application.

ng serve

Your application will start at port 4200:

http://localhost:4200/

Navigate to the location and make sure the page is running.

If everything works fine, stop the application pressing “Ctrl+c” in the terminal.

Setting up the styles

With the environment configuration done, now is time to modify some parts of the angular application to make sure we are using the material styles and components from the framework.

Open your styles.scss and add the following code.

It is important to understand what’s going on in this file, let’s start with the imports

@import '~@angular/material/theming';
@import url('//fonts.googleapis.com/icon?family=Material+Icons');

The first one loads the angular material theming variables and functions that enable you to customize and interact with the material theme, and the second one will add the material icons from the Google CDN.

@include mat-core();

This will execute the “mat-core” function, and it adds the default styling for the material components, like colors, padding, overlays and so on.

$primary: mat-palette($mat-lime, 500);
$accent:  mat-palette($mat-lime, 500, A200, A400);
$warn:    mat-palette($mat-red, 500);

$theme: mat-light-theme($primary, $accent, $warn);$config: mat-typography-config();@include angular-material-theme($theme);

The first lines define the colors to use in your theme, and the final include executes the function and applies the variables to the theme with the defined colors, you can choose from a great amount of already defined color palettes, I strongly recommend you to go to the following page and look at the main palettes.

Color - Style

The color tool helps you create, share, and apply color palettes to your UI, as well as measure the accessibility level…

material.io

body {
    font-family: mat-font-family($config);
    font-weight: normal;
}

h1, h2, h3, h4 {
    font-weight: normal;
}

Finally, and this is a personal preference, set the typography to the body and headers (thanks to Tobias Andersen for the font family update), so we can ensure consistency across templates, but remember you can set this values to wherever font you want to use, or remove it if you want to go with the browser’s default.

By the way, the mat-typography-config() in the angular-material library is the basic configuration for the default typography which is “Roboto”, you can read more at https://github.com/angular/material2/blob/master/guides/typography.md to see how to change it.

Add material components

Finally, you can start using the components, you can get a full list of the supported components, and their documentation in the angular material website.

To begin adding components you will have to add the modules you want to use in your application, navigate to the file “src/app/app.module.ts” and make it as follows.

First we added imports for the animation module, and each one of the components you want to use.

import { MatInputModule, MatButtonModule, MatSelectModule, MatIconModule } from '@angular/material';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

And then add the import to the list of imported modules, for the app.

imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    BrowserAnimationsModule,
    MatInputModule, 
    MatButtonModule,
    MatSelectModule,
    MatIconModule
  ],

Each component has its own module that you have to add to the list of imports, this is important because the only code that will be included in your build will be each one of the modules that you have added.

Great, now we can use the material components in our application, so now navigate to the src/app/app.component.html and replace the existing html with the following:

Each one of the components had specific properties some of them are:

input field, that needs to be inside of the “mat-form-field”, the [(ngModel)] is to make the two-way binding with the variable title that it’s also present in the h1.
mat-icon, where you can change the icon by simply setting the inner text with any of the icons that are provided, you can find the icon list in here https://material.io/icons/
raised button, a normal button with a shadow effect.
select, the material version of a dropdown, bare in mind that for the sake of the example I declared the array in the template.

The mat-select is loading the items from the component class:

For the more examples of the components and further details, I recommend to check the material-components page: https://material.angular.io/components

Running the application

Great now that you have the styles, and template with the components you can run the application with the command:

ng serve

or you can use the flag — open to open your default browser:

ng serve --open

And then navigate to: http://localhost:4200 you will see the application working, with 2 way binding between the input and the title and the other components in the screen.

This is just a breadcrumb of what can be done with the angular platform and the material design, but with the help of the angular-cli is very easy to run angular applications and scaffold a lot of the day to day code, and with libraries like Angular Material is even easier to have good looking components with great functionality.

I highly recommend to watch the projects repositories to get the updates and improvements.

If you want to get the whole code for the project check my repository: https://github.com/ismaproco/angular-material-begin