Creating a Material Baseline for Stackblitz

Photo by Henry Ascroft on Unsplash

Scenario

We need a baseline Angular Material project that we can fork on Stackblitz.

Approach

Dependencies

• @angular/cdk
• @angular/animations
• @angular/material

Step 0

Create a blank stackblitz demo and install the above mentioned dependencies (Just click on dependencies on the right hand side and type in the name of the above dependencies).

Step 1

Initialize the main styles.css stylesheet:

Step 2

Initialize the index.html file with the material icons CDN:

Summary

Congrats you are now ready to start experimenting with styled Angular Material components. You could for example try the Angular Material toolbar tutorial:

Creating a Material Toolbar

Here’s a completed baseline that you can fork for your own prototypes. The material module includes all the material module dependencies:

Related

Angular 9 Material Base Module