CODEWITHSUNDEEP
bootstrap-4angular5angular-directivengfor
flash
flash

Reputation: 1517

How to use angular 5 directives to populate rows in a table?

I have a screenshot as shown below in which I want to inject rows through angular 5 directives.

enter image description here

The snippets of HTML which I have used in order to make a row is: 

<tr>
<td class="left">Amanda Doe</td>
<td class="number1">250</td>
<td class="table1">2</td>
<td class="right-bill">Bill</td>
</tr>


I have created the fiddle for the above screen-shot in which I am populating data at front end through HTML.


Problem Statement:

I am wondering what changes I need to make so that I can inject data through directives probably ngfor. The reason why I have decided to use directives because I have around 10-12 rows and it would be best way use directives.

Upvotes: 0

Views: 513

Answers (1)

Syntactic Fructose
Syntactic Fructose

Reputation: 20076

You're going to want to create an array of objects inside your component, and create a structure for each object which mirrors your table.

Then inside your html, you can use ngFor to iterate over that array and print out each value of the object. the *ngFor syntax is *ngFor="let <variable> of <data_to_loop>, where you then use <variable> to print any data.

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.scss' ]
})
export class AppComponent  {
 public name = 'Angular 5';
 public myData = [
   {
    'name': 'Amanda Doe',
    'number': 250,
    'table': 2,
    'status': 'Bill'
  },
  {
    'name': 'Amanda Doe',
    'number': 250,
    'table': 2,
    'status': 'Bill'
  }];
}

Then inside your html, you use ngFor like so:

<div class="table-responsive body-manage-attendees">
    <table class="table table-hover">
        <thead>
            <tr>
                <th scope="col">Name</th>
                <th scope="col" class="number">Number</th>
                <th scope="col" class="table2">Table</th>
                <th scope="col" class="status">Status</th>
            </tr>
        </thead>
        <tbody>
            <tr *ngFor="let row of myData">
                <td class="left">{{ row.name }}</td>
                <td class="number1">{{ row.number }}</td>
                <td class="table1">{{ row.table }}</td>
                <td class="right-bill">{{ row.status }}</td>
            </tr>
        </tbody>
    </table>
</div>

Here's a working example you can also checkout: https://stackblitz.com/edit/angular-ljlfej

Upvotes: 1

Related Questions