lib/product_detail_component.html

   1
   2 <div *ngIf="prod != null" style="margin-left:0.5cm;">
   3         <h2>{{prod.name}}</h2>
   4         <div><label>Id: </label>{{prod.id}}</div>
   5         <div><label>Name: </label>{{prod.name}}</div>
   6         <div><label>Price: </label>{{prod.price}}</div>
   7         <div><label>Category: </label>{{prod.category}}</div>
   8 </div>
   9
  10 <div class="mdl-card mdl-shadow--2dp admin_edit">
  11 <div class="mdl-card__title">
  12         Update/delete product
  13 </div>
  14 <div class="mdl-card__actions mdl-card--border">
  15         <div style=float:left;>
  16         <div class="mdl-textfield mdl-js-textfield
  17                     mdl-textfield--floating-label ain">
  18                 <input class="mdl-textfield__input" type="text" id="pn"
  19                        [(ngModel)]="prod_name">
  20                 <label class="mdl-textfield__label" for="pn">Name</label>
  21         </div>
  22         <div class="mdl-textfield mdl-js-textfield
  23                     mdl-textfield--floating-label ain">
  24                 <input class="mdl-textfield__input" type="text" id="pp"
  25                        [(ngModel)]="prod_price">
  26                 <label class="mdl-textfield__label" for="pp">
  27                         Price
  28                 </label>
  29         </div>
  30         </div>
  31         <div class=asel>
  32                 Product category<br><br>
  33                 <select [(ngModel)]="prod_category" required>
  34                         <option *ngFor="let prodcat of prodcats"
  35                                 [value]="prodcat.id">
  36                                 {{prodcat.name}}
  37                         </option>
  38                 </select>
  39         </div>
  40         <div style=clear:left;>
  41         <button class="mdl-button mdl-js-button mdl-button--raised abtn"
  42                 (click)="updateProduct()">
  43                 Update
  44         </button>
  45         <button class="mdl-button mdl-js-button mdl-button--raised abtn"
  46                 (click)="deleteProduct(prod)">
  47                 Delete
  48         </button>
  49         </div>
  50 </div>
  51 </div>
  52