Full-Stack To-Do List application with Node, NestJS, Angular 2+, Postgres, Liquibase and Docker (Part 6 of 9)

UI Component Library

Developing a UI is time consuming. This is why UI/Component Libraries and CSS Frameworks are so popular; they help us develop faster.

The Branch

If you’re swapping branches, jump over to angular-material-start with:

git checkout origin angular-material-start

Angular Material

I’m going to use Angular Material, Google’s Material Design spec compliant offering for Angular, on this project.

To add Angular Material to our Client-Side application we can use:

# From ./client
npx ng add @angular/material

The Angular CLI will prompt you to choose a color theme, you can choose whichever you’d like. You can even build a custom theme, although that won’t be covered in this writeup. If you’re curious about custom themes, be sure to check out my NPM package mdp-sass.

Here are my answers to the prompts, for those of you following along:

? Choose a prebuilt theme name, or "custom" for a custom theme: Purple/Green [ Preview: https://material.angular.io?theme=purple-green ]
? Set up global Angular Material typography styles? Yes
? Set up browser animations for Angular Material? Yes

Recap

Great, so now we have:

• A containerized Postgres Database
• A containerized pgAdmin service wired up to our Postgres Database
• Liquibase CLI installed and configured
• Liquibase tracking our changes in the DB
• A barebones NestJS API Application
• A barebones Angular SPA Application
• A single Changeset in our Changelog that creates our ToDo Table
• Our API is wired up to our Postgres Database
• Angular Material installed in our SPA app

Okay, now we’ve got our API and SPA BOTH ready to rock. Let’s get cookin’! 👨‍🍳