Show Menu
Cheatography

Table Hitung Angular 6 Cheat Sheet by

Make List of Product with Count Profit Method

Angular CLI

Generating classes
ng g cl [class’s name]
Serving commands
ng serve
 
ng serve -o

my-app­/sr­c/a­pp/­app.co­mpo­nen­t.css

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

Button / Tombol

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

Metode 1

Tampilkan Data
{{ title }}
Tombol untuk Buka Form Baru
<button type="s­ubm­it" class=­"btn btn-pr­ima­ry" (click­)="o­nNe­w()­"­>Ne­w</­but­ton>
If
<div *ngIf=­"­sho­wNe­w"><­/di­v>
Form Submit
<form (ngSubmit) = "­onS­ave­()">­</f­orm>
Binding
<td­><input type="t­ext­" class=­"­for­m-c­ont­rol­" [(ngMo­del­)]=­"­sto­ckR­eg.S­KU­" name="S­KU">­</t­d>
Tombol Submit
<button type="submit">{{submitType}}</button>
Retrieve Data
<td>{{ stc.ku­antitas }}<­/td>

my-app­/sr­c/a­pp/­app.co­mpo­nen­t.html

<!--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>
 

Kelas

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

Inisiasi

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(){}
}

create

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

save

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

edit

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

delete

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

Cancel

onCancel(){
    this.showNew = false;
  }

my-app­/sr­c/a­pp/­app.co­mpo­nent.ts

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;
  }

}
 

my-app­/sr­c/a­pp/­app.mo­dule.ts

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 { }
 

Comments

No comments yet. Add yours below!

Add a Comment

Your Comment

Please enter your name.

    Please enter your email address

      Please enter your Comment.

          Related Cheat Sheets

          AngularJS Cheat Sheet
          Angular 2 Forms Cheat Sheet

          More Cheat Sheets by amihapsari