Angular - Bootstrap style not working in nested components

Question

I'm trying to create a table with a nested component for rows, here is what I have:

Parent file:

<table class="table">
  <thead>
    <tr>
      <th>ID</th>
      <th>TITLE</th>
      <th>DESCRIPTION</th>
      <th>USER</th>
      <th>OWNER</th>
    </tr>
  </thead>
  <app-ticket *ngFor="let ticket of tickets" [ticket]="ticket"></app-ticket>
</table>

app-ticket:

<tr>
  <td>{{ticket.id}}</td>
  <td>{{ticket.title}}</td>
  <td>{{ticket.description}}</td>
  <td>{{ticket.email}}</td>
  <td>{{ticket.owner}} <button class="btn btn-warning">TEST</button></td>
</tr>

But bootstrap style on rows don't work, I've searched and people suggest putting the tr / td's in the root component, but this is not feasible sometimes, specially with multi-level components, is there a good solution for this?

Silvermind · Accepted Answer · 2018-11-20 22:03:35Z

1

One way to achieve this is to make the component a directive-like component:

@Component({
    selector: 'tr[app-ticket]',
    templateUrl: './app-ticket.component.html',
    styleUrls: ['./app-ticket.component.scss']
})
export class AppTicketComponent {

    @Input() ticket: Ticket;

}

html template:

<td>{{ticket.id}}</td>
<td>{{ticket.title}}</td>
<td>{{ticket.description}}</td>
<td>{{ticket.email}}</td>
<td>{{ticket.owner}} <button class="btn btn-warning">TEST</button></td>

and then use it like this:

<tr app-ticket *ngFor="let ticket of tickets" [ticket]="ticket"></tr>

This will directly render the tr inside of the table instead of leaving a tag for your component.

edited Nov 20, 2018 at 22:03

answered Nov 20, 2018 at 18:25

Silvermind

5,9943 gold badges27 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular - Bootstrap style not working in nested components

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related