TGIMBA .NET Core Upgrade – Part 6 – Adding TGIMBA User Interface Placeholders

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 the segment, I will create placeholders with unit tests for any of the views I anticipate needing for TGIMBA. Before I begin, I do want to point out three things:

  • To break with the current TGIMBA, I am going to modify the dashboard to be available on both the mobile and desktop versions.
  • I hope to be able to use the same views for both mobile and desktop and distinguish them by using Cascading Style Sheets (CSS) only.
  • Two git commits because the list of files was getting large and I wanted to make sure everything got added correctly.

Git  Code 1

Git  Code 2

After taking an inventory of the current TGIMBA’s views, I added placeholders under app/components for the following – Dashboard, Static Display, Login, Registration, Add/Edit, Search Entry, Search Results, Item List, Desktop Category Panel, Menu (generic for each menu needed), Header and Footer.


Each one was a carbon copy of each other, so to demonstrate, I will explain the details of the Dashboard:

  • I updated the TGIMBA component I created last time.


  • I added a unit test looking for a hidden <div> I placed on the page (a way I am going to verify a page exists). I was reading up on what the Angular TestBed fixture objects expose and I was pleased to find out that the good ol’ standard document.getElementById() works.


  • It works by looking for this hidden <div> inside dashboard.component.html.


  • I added a .css file with the <div> id to hide it from view. I also noticed that global .css seems to be missing. I found references to a styles.css, but that file does not appear to be part of the application I have. I would like to have the .css entry to hide the componentIdentifier <div> I am using in a global file instead of each component. If I discover how, I will update the project. For now though, it will go in each component’s .css file.


  • The controller is empty at this point.


Something interesting I noticed. VS 2017’s solution explorer started losing track of the git file status again. However, when I added and commited from the command line, everything was there as expected.

Ok, next time I will start with putting in the dashboard text and status display based on the database.

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