Sample Angular Workspace Configured for "Angular Material Blocks"

Versions

Version	Branch
20	main
19	v19

Getting started

1. Clone the repo

git clone https://github.com/shhdharmen/ngm-dev-blocks-demo-app
cd ngm-dev-blocks-demo-app

2. Install dependencies

npm i

3. Start dev server

npm start

Changing Colors

To change colors, take a look at tokens.scss file. Or if you want to use pre-built themes, remove tokens.scss from styles array in anglar.json file.

Changing typography

To change font-families, take a look at _variables.scss file. Or if you want to use Roboto font, simply make changes in styles.scss and index.html.

What's included?

• Initial setup done using npx @ngm-dev/cli init.
  • @angular/material with custom theme
  • tailwindcss with all the needed configuration
  • Material symbols configured ready to use with mat-icon component
  • Required styles included for Angular Material Blocks to run properly
• Inter and Poppins configured for plain and brand typographies
• Added below blocks to try out, present at 📁 ngm-dev-blocks folder
  • Login with email & password
  • Badge 1
  • Dialog 1
  • Onboarding feed 1
  • Simple with icons list
  • Grid List 1
  • Page Shell 1
  • Nav With Page Header
  • Full Width Three Column
  • Page Heading With meta and actions
  • Simple Stacked List
  • Area Chart 1
  • Bar Chart 1
  • Donut Chart 1
  • Line Chart 1

What's next?

You can explore blocks from https://ui.angular-material.dev/ and start adding them using npx @ngm-dev/cli add command.

Ready for more?