Share on FacebookShare on Google+Tweet about this on TwitterShare on LinkedIn
Bob at Genuitec
Virtual evangelist at large. The face of Genuitec often appearing in graphics. Pen-name for our more shy writers of content.
Posted on Jun 21st 2017

In this Angular 4 tutorial we are going to create a dashboard for an e-commerce store which will highlight key metrics and show top selling products. In the course of this tutorial, we will be using Angular IDE.

Let’s get started by firing up our Angular IDE and create a new Angular project named StoreReporter.

storereporter-angular-project

Next, we create a single reusable data service StoreService for our data needs, by clicking File > New > Service.

storereporter-store-service

Store summary cards

We are going to add three cards to our dashboar; the metrics on the cards will be New Customers, Active Users and Sales. We will refer to the three cards as summary cards, and they will look like the image below.

storereporter-summary-cards

Let us add some stub methods to StoreService.

Each summary card has a name and value, for example the first card has a name New customers and content 147. Let us create a class StoreSummary in a new TypeScript source file src/app/store-summary.ts with these two properties.

In this article we will not be getting our data from a remote api, rather we will be using mock data. So we will create a new file mock-store-summary.ts with the following content:

Let us use this mock data in our store service. first we add the following imports to the top of src/app/store.service.ts.

Then we update the getNewCustomersCount method to become

Because data services are invariably asynchronous, we are returning a promise in the getNewCustomersCount method. Next we will create a summary card component right clicking on the app folder in the project explorer, select new, then click component. We set the component name as summary-card, Angular ide does the following
* Creates a directory named summary-card
* Creates four files summary-card.component.css, summary-card.component.html, summary-card.component.spec.ts and summary-card.component.ts
* Updates app.module.ts by importing SummaryCardComponent and adding it to the declarations array.

The summary-card-component.html contains a p element with the content ‘summary-card works!’. Let us render three instances of the summary card in our app, to do this we update app.component.html by adding the following lines of code:

Our dashboard app now looks like this

storeporter-work-confirmation
Let us prepare app/src/summary-card.component.html to render data from a storeSummary object:

Next we modify src/app/summary-card/summary-card.component.ts to add a StoreSummary property. The code below shows new additions:

Right now we have an error Cannot read property name of undefined because Angular is trying to access the name and content property of a storeSummary object which is undefined. We will fix this by adding an if condition to the p element in app/src/summary-card/summary-card.component.html.

Later in this article the parent AppComponent will tell the child SummaryCardComponent which storeSummary to display by binding the an object to storeSummary of the SummaryCardComponent. The binding will look like this:

Putting square brackets around the storeSummary property, to the left of the equal sign (=), makes it the target of a property binding expression. We must declare a target binding property to be an input property. Otherwise, Angular rejects the binding and throws an error.

First, we amend the @angular/core import statement to include the Input symbol.

Then declare that storeSummary is an input property by preceding it with the @Input decorator that we just imported.

Next we update AppComponent so we have:

We just imported StoreService and StoreSummary, and updated the @angular/core import to include OnInit. We also added a property newCustomersCount which is an instance of StoreSummary. Next, within the constructor, we added an instance of StoreService through dependency injection. Underneath the constructor() { }, we added the ngOnInit() lifecycle hook, which runs when the component loads. Finally, we added the getNewCustomersCount method and executed it in ngOnInit.

Now we have an error in our console Error: No provider for StoreService!; in order to fix this we need to add StoreService to the providers property of the NgModule decorator in src/app/app.module.ts.

Now our dashboard looks like this

storereporter-new-customers
Let us set up the remaining summary cards. First, we add two more mock objects to app/src/mock-store-summary with the following code snippet:

Then we update the imports from ./mock-store-summary in app/src/store.service.ts, and update the stub methods getActiveUsersCount and getSalesSum; the code below shows only the changes:

Next are the changes to src/app/app.component.ts:

Update src/app/app.component.html:

Now our dashboard looks like this:

storereporter-the-three-components

Let’s add some style to our dashboard, first we include Bootstrap 4 in src/index.html; the code below only shows the changes:

Next we update /src/app/summary-card/summary-card.component.html:

and /src/app/app.component.html:

Our dashboard looks like this:

storereporter-the-three-components-horizontal

Next, let us add top selling products to our dashboard. First, we create a Product class, mock products and a product-card component.

We create /src/app/product.ts with the content:

Create ‘src/app/mock-product.ts’ with the content:

We update src/app/store.service.ts:

Create the product-card component by right clicking on the app, select new then component. We then update the following files:

/src/app/product-card/product-card.component.html

/src/app/product-card/product-card.component.ts

Finally we update app.component.ts and app.component.html:

Our final dashboard looks like this:

storereporter-final-dashboard

Ready to start using Angular IDE yourself?