Table Hitung Angular 6 Cheat Sheet by amihapsari

table{
  margin-left: auto;
  margin-right: auto;
}
.tabel2 {
    border-collapse: collapse;
  }
  
.tabel2, tr, th, td {
   border: 1px solid black;    
}

<button type="submit" class="btn btn-primary" (click)="onNew()">New</button>

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    CRUD {{ title }}
  </h1>  
  <h2>Insert Data</h2> 
  <button type="submit" class="btn btn-primary" (click)="onNew()">New</button> 
  <div *ngIf="showNew">
    <form (ngSubmit) = "onSave()">
      <table style="border: 1px solid white">
        <tr>
          <td>SKU</td>
          <td><input type="text" class="form-control" [(ngModel)]="stockReg.SKU" name="SKU"></td>
        </tr>
        <tr>
          <td>Nama</td>
          <td><input type="text" class="form-control" [(ngModel)]="stockReg.nama" name="nama"></td>
        </tr>
        <tr>
          <td>Kuantitas</td>
          <td><input type="number" class="form-control" [(ngModel)]="stockReg.kuantitas" name="kuantitas"></td>
        </tr>
        <tr>
          <td>hargaBeli</td>
          <td><input type="number" class="form-control" [(ngModel)]="stockReg.hargaBeli" name="hargaBeli"></td>
        </tr>
        <tr>
          <td>hargaJual</td>
          <td><input type="number" class="form-control" [(ngModel)]="stockReg.hargaJual" name="hargaJual"></td>
        </tr>
       
        
      </table>
      
      <button type="submit">{{submitType}}</button>   
      <button type="submit" (click)="onCancel()">Cancel</button>  
    </form>
  </div>
  
  
  <h2>Result</h2>
  <table class='tabel2'>
    <thead>
      <tr>
        <th>No.</th>
        <th>SKU</th>
        <th>Nama</th>
        <th>Kuantitas </th>
        <th>Harga beli</th>
        <th>Harga jual</th>
        <th>Profit per item</th>
        <th colspan="2">Action</th>

      </tr>
    </thead>
    <tbody>
      <tr *ngFor="let stc of listStock; let i = index">
        <th scope="row">{{ i+1 }}</th>
        <td scope="row">{{ stc.SKU }}</td>
        <td>{{ stc.nama }}</td>
        <td>{{ stc.kuantitas }}</td>
        <td>{{ stc.hargaBeli }}</td>
        <td>{{ stc.hargaJual }}</td>
        <td>{{ stc.getProfit() }}</td>
        <td><button type="button" (click)="onEdit(i)">Edit</button></td>
        <td><button type="button" (click)="onDelete(i)">Delete</button></td>
      </tr>
    </tbody>
    
  </table>

class StockBarang{
  constructor(
    public SKU: string = '',    
    public kuantitas: number = null,       
  ){}
  getProfit(){
    this.profit = this.hargaJual-this.hargaBeli;
    return this.profit;
  }
}

export class AppComponent implements OnInit{
  listStock: StockBarang[] = [];
  stockReg: StockBarang;
  showNew: Boolean = false;
  selectedRow: number;
  submitType: string = 'Save';
  constructor(){
    this.listStock.push(new StockBarang('AIR001', 'Aqua', 10, 3000, 6000, null));    
  ngOnInit(){}
}

onNew(){
    this.stockReg = new StockBarang();
    this.submitType = 'Save';
    this.showNew = true;
  }

onSave(){
    if(this.submitType === 'Save'){
      this.listStock.push(this.stockReg);
    }
    else{
      //Update
      this.listStock[this.selectedRow].SKU = this.stockReg.SKU;      
    }
    //Hide 
    this.showNew = false;
  }

onEdit(index: number){
      this.submitType = 'Update';
      this.selectedRow = index;
      this.stockReg = new StockBarang();
      this.stockReg = Object.assign({}, 
        this.listStock[this.selectedRow]); 
      this.showNew = true;
  }

onDelete(index: number){
    this.listStock.splice(index, 1);
  }

onCancel(){
    this.showNew = false;
  }

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



class StockBarang{
  constructor(
    public SKU: string = '',
    public nama: string = '',
    public kuantitas: number = null,
    public hargaBeli: number = null,
    public hargaJual: number = null,
    public profit: number = null,
  ){}
  getProfit(){
    this.profit = this.hargaJual-this.hargaBeli;
    return this.profit;
  }
}

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit{
  listStock: StockBarang[] = [];
  stockReg: StockBarang;
  showNew: Boolean = false;
  selectedRow: number;
  submitType: string = 'Save';
  constructor(){
    this.listStock.push(new StockBarang('AIR001', 'Aqua', 10, 3000, 6000, null));
    this.listStock.push(new StockBarang('SOF001', 'Coca Cola', 20, 5000, 4500, null));
    this.listStock.push(new StockBarang('SNK001', 'Chitato', 15, 4000, 5000, null));
  }
  ngOnInit(){}

  onNew(){
    this.stockReg = new StockBarang();
    this.submitType = 'Save';
    this.showNew = true;
  }

  onSave(){
    if(this.submitType === 'Save'){
      this.listStock.push(this.stockReg);
    }
    else{
      //Update
      this.listStock[this.selectedRow].SKU = this.stockReg.SKU;
      this.listStock[this.selectedRow].nama = this.stockReg.nama;
      this.listStock[this.selectedRow].kuantitas = this.stockReg.kuantitas;
      this.listStock[this.selectedRow].hargaBeli = this.stockReg.hargaBeli;
      this.listStock[this.selectedRow].hargaJual = this.stockReg.hargaJual;
      this.listStock[this.selectedRow].profit = this.stockReg.profit;
    }
    //Hide 
    this.showNew = false;
  }

  onEdit(index: number){
      this.submitType = 'Update';
      this.selectedRow = index;
      this.stockReg = new StockBarang();
      this.stockReg = Object.assign({}, 
        this.listStock[this.selectedRow]);      
      this.showNew = true;
  }

  onDelete(index: number){
    this.listStock.splice(index, 1);
  }
  
  onCancel(){
    this.showNew = false;
  }

}

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }