Categories
Angular Nx Tutorials

Getting Started with Angular and Nx

This is a series of post which will cover array of topics. The application in question needs a component library (Angular Components aka Angular Material). A CSS Utility Library to take care of adding styles (Tailwind). A way to develop, document and test components (Storybook). Last but not least, move the load off to the Libs (Nx).

Create Nx Angular Workspace

Typing the following command in terminal will greet us with

    npx create-nx-workspace@latest
npx create-nx-workspace@latest
A prompt we get when we are creating nx workspace. It asks for what we want to create. The Integrated Repo option is selected here from technbuzz.com. Nx, Angular
The welcome screen depends on the version of nx. As of version 15.4.5 we see the above prompt

We have chosen integrated monorepo. If all the projects and libs in a workspace share same dependencies, that Integrated Monorepo is way to go.

We have chosen Angular as monorepo selection from nx create workspace prompt from technbuzz.com
We will cover Angular here.

Next, I have chosen Angular. We can also choose the apps (first option) to create empty repo. We can then use @nrwl/angular Plugin to add new Angular project.

Next nx prompts asks for Repository name, Application Name and stylesheet format for our Angular application from technbuzz.com
Next bunch of prompts are summarized.

In next follow up screen we need to provide name to the Repo and Application while SCSS is chosen as flavor of CSS.

This will install all the dependencies. After installation, we can serve our app as

    cd weather
nx serve weather
Welcome Screen from nx serve
Now we have a welcome screen. This ensures our app is working and ready to add more artifacts.

Add Angular Material

Now we have created a workspace along with one angular application. We will utilize the Nx cli to add Angular Material.

    ng add @angular/material
A cli command that uses Angular Add schematics to add the angular material or angular components to our app from technbuzz.com
I have followed Angular Material Getting Started guide.

Although this schematic is intended for Angular Cli, but here Nx suggests how to make it work with Nx cli. We will just run the command by saying yes.

How nx tells us to use angular material add schematics in our project
This automatic conversion of terminal commands makes onboarding really easy.

The command will first install the @angular/material package and then run the add schematics. I will choose setup the Theme, Typography and Animation in subsequent prompts.

The automatic conversion of adding angular material via schematic by nx has failed. it expects the project name
OH! An error, looks like after all, not a smooth process

The add schematics expects Angular project which can be configured for styles and fonts.

We can re-run the second command with --project flag

    npx nx g @angular/material:ng-add --project=weather
By adding a proper flag of --project our ng add material schematic went successful.

This time around our command succeeded.

The Schematic made some changes to our project.

Now we have installed enough tools. We can add some UI Elements to make our app interesting.

Adding Sidenav and Toolbar

Example image of Dashboard from usplash in association with Angular Dashboard and Technbuzz
Photo by Carlos Muza on Unsplash

In this section I will show you how easy it is to add a Side Nav a Toolbar (that you see in the Admin Dashboard) with yet another schematic.

    npx nx g @angular/material:navigation nav --project=weather 

I tried to use the last command to generate the navigation, but it threw an error. I thought writing it like :ng-naviagation as in :ng-add will work; but no. I will cover, what goes into this error in future.

This command will make following change to our code base.

Running Angular Material Navigation creates a nav component. That components has some predefined template that uses Material Sidenav and Toolbar

In order to see the result, we just need to modify the content of app.component.ts

    <nx-angular-weather-nav></nx-angular-weather-nav>

Note: The Selector might be different base on your configuration.

After making above changes our app looks like the following:

Display of our app After adding #angular Material Navigation
Display of our app After adding Material Navigation.

We have now Sidenav with some dummy links and Toolbar. The Sidenav collapses if screen size is matches mobile device. That can be revealed by hamburger menu on Toolbar.

Adding Dashboard

In the last section of the app, we will fill the Sidenav Content with some cards.

    npx nx g @angular/material:dashboard home --project=weather

Next, we need to modify the app.component.html file.

    <mat-sidenav-content>
    <mat-toolbar color="primary">
      <button
        type="button"
        aria-label="Toggle sidenav"
        mat-icon-button
        (click)="drawer.toggle()"
        *ngIf="isHandset$ | async">
        <mat-icon aria-label="Side nav toggle icon">menu</mat-icon>
      </button>
      <span>weather</span>
    </mat-toolbar>
    <!-- Add Content Here -->
    <nx-angular-weather-home></nx-angular-weather-home>
  </mat-sidenav-content>

On Line 13, 14 we have added the newly created Home Component.

Display of our App with Navigation and Dashboard using Material Sidenav, Toolbar and Cards
Display of our App with Navigation and Dashboard

Summary

We will end this post here and continue other pieces in future. To wrap up, we have managed to create Nx workspace, added angular app. We used schematics to add Angular Material, and some of its components.

2 replies on “Getting Started with Angular and Nx”

Hi thanks for the tutorial, I am currently trying to pull up an angular project with nx monorepo, I am just failing to incorporate angular material correctly.

My attempt is to create a lib that has my sidenave and toolbar as I just want to include them in the individual apps.

Can you tell me how to do this?

Since I take it from your tutorial that you include the materials in apps directly right?

Many greetings
Maximilian

Well, you can create a library and move your nav components there. Just import the library in your app.

In this article the material is directly added to the project. Material schematic injected the necessary style to the project.json.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.