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 [email protected]
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
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
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.
In order to see the result, we just need to modify the content of
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.
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
<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.
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.