DEV Community

Cover image for Getting Started with Angular and Nx
Samiullah Khan
Samiullah Khan

Posted on • Originally published at technbuzz.com

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

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


Enter fullscreen mode Exit fullscreen mode

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

I have followed Angular Material Getting Started guide
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.

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.

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

Terminal after file edits

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


Photo by Carlos Muzaon on Usplash

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

This command will make following change to our code base.

Termial showing fill edits

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


Enter fullscreen mode Exit fullscreen mode

Right after the <!- Add Content Here --> comment, we have added the newly created Home Component.

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.

Edit

Top comments (0)