Link to home
Start Free TrialLog in
Avatar of Cynthia Hill
Cynthia HillFlag for United States of America

asked on

Angular Table for Profile Grid

Hello - I'm trying to learn a bit about using Angular. I have a specific learning exercise I am trying to figure out.

I am super new to Angular. I have been working with one of the tutorials on the Angular site in my down time over the last day or so...but very new to using it.

My main question for this thread is working with/trying to create an Angular table. Specifically one structured similar to the layout for the code below.
<table style="width:75%">
  <tr>
    <th>Firstname (e.g. Static Field Label)</th><td>Clark (e.g. firstName pulled from JSON file)</td> 
    <th>LastName</th><td>Kent</td>
  </tr>
  <tr>
    <th>Job</th><td>Reporter</td>
    <th>ID</th><td>94</td>
  </tr>
 
</table>

Open in new window




I am not seeing a lot of examples with a table structured similar to this (where its more of a profile grid instead of a straight list of data.

*Two other bits of functionality I will be researching for the table is to pull the info to be displayed from a JSON file.
*A search box to determine which record to display in the profile grid using an ID field.

Here are some sample values for the JSON file:

[
       {
           "firstName": "Clark",
           "lastName": "Kent",
           "job": "Reporter",
           "id": 20
       },
       {
           "firstName": "Bruce",
           "lastName": "Wayne",
           "job": "Business Owner",
           "id": 30
       },
       {
           "firstName": "Peter",
           "lastName": "Parker",
           "job": "Photographer",
           "id": 40
       },
       {
           "firstName": "Tony",
           "lastName": "Stark",
           "job": "Business Owner",
           "id": 25
       }
   ]

Open in new window



Any tips or suggestions to get me pointed in the right direction would be greatly appreciated!!

Thanks,
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

The first question to ask is which version of Angular are you experimenting with? You have put AngularJS as the Topic Area which implies 1.x but as EE has not updated the Angular TA's to distinguish between 1.x and 2/4/5 it is not clear. The approaches are a bit different depending on which version you are using.

Second, if I understand correctly you want to iterate over the data set and display each record over two rows (rather than one) is that correct? First Name / Last Name in the first row and Job / Id in the second row?

This is very do-able in Angular. For AngularJs (1.x) you would use ng-repeat-start and ng-repeat-end (https://docs.angularjs.org/api/ng/directive/ngRepeat)

With Angular 2 you would use ngFor and a <template> to achieve the same result.

Example code can be provided once we know what version you are using.
Avatar of Cynthia Hill

ASKER

Hummm....The application I'm trying to look under the hood on/learn from is using Git (v2.14.1), Node.js (v 6.11), and Angular CLI (not seeing any version specified anywhere). When the install was done for Angular CLI, the command was simply "npm install -g @angular/cli"

I am trying to go back and play with some code I have to do this with more vanilla HTML, JavaScript, etc...but based on what I have seen so far with code using the Angular framework...I assume its going to be completely different.
I just realized I did not speak to your second question regarding "you want to iterate over the data set and display each record over two rows (rather than one) is that correct?"

I want to show info for one record at a time...but yes...as far as how it appears on the webpage...I want it on multiple lines.

For Example:

_________________________________________
| First Name: Clack  |  Last Name: Kent   |
-----------------------------------------------------------
| Job: Reporter           | ID: 94                     |
-----------------------------------------------------------

I will also be researching how to have a search text box to determine which record appears in the grid based on the ID field (e.g. if the user enters the ID of 94 into the text box...the record for Clark Kent would be shown in the grid.
ASKER CERTIFIED SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Its not working on my work PC...I will have to try it on my home PC this evening.

Even the title is not showing up with the proper value (is still showing as {{title}} on the web page...and that was working on the Angular tutorial last night from my home PC after I changed the value in the app.component.ts file.

I will post back later this evening once I've had a chance to play with it. Thanks!
Yay....its working now!

I must have changed something in another file when I was trying different things before I posted the question.

I created a new app shell and started from scratch and its happy now :) Thanks so much!

I will research the text box to restrict values displayed and if I am not able to figure it out...i will post a question on a separate thread.

Happy Friday!
Regarding restricting what is displayed - open another question - refer to this on and post the URL to the new question here. I will pick up and see if I can provide a demo of how to do what you want - it is quite simple.

Sidebar: when you load a page and it does not show anything - check your console for errors - 9/10 there is a JavaScript error causing the problem - might not be easy to track because angular error reporting has a little bit of room for improvement.