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

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

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.

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

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

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.

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 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

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

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 

This command will make following change to our code base.

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:

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.

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.