Angular Dashboard From Scratch

Skogul Technical Article • July 7, 2020

Over the next few articles we’re going to cover something required for almost every user-facing application: a User Interface (UI). We’re going to build a general-purpose dashboard application to address some of the most common UI requirements:

  • Responsive Design – It must resize appropriately to be usable on a phone, tablet, or desktop

  • Load Quickly – Initial load times need to be fast even on a mobile connection

  • User Authentication & Authorization – Different users should have different levels of access

  • Access Remote Services – It must make requests to remote services for data

  • Appearance Matters – It needs to look nice with customizable themes

And, as the title suggests, we’re going to use Angular to do it. Angular is a very popular technology for creating user interfaces which allows developers to write readable, maintainable, and easy-to-use code. It also comes with a command-line interface (CLI) that makes getting started easy. We will be utilizing the CLI extensively to speed our development and follow best practices. For more on the pros and cons of Angular check out this article.

We won’t be able to address all the requirements listed above in a single article, but using schematics we’ll be able to do a surprising amount. For this first article we’ll create the project, set up a framework for loading modules dynamically, and set up the responsive navigation (everything pictured above). Let’s get started.

All the code for this article is available here with one commit per section of the article.

Getting Started

We’ll need NodeJS to get started. If it isn’t installed already, you can get it from nodejs.org or via Node Version Manager. With NodeJS comes npm, a utility we will use to manage our dependencies. Install the Angular CLI by running following command:

Copy to Clipboard

Now navigate to where you would like to create the project folder. The following commands will create an Angular workspace called ‘ng-dashboard’, create an angular application, and start it running locally:

Copy to Clipboard
  1. Creates an empty Angular workspace titled ‘ng-dashboard’. Feel free to change the name.
  2. Navigates into the workspace
  3. Creates the Angular application within the workspace. Feel free to change name and/or the prefix. The prefix is used to differentiate your components from those of other libraries.
  4. Starts the application locally.

Open a browser to localhost:4200 and you should see a running application similar to this:

Note: Lines 1 & 3 above are typically combined into a single command but it results in a different workspace structure. By breaking it in to two commands we can easily add additional Angular applications or libraries to the workspace in the future.

Congratulations, you’ve just created a working Angular application. Let’s get rid of the placeholder stuff and customize it a bit.

Dashboard Layout

Now we’re going to build some custom components to set up the navigation letting the CLI do most of the work again. From the same workspace directory, execute the following commands:

Copy to Clipboard
  1. Installs Angular Material, a set of components for Angular that follow Google’s Material Design. You will be asked a few questions. Details on the options are available on Angular’s website. See the image below for the options I chose.
  2. Creates a module for our layouts.
  3. Creates a component for our default layout. We may want to add other layouts in the future.
  4. Creates a module for shared components and services.
  5. Creates our first shared component: the sidebar navigation. This command utilizes a schematic from Angular Material instead of the built-in schematics we’ve been using.

Up to this point we’ve only used the CLI to generate code. In order to use the items we’ve just created we’re going to need to make some manual edits. Open the workspace in your favorite editor/IDE and make these edits:

app.component.html

Remove everything except the <router-outlet>.

Copy to Clipboard

app-routing.module.ts

Add a default route to the application’s top-level routing module.

Copy to Clipboard

layouts/default/default.module.ts

Import the SharedModule in the layout module so we can use the sidebar component.

Copy to Clipboard

layouts/default/default.component.html

Add the sidebar to the default layout component. Keep in mind if you used a different prefix than me you will need to change out the ‘msk’.

Copy to Clipboard

Check It Out

Start up the application again locally using ng serve and your application should now look something like below. The colors may be different if you chose a different material theme.

Modules

Now that the application is starting to look like our own, let’s add some modules to populate it with content. Again we’re going to use the CLI to get us started:

Copy to Clipboard
  1. Creates a module that will load by default when the application is opened.
  2. Adds an auto-generated dashboard component to the default module using an Angular Material schematic.
  3. Creates a second module called ‘lazy’ that will load when the user navigates to it with a simple component in it.

Again we will need to make some manual changes to get everything working properly.

app-routing.module.ts

Update the main routing module again with new lazily loaded paths for our modules.

Copy to Clipboard

layouts/default/default.module.ts

Add the RouterModule to the default layout module.

Copy to Clipboard

layouts/default/default.component.ts

Add a router outlet to the default layout component.

Copy to Clipboard

shared/shared.module.ts

Add the RouterModule to our shared module so we can use [routerLink]="" in the sidebar component.

Copy to Clipboard

shared/components/sidebar/sidebar.component.html

Replace <!-- Add Content Here --> in sidebar-component with <ng-content> and update the navigation links. Here we are using <ng-content> to do what is called Content Projection. It allows us to wrap dynamic content with a custom component.

Copy to Clipboard

modules/default/default.module.ts

Add a route to our DashboardComponent in the default module.

Copy to Clipboard

Run ng serve again and you should be welcomed with a dashboard looking layout. Clicking the ‘Lazy Module’ link will load that module and replace the dashboard with its content. Note each of our modules are compiled and loaded separately which keeps the core app small and load times fast. We can add any number of modules this way without bloating the application.

Summary

We went from nothing to a functioning Angular application. The application is divided into modules which load only when needed to cut down the initial load time. The sidebar and dashboard component also resize appropriately for different screen sizes (try resizing your browser with the application running).

While our application doesn’t do anything yet, we’ve create a good launch point for any number of different applications which require a UI.

Stay tuned for more articles expanding on this to address things like user authentication & authorization, theming, and remote service calls.