using directive for table row items without duplicating th

Question

users-component.html

<table class="table table-hover">
    <thead class="text table-head-font">
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>         
        </tr>
    </thead>
    <tbody>
        <tr (dblclick)="selectUser()">
            <td>{{id}}</td>
            <td>{{firstName}}</td>
            <td>{{lastName}}</td>            
        </tr>
    </tbody>
</table>

app.component.html

This will render thead for every record inside table, which I want to avoid.

I tried to refactor this to put table tr items inside users-component.html and table header to leave outside in app.component like app.component.html

<table class="table table-hover">
    <thead class="text table-head-font">
        <tr>
            <th>ID</th>
            <th>First Name</th>
            <th>Last Name</th>         
        </tr>
    </thead>
    <tbody>
        <users *ngFor="let user of users" (openUser)="getUser($event)" [id]="user.Id" [firstName]="this.firstName" [lastName]="this.lastName"></users>
    </tbody>
</table>

users-component.html

<tr (dblclick)="selectUser()">
    <td>{{id}}</td>
    <td>{{firstName}}</td>
    <td>{{lastName}}</td>            
</tr>

But this renders everything under first td, rest of td and tr are empty.

Update

users-component.ts

@Component({
    selector: 'users',
    templateUrl: './users-component.html'
})

keep you `*ngFor` on `tr` in users-component.html and pass users array as input — Manish, Mar 05 '18 at 11:06

score 0 · Answer 1 · answered Mar 05 '18 at 11:01

0

In users-component.ts add a tr selector:

@Component({
    selector: 'tr',
    ...
})

Then in app.component.html use the users-component like this:

<tr users></tr>

answered Mar 05 '18 at 11:01

dimlucas

5,040
7
37
54

wont this create issue/conflict with html `tr` selector – Manish Mar 05 '18 at 11:02
I already using selector users inside component. I updated the question. – user1765862 Mar 05 '18 at 11:08
The DOM does not let you have a table row component. That is why you have to use `tr` as a selector. Check this posts: https://stackoverflow.com/questions/34556277/angular2-table-rows-as-component – dimlucas Mar 05 '18 at 11:11
If I already using users selector inside users-component how can I add tr selector on same component? – user1765862 Mar 05 '18 at 12:56
@user1765862 You can define multiple selectors for a single component – dimlucas Mar 05 '18 at 16:19

score 0 · Answer 2 · answered Mar 05 '18 at 11:21

Below is a way that can help you achieve this. You can pass you user list as an Input to the user component and then there itself display the users. Names may vary according to your choice.

Below is the code for reference.

Here is a live Demo of the below code app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  name = 'Angular 5';
  userList = [
    {
      id:"1",
      name:"user1",
      email:"shadfh@gfh.com"
    },
     {
      id:"2",
      name:"user2",
      email:"shadfh@gfh.com"
    },
     {
      id:"3",
      name:"user3",
      email:"shadfh@gfh.com"
    }
  ]
}

app.component.html

<users [users]="userList"></users>

user.component.html

<table class="table table-hover">
    <thead class="text table-head-font">
        <tr>
            <th>ID</th>
            <th>Name</th>
            <th>Email</th>         
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let user of users" (dblclick)="selectUser()">
            <td>{{user.id}}</td>
            <td>{{user.name}}</td>
            <td>{{user.email}}</td>            
        </tr>
    </tbody>
</table>

user.component.ts

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

@Component({
  selector: 'users',
  templateUrl: './user.component.html',
  styleUrls: [  ]
})
export class UserComponent  {
  @Input() users: any;
}

Hope this helps :)

using directive for table row items without duplicating th

2 Answers2