CODEWITHSUNDEEP
htmlangularhtml-table
Deniz Firat
Deniz Firat

Reputation: 159

Angular showing json object in html table

Hello guys i have json data from firestore and i want to display these data in html table.

This is my customer-list.component.html

<body>
  <div class="container">
    <div class="title">
      <h3>Customer Table</h3>
    </div>
    <div class="row">
      <div class="col-md-12">
      </div>
      <div class="col-lg-8 col-md-10 ml-auto mr-auto">
        <div class="table-responsive">
          <table class="table">
            <thead>
              <tr>
                <th class="text-center">#</th>
                <th>Name</th>
                <th>Age</th>
                <th>Active</th>
              </tr>
            </thead>
            <tbody>
              <div *ngFor="let customer of customers" style="width: 300px;">
                <app-customer-details [customer]='customer'></app-customer-details>
              </div>
        <div style="margin-top:20px;">
          <button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>
        </div>
        </tbody>
        </table>
      </div>
      </div>

Seems like there is nothing wrong in there.

This is my customer-details.component.html

<div *ngIf="customer">
<tr>
   <td>
       <label>First Name: </label> {{customer.name}}
     </td>
     <td>
       <label>Age: </label> {{customer.age}}
     </td>
     <td>
       <label>Active: </label> {{customer.active}}
     </td>
     <span class="button is-small btn-primary" *ngIf='customer.active' (click)='updateActive(false)'>Inactive</span>

     <span class="button is-small btn-primary" *ngIf='!customer.active' (click)='updateActive(true)'>Active</span>

     <span class="button is-small btn-danger" (click)='deleteCustomer()'>Delete</span>
</tr>
</div>

But my table output is : table

Thanks for answers.

Upvotes: 1

Views: 1645

Answers (3)

Rahul Bansal
Rahul Bansal

Reputation: 71

When you look at the DOM tree you will find out that

<tr><app-customer-details>...</app-customer-details</td>

This will not result in the component rendering inside the table as a but will cram the entire component HTML template inside one column.

By adding an attribute selector to the component i.e. selector: 'app-customer-details, [app-customer-details]', you can add the selector directly to the element like so and now the elements inside the component HTML template will render correctly inside the table.

Look at this link;

The correct code is as follows: Customer-list.component.html

<div class="container">
    <div class="title">
        <h3>Customer Table</h3>
    </div>
    <div class="row">
        <div class="col-md-12">
        </div>
        <div class="col-lg-8 col-md-10 ml-auto mr-auto">
            <div class="table-responsive">
                <table class="table">
                    <thead>
                        <tr>
                            <!-- <th class="text-center">#</th> -->
                            <th>Name</th>
                            <th>Age</th>
                            <th>Active</th>
                        </tr>
                    </thead>
                    <tbody>
              <tr *ngFor="let customer of customers" [customerDetails]="customer">
              </tr>
                        <div style="margin-top:20px;">
                            <button type="button" class="button btn-danger" (click)='deleteCustomers()'>Delete All</button>
                        </div>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>

Customer-details.component.html

<td>
  {{customerDetails.name}}
</td>
<td>
  {{customerDetails.age}}
</td>
<td>
  {{customerDetails.active}}
</td>

Customer-details.component.ts

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

@Component({
  selector: 'customerDetails, [customerDetails]',
  templateUrl: './customer-details.component.html',
  styleUrls: ['./customer-details.component.css']
})
export class CustomerDetailsComponent implements OnInit {

  @Input() customerDetails: object = {};
  constructor() { }

  ngOnInit() {
  }

}

Upvotes: 1

Ali Adravi
Ali Adravi

Reputation: 22723

You have many things which will not render your table properly:

<tbody>
  <div *ngFor="let customer of customers" style="width: 300px;">
      <app-customer-details [customer]='customer'>
      </app-customer-details>
   </div>
   ....
</tbody>

This will render like this:

<tbody>
  <div ...>
      <app-customer-details>
       <div> <tr>.....</tr></div>
      </app-customer-details>
   </div>
   ....
</tbody>

Which is not correct HTML.

Change you detail component to use ng-template:

<ng-template >
  <tr *ngIf="customer">
    <td><label>First Name: </label> {{customer.name}}</td>
    <td><label>Age: </label> {{customer.age}}</td>
    <td><label>Active: </label> {{customer.active}}</td>
    <td> 
      Note: All spans should also be inside a TD tag
    </td>

  </tr>
</ng-template>

Upvotes: 0

WorksLikeACharm
WorksLikeACharm

Reputation: 414

Don´t limit the width of a customer´s component to 300px, like you did here:

<div *ngFor="let customer of customers" style="width: 300px;">

Upvotes: 0

Related Questions