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

Help Us Go Positive!

We offset our carbon usage with Ecologi. Click the link below to help us!

We offset our carbon footprint via Ecologi
 

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