Getting Started with Angular and Nx
Tags: angular, cli, material, nx
Published: 2023-01-18 16:27:37

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hu4bmz5p0smmpkjulo56.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f1j4khcu9u7oa9fhedgh.png)

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


![Next bunch of prompts are summarized](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0ef6dt8ymbmyjzredrke.png)

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

```cmd
cd weather
nx serve weather
```

![Now we have a welcome screen. This ensures our app is working and ready to add more artifacts](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t4c58gybdsra5sohksse.png)

## 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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbbo2axvzoarwi84n4j7.png)
I have followed Angular Material [Getting Started](https://material.angular.io/guide/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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v0y11qiappo0godv968w.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/icwpqo1iz27dch7hd8x8.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mv4v0e0wq1hoa23472lj.png)

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

<figure>
<img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2kqe2ocga9e6nw4h0y0n.png" alt="Photo by Carlos Muzaon on Usplash" />
<figcaption>Photo by <a href="https://unsplash.com/fr/@kmuza?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText" target="_blank">Carlos Muza</a> on <a href="https://unsplash.com/photos/hpjSkU2UYSU?utm_source=unsplash&amp;utm_medium=referral&amp;utm_content=creditCopyText">Unsplash</a></figcaption>
<figure>

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wnjkmq2dkirwaliinb4k.png)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qo4qei9pjngpglopwdet.png)

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.

```html
<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> 
```
 
Right after the `<!- Add Content Here -->` comment, we have added the newly created Home Component.


![Display of our App with Navigation and Dashboard](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ru43a075aiqm4ckpxkp5.png)


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