Angular Setup with SASS & Angular Material Custom Theme

4 min readJan 29, 2019

This small and easy tutorial will help you to quickly jump over the angular programming ladder to swiftly design your first Angular 6+ Material design and development. We will use Angular CLI for this tutorial.

We will use the Angular CLI in this example, so let’s get started…

Angular Setup

https://cli.angular.io/

Step 1: Create a new project by running the first CLI command. This will create a new directory named angular-material with--style=scss This flag will make the default structure SASS rather than normal CSS.

Also, you can name the project whatever you like, but I’ve named it angular-material. After that, simply go to the newly created directory by running the following cd command.

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

Step 2: Test if the newly created project is running as expected. Here, the --open flag will be opening the running URL and --port 5050 will run the project on port5050, hence localhost:5050 will be your local URL where you will be able to find your first default welcome page.

ng serve --open --port 5050

Installing Material and Related Libraries

Now, as your project is up and running, it’s time for us to install required libraries to enable our project for material design.

Step 1: In this step, we will install material, cdk, animation, hammer.js Firstly, open a new tab in the same project directory and run below commands over your command prompt or terminal.

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

Step 2: Open your project in your favorite code editor and then open index.html from thesrc folder and include the following into the <head> tag to use the material icons.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

After adding the provided link, your index.html file should look something like this.

Step 3: Next, add a few new lines into the app.module.ts file:

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';import 'hammerjs';

Also, add BrowserAnimationsModule into the imports array: After these changes, your app.module.ts will look like this.

Creating a Custom Material Theme

https://material.angular.io/guide/getting-started

If you followed the instructions provided, your web app will be running smoothly, so let’s create Custom Material Theme now.

Step 1: Create a folder and name itscss inside yoursrc folder in your project directory.

Step 2: Inside the scss folder create two files: _variables.scss and _custom.scss , with “ an underscore before the file name”.

Step 3: Inside _custom.scss file, paste in the code below.

@import '~@angular/material/theming';
@include mat-core();
$primary: mat-palette($mat-grey);
$accent:  mat-palette($mat-light-blue, 600, 300, 600);
$warn:    mat-palette($mat-deep-orange, 300, 500, 800);

Step 4: Next, open your _variables.scss file and paste the following code into it.

@import "custom"; 
//Here we importing _custom.scss file but we don't need to include underscore.$theme:   mat-light-theme($primary,$accent,$warn);
@include angular-material-theme($theme);

Step 5: Open the styles.scss file from your src folder and copy the code given below.

@import './scss/_variables.scss';

Using Material Components In The Angular Template

Before we carry on, make sure your project is still running on localhost:5050.

Now Let’s add the first component inside app.component.html

Step 1: Open your app.modules.ts file and add the below into the file import section.

import { MatToolbarModule } from '@angular/material/toolbar';

After importing the component, add MatToolbarModule inside imports: array. Your file should look similar to this image.

Step 2: Finally, add a component toolbar in the template file. Remove everything in the app.component.html inside the folder and add the lines below.

https://material.angular.io/components/toolbar/overview

<mat-toolbar>Angular Material</mat-toolbar>
<mat-toolbar color="primary">Angular Material</mat-toolbar>
<mat-toolbar color="warn">Angular Material</mat-toolbar>

Conclusion

Finally, we have completed

I hope that you have some basic knowledge now and you are ready to design your angular material apps with custom themes. If everything goes well, running the URL will produce similar results.

You can play with the angular material palette numbers and check all the available ones from the _theming.scss file which is available inside @angular > material folder.