Angular Directive for a table

Question

I'm trying to create a directive which can take each <th> heading, and place them as data tags in each <td>. How can I transform this:

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>James</td>
      <td>Matman</td>
      <td>Chief Sandwich Eater</td>
      <td>Lettuce Green</td>
    </tr>
    <tr>
      <td>The</td>
      <td>Tick</td>
      <td>Crimefighter Sorta</td>
      <td>Blue</td>
    </tr>
  </tbody>
</table>

To this:

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td data-label="First Name">James</td>
      <td data-label="Last Name">Matman</td>
      <td data-label="Job Title">Chief Sandwich Eater</td>
      <td data-label="Favorite Color">Lettuce Green</td>
    </tr>
    <tr>
      <td data-label="First Name">The</td>
      <td data-label="Last Name">Tick</td>
      <td data-label="Job Title">Crimefighter Sorta</td>
      <td data-label="Favorite Color">Blue</td>
    </tr>
  </tbody>
</table>

A few things to note are that the <th> headings are static, but the data in the <td>'s are dynamic. This is a unique problem, this question hasn't been asked before because I need to somehow get the <th> value into the td cell.

Please show what you have tried even if your code does not work. — Martin, Aug 27 '19 at 12:40
Possible duplicate of [Angular 2 data attributes](https://stackoverflow.com/questions/34542619/angular-2-data-attributes) — Liam, Aug 27 '19 at 12:52
try using like this on td `[attr.data-label]="First Name"` and so on... — Piyush Jain, Aug 27 '19 at 13:01
@piyushjain but then I'm just writing it manually everytime. I would like the directive to do it for me — Andrew Howard, Aug 27 '19 at 13:04

Jens Alenius · Answer 1 · 2019-08-27T13:48:22.467

I don't think you need a directive for it if I a understand the question correct. You can use the angular built in directives. If you would like to get the labels from the server this might be a way.

<table>
  <thead>
    <tr>
      <th>First Name</th>
      <th>Last Name</th>
      <th>Job Title</th>
      <th>Favorite Color</th>
    </tr>
  </thead>
  <tbody>
      <tr *ngFor="let row of rows">
          <td [attr.data-label]="row.FirstNameLabel">{{row.FirstName}}</td>
          <td [attr.data-label]="row.LastNameLabel"{{row.LastName}}</td>
          <td [attr.data-label]="row.TitleLabel">{{row.Title}}</td>
          <td [attr.data-label]="row.ColorLabel">{{row.Color}}</td>
      </tr>
  </tbody>
</ table>

Or you could get them from you component if you have them only clientside.

<table>
  <thead>
     <th>{{firstNameLabel}}</th>
  </thead>
  <tbody>
  <tr *ngFor="let row of rows">
     <td data-label="{{firstNameLabel}}">{{row.FirstName}}</td>
     .....
  </tr>
  </tbody>
 </table>

and in you component:

firstNameLabel:string="First Name";

I would have them clientside in translation

<tr *ngFor="let row of rows">
     <td data-label="{{'FIRST_NAME'|translate}}">{{row.FirstName}}</td>
     .....
</tr>

Thanks for your answer. I'm not supplied with the label name from the database so I can't use your first solution. I need to be able to access the value inside the instead. — Andrew Howard, Aug 27 '19 at 13:29
My names in th is also translated from the same source(the translation files). If you don’t need translation you can always get it from the model. Both th and data-label can use the Same property on the model. — Jens Alenius, Aug 27 '19 at 13:40
I think the directive is a bad idea because it will need to DOM render all td in all the rows — Jens Alenius, Aug 27 '19 at 14:01

Angular Directive for a table

1 Answers1