I am currently using angular cli version 1.4.3, node version 6.11.3, and npm version 5.4.2. My goal is to retrieve records using angular2 and display them on localhost. I expected the output to look like this:
https://i.sstatic.net/S8TVI.jpg
however, the actual output I am receiving looks like this:
https://i.sstatic.net/DDAM9.png
Below is the HTML code snippet:
<div class="row m-b-18px">
<div class="col-md-12">
<!-- button to create new product -->
<a (click)="createProduct()" class='btn btn-primary pull-right'>
<span class='glyphicon glyphicon-plus'></span> Create Product
</a>
</div>
</div>
<div class="row">
<div class="col-md-12">
<!-- HTML table for our list of product records -->
<table class='table table-hover table-responsive table-bordered'>
<tr>
<th>Product</th>
<th>Price</th>
<th>Description</th>
<th>Category</th>
<th>Actions</th>
</tr>
<!-- Use *ngFor directive to loop throught our list of products. -->
<tr *ngFor="let product of products">
<td>{{product.name}}</td>
<td>{{product.price}}</td>
<td>{{product.description}}</td>
<td>{{product.category_name}}</td>
<td>
<!-- read one product button -->
<a (click)="readOneProduct(product.id)" class='btn btn-primary m-r-5px'>
<span class='glyphicon glyphicon-eye-open'></span> Read
</a>
<!-- edit product button -->
<a (click)="updateProduct(product.id)" class='btn btn-info m-r-5px'>
<span class='glyphicon glyphicon-edit'></span> Edit
</a>
<!-- delete product button -->
<a (click)="deleteProduct(product.id)" class='btn btn-danger m-r-5px'>
<span class='glyphicon glyphicon-remove'></span> Delete
</a>
</td>
</tr>
</table>
</div>
</div>
Here is the corresponding CSS code:
.m-b-18px{ margin-bottom: 18px; }
.m-r-5px{ margin-right: 5px; }
.w-40-pct{ width: 40%; }
.text-align-center{ text-align: center; }
Thank you for your assistance