Angular2 - How to create a simple table

Question

I need to know the correct practice to use in this scenario:

I have a WebApi that returns a tabular dataset and I have to show it using bootstrap tables...

How to implement it? Which bootstrap component should I use?

The table is very simple, it expose just few data and a button to go in the row detail...

Hi Gsc, I just mean to render it on a webpage... I have edited my querstion — DarioN1
– DarioN1, Commented Apr 4, 2017 at 8:04
What have you tried so far? Try searching this directory for a third-party component that meets your needs, or just create a simple component yourself. Bootstrap is just a series of classes to use to style your tables and other components, so use the right classes with your table markup and voila. — GregL
– GregL, Commented Apr 4, 2017 at 8:07
It seems there isn’t a table component in ng-bootstrap, so you may either use a plain CSS Bootstrap table or, as said by GregL, use another Angular component (ngx-datatable?). — gsc
– gsc, Commented Apr 4, 2017 at 8:08

borkovski · Accepted Answer · 2017-04-04 08:11:09Z

11

Here's an example of simple table that will redirect you to details on row click:

<table class="table table-hover">
    <thead>
        <tr>
            <td>Id</td>
            <td>Title</td>
            <td>Amount</td>
        </tr>
    </thead>
    <tbody>
        <tr *ngFor="let transfer of transfers" [routerLink]="['/transfer']" [queryParams]="{ id: transfer.id }">
            <td>{{transfer.id}}</td>
            <td>{{transfer.title}}</td>
            <td>{{transfer.amount}}</td>
        </tr>
    </tbody>
</table>

I assumed you're working with transfers array and redirect based on id.

answered Apr 4, 2017 at 8:11

borkovski

9788 silver badges12 bronze badges

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

4 Comments

DarioN1 Over a year ago

This is exactly what I need Thanks! Just another question: How I generate the "transfers" data ? Have I to create the class and the the service to load it or there is another faster method?

Aakash Thakur Over a year ago

Yes you are absolutely right. Create a service from which you can call your api and then call it from your component class by injecting it there.

borkovski Over a year ago

You should probably go with transferService class and mock it or call server from there.

DarioN1 Over a year ago

Can you provide me a simple tutorial / example on how to do it ?

isuruAb · Accepted Answer · 2017-04-04 08:31:21Z

3

You can use Bootstrap angular 2 data tables. check this URL

If you like to test another solution go with teradata covalent data table. Check this link

By using you can get responsive design with some more additional features such as: search facility, Pagination

edited Apr 4, 2017 at 8:31

answered Apr 4, 2017 at 8:07

isuruAb

2,2405 gold badges28 silver badges39 bronze badges

2 Comments

DarioN1 Over a year ago

I think I just need to repead the <tr> tag to compose my table... But is this the right way ?

isuruAb Over a year ago

you can do this by repeating <tr> but data tables give ability to show details page by page and good responsive design and facility to search you table data .

Collectives™ on Stack Overflow

Angular2 - How to create a simple table

2 Answers 2

4 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related