Angular 2 - Unable to display rows of data in tabular column format

Question

I am new to Angular. I am trying to display rows of data in a tabular column format. But each field in a row is displayed as row. I want each field in a row to be displayed next to each other as different columns in a single row. Below is my HTML code:

<div class='container'>
  <h2 class="page-header">Add Contact</h2>
  <form (submit)="addContact()">
    <div class="form-group">
      <label>First Name</label>
      <input type="text" [(ngModel)]="first_name" name="first_name" class="form-control">
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input type="text" [(ngModel)]="last_name" name="last_name" class="form-control">
    </div>
    <div class="form-group">
      <label>Phone Number</label>
      <input type="text" [(ngModel)]="phone" name="phone" class="form-control" required>
    </div>
    <input type="submit" class="btn btn btn-success" value="Add">
  </form>
</div>

<hr>

<div class="container">
  <div *ngFor="let contact of contacts">
    <div class="col-md-3">
      {{contact.first_name}}
    </div>
    <div class="col-md-3">
      {{contact.last_name}}
    </div>
    <div class="col-md-3">
      {{contact.phone}}
    </div>
    <div class="col-md-3">
      <input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
      <br><br>
    </div>
  </div>
</div>

Change from col-md-3 to col-xs-3 or col-sm-3. I'm guessing your viewport is larger than md, so it falls back to full width — user184994
– user184994, Commented Jul 28, 2018 at 20:14
im assuming your using bootstrap. you need to wrap the col-md-3 divs in a div with a class of "row" so then you can use the grid system. — Dream_Cap
– Dream_Cap, Commented Jul 28, 2018 at 20:15

Dream_Cap · Accepted Answer · 2018-07-28 20:24:07Z

1

This looks like a bootstrap issue. Try wrapping your col-md-3 divs in a row.

<div class="row">
   <div class="col-md-3">
      {{contact.first_name}}
    </div>
    <div class="col-md-3">
      {{contact.last_name}}
    </div>
    <div class="col-md-3">
      {{contact.phone}}
    </div>
    <div class="col-md-3">
      <input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
      <br><br>
    </div>
</div>

In this codepen, you can visualize it: https://codepen.io/capozzic1/pen/rrYzaV

edited Jul 28, 2018 at 20:24

answered Jul 28, 2018 at 20:16

Dream_Cap

2,3122 gold badges21 silver badges31 bronze badges

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

1 Comment

Dookoto_Sea Over a year ago

Wrapping the col-md-3 divs in a row fixed the problem. Thanks.

user184994 · Accepted Answer · 2018-07-28 20:19:07Z

Change from col-md-3 to col-xs-3 or col-sm-3. I'm guessing your viewport is larger than md, so it falls back to full width.

Try running the snippet below

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class='container'>
  <h2 class="page-header">Add Contact</h2>
  <form (submit)="addContact()">
    <div class="form-group">
      <label>First Name</label>
      <input type="text" [(ngModel)]="first_name" name="first_name" class="form-control">
    </div>
    <div class="form-group">
      <label>Last Name</label>
      <input type="text" [(ngModel)]="last_name" name="last_name" class="form-control">
    </div>
    <div class="form-group">
      <label>Phone Number</label>
      <input type="text" [(ngModel)]="phone" name="phone" class="form-control" required>
    </div>
    <input type="submit" class="btn btn btn-success" value="Add">
  </form>
</div>

<hr>

<div class="container">
  <div *ngFor="let contact of contacts">
    <div class="col-xs-3">
      Test
    </div>
    <div class="col-xs-3">
      Test
    </div>
    <div class="col-xs-3">
      Test
    </div>
    <div class="col-xs-3">
      <input type="button" (click)="deleteContact(contact._id)" value="Delete" class="btn btn-danger">
      <br><br>
    </div>
  </div>
</div>

Wrapping the col-md-3 divs in a row fixed the problem. Thanks to @dream_cap answer.

Abdus Sattar · Accepted Answer · 2018-07-28 20:43:43Z

0

I suggest, use Angular Flex for arranging your <div>s as per your requirement. Its pretty simple once your know how to use Angular Flex(refer).

answered Jul 28, 2018 at 20:43

Abdus Sattar

3091 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

Angular 2 - Unable to display rows of data in tabular column format

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related