In this section, you will learn how to add a dashboard.

adding a dashboard

First, we need to create a dashboard component.  It can be done manually or via angular-cli. For this example, we will use angular-cli. In your integrated terminal, type ng g component Dashboard.

IT Certification Category (English)728x90

adding a dashboard

Dashboard files will be automatically generated.

adding a dashboard

Now, it’s time to add this Dashboard component to our application. Go to the app.routing.ts file and import DashboardComponent.

adding a dashboard

import {ModuleWithProviders} from '@angular/core';
import {Routes, RouterModule} from '@angular/router';
 
import {StocksComponent} from './stocks.component';
import {AppComponent} from '.app.component';
 
import {DashboardComponent} from './dashboard/dashboard.component';
 
 
const appRoutes: Routes = [
    {
        path: '',
        component: DashboardComponent
    },

    {
        path:'stocks', 
        component: StocksComponent
    }
];

Save your work and try to run your app. Go back to your browser.

adding a dashboard

Congratulations! Your dashboard component is now functional. The text ‘dashboard works!’ is a default text when we created it via angular-cli. To change this, simply go to dashboard/dashboard.component.html.

adding a dashboard

You can now freely update your dashboard text.