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.
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:
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:
- Creates an empty Angular workspace titled ‘ng-dashboard’. Feel free to change the name.
- Navigates into the workspace
- 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.
- 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.
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:
- 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.
- Creates a module for our layouts.
- Creates a component for our default layout. We may want to add other layouts in the future.
- Creates a module for shared components and services.
- 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:
Remove everything except the
Add a default route to the application’s top-level routing module.
Import the SharedModule in the layout module so we can use the sidebar component.
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’.
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.
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:
- Creates a module that will load by default when the application is opened.
- Adds an auto-generated dashboard component to the default module using an Angular Material schematic.
- 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.
Update the main routing module again with new lazily loaded paths for our modules.
Add the RouterModule to the default layout module.
Add a router outlet to the default layout component.
Add the RouterModule to our shared module so we can use
[routerLink]="" in the sidebar component.
<!-- 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.
Add a route to our DashboardComponent in the default module.
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.
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.