Create an Angular App with a Side-Navigation and a Dashboard in 5 minutes with Schematics
Angular is a powerful tool for building large web applications. To get started with Angular we can use Schematics. It allows us to set up a full application in no time — with router, material components, side-navigation and a dashboard.
To get started, we install the latest Angular CLI version.
npm install -g @angular/cliNow we are ready to use the ng commands to create our app.
ng new my-first-projectLet’s test if the creation was successful and launch the app.
cd my-first-projectng serve -o
The CLI should now build the app and launch it in the browser (http://localhost:4200/).
The default angular app is now up and running. The view provides links to additional resources and hints. Feel free to explore them.
In the next step, we will add support for Angular Material. This command sets up also the required Schematics for the CLI.
ng add @angular/materialAfter the installation of Angular Material, we can use the Schematics and create a dashboard component.
ng generate @angular/material:dashboard my-dashboardThe output of the command line should look like this:
The project structure should look like this:
The MyDashboardComponent should be declared in the AppModule. This is done automatically by the Schematic.
Now we can replace the HTML markup in our app.component.html to display our DashboardComponent.
ng serve -o
Finally, we can add our side navigation component with another schematic.
ng generate @angular/material:navigation navigationThe Schematic now generates a NavigationComponent and updates our AppModule, so that we can use it right away in our template of app.component.html
Now we move the MyDashboardComponent in our NavigationComponent.
After that let’s update our AppComponent template. We replace the MyDashboardComponent with the NavigationComponent.
And that’s it. If we now start our application, we will see the navigation and the dashboard.
