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,
Cynthia HillLead ConsultantAsked:
Who is Participating?
 
Julian HansenConnect With a Mentor Commented:
AngularJS => JavaScript
Angular 2+ => TypeScript

I am guessing it is 2.
You can do this [app.component.html]
<table class="table">
<ng-container *ngFor="let user of users">
      <tr>
        <th>First Name</th><td>{{user.firstName}}</td>
        <th>Last Name</th><td>{{user.lastName}}</td>
      </tr>
      <tr>
        <th>Job</th><td>{{user.job}}</td>
        <th>ID</th><td>{{user.id}}</td>
      </tr>
    </ng-container>
</table>

Open in new window

Component
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'EE Angular Sample 5 (Angular 4.3)';
  users = [
    {
        "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

Working sample here

EDIT: Added component code
0
 
Julian HansenCommented:
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.
0
 
Cynthia HillLead ConsultantAuthor Commented:
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.
0
Free Tool: SSL Checker

Scans your site and returns information about your SSL implementation and certificate. Helpful for debugging and validating your SSL configuration.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
Cynthia HillLead ConsultantAuthor Commented:
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.
0
 
Cynthia HillLead ConsultantAuthor Commented:
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!
0
 
Cynthia HillLead ConsultantAuthor Commented:
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!
0
 
Julian HansenCommented:
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.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.