TGIMBA .NET Core Upgrade – Part 7 – TGIMBA User Interface – Dashboard

NOTICE: The TGIMBA git hub repository has been corrupted and I had to start over.  The link to the repository is here -> Git  Code Commit

In this post, I will demonstrate how I added the existing TGIMBA Dashboard to the .Net Core 2 Angular project.

  • First I updated the existing navigation component to have a link to each placeholder.


  • Running the project shows the default (for now) home view


  • Clicking on ‘Dashboard’ shows the dashboard place holder


  • I placed the existing dashboard markup into the placeholder, updated the .css and ran it. I left text references for where the Google JavaScript graphs will go (i.e. category, achieved and created)


Couple of Things:

  • I got a compile error initially because of a <center> tag. Since this has been deprecated, the nearest working solution I could find was to place the title in a div tag and use the align tage (i.e. <div align=”center”>). This surprised me since the usual text-align: center; Cascading Style Sheet (CSS) didn’t work. I tried a couple other CSS entries, but none worked. I will update this if I can find a working CSS entry.
  • I learned tonight that <script> tags are not allowed in Angular 2.  I use Google JavaScript charts in the current TGIMBA.  Looks like I may have to rethink this.


  • I added some test (testing for regular and demonstration login links)


  • Running those tests


So, the next thing is to update the <– Display –> <div> holders with data.

Stay tuned!


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s