Implementasi Template Driven Form – 2

Pada modul ini kita akan menambahkan fitur jika shopping-list di pilih, akan ditampilkan kedalam form.

Buka file shopping-list.component.html, tambahkan code untuk click listener. Kita modif juga directive *ngFor untuk mendapatkan index.

<div class="row">
    <div class="col-xs-10">
        <app-shopping-edit></app-shopping-edit>
        <hr>
        <ul class="list-group">
            <a class="list-group-item" style="cursor:pointer" *ngFor="let ingredient of ingredients; let i =index" (click)="onEditItem(i)">
                {{ingredient.name}} ({{ingredient.amount}})
            </a>
        </ul>
    </div>
</div>

Kemudian buka file shopping-list.component.ts, tambahkan method untuk handling click listener diatas.

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

import { Ingredient } from '../shared/ingredient.model';
import { ShoppingListService } from './shopping-list.service';

@Component({
  selector: 'app-shopping-list',
  templateUrl: './shopping-list.component.html',
  styleUrls: ['./shopping-list.component.css']
})
export class ShoppingListComponent implements OnInit, OnDestroy {
  ingredients! : Ingredient[];
  private ingSub! : Subscription;

  constructor(private shoppingListServ : ShoppingListService) { }

  ngOnInit(): void {
    this.ingredients = this.shoppingListServ.getIngredients();
    this.ingSub = this.shoppingListServ.newInggredientAdded.subscribe(
      (ingredients: Ingredient[]) =>{this.ingredients = ingredients;}
    );
  }

  ngOnDestroy(): void {
    this.ingSub.unsubscribe()
  }

  //handling click, data index kita pass ke property startEdit pada shopping-list.service
  onEditItem(idx : number){
    this.shoppingListServ.startEdit.next(idx);
  }
}

Untuk pass data index item shopping, kita gunakan subject dalam shopping-list service. Buka file shopping-list.service.ts tambahkan property baru (lihat comment) dan method untuk mengambil data ingredient berdasarkan id.

import { Subject } from "rxjs";
import { Ingredient } from "../shared/ingredient.model";

export class ShoppingListService{
    newInggredientAdded = new Subject<Ingredient[]>();
    //tambahkan untuk shopping list edit.
    startEdit = new Subject<number>();

    private ingredients : Ingredient[] = [
        new Ingredient("Oreo", 1),
        new Ingredient("Tepung", 1),
      ];    

    getIngredients(){
        return this.ingredients.slice();
    }

    //method untuk mengambil data ingredient berdasarkan id.
    getIngredient(idx : number){
        return this.ingredients[idx];
    }

    addIngredient(ingredient : Ingredient){
        this.ingredients.push(ingredient);
        this.newInggredientAdded.next(this.ingredients.slice());
    }

    addIngredients(ingredients: Ingredient[]){
        this.ingredients.push(...ingredients);
        this.newInggredientAdded.next(this.ingredients.slice());
    }
}

Kemudian kita buka file shopping-edit.component.ts, ada beberapa hal yang akan ditambahkan

• Jika IDE tidak otomatis, tambahkan library yang digunakan ( lihat comment).
• Tambahkan property untuk menyimpan data subscription, mode edit dan data ingredient yang diedit.
• Subscribe property yang didefinisikan pada service, tambahkan juga unsubscribe saat object di destroy.
• Set data ingredient kedalam form menggunakan @ViewChild.

//tambahkan OnDestroy jika IDE tidak otomatis
import { Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
import { NgForm } from '@angular/forms';
//tambahkan library subscription jika IDE tidak otomatis
import { Subscription } from 'rxjs';
import { Ingredient } from 'src/app/shared/ingredient.model';
import { ShoppingListService } from '../shopping-list.service';

@Component({
  selector: 'app-shopping-edit',
  templateUrl: './shopping-edit.component.html',
  styleUrls: ['./shopping-edit.component.css']
})
export class ShoppingEditComponent implements OnInit, OnDestroy {
  @ViewChild('f', {static:false}) slForm! : NgForm;
  shoplistSubc! : Subscription;
  isEdit = false;
  editIdx = 0;
  editIngredient! : Ingredient;

  constructor(private shoppingListServ : ShoppingListService) { }

  //lakukan subscribe untuk mendapatkan index dari item yang diclick.
  //ambil data ingredient menggunakan method yang dibuat di file shopping-list.service
  //isi form 
  ngOnInit(): void {
    this.shoplistSubc = this.shoppingListServ.startEdit.subscribe(
      (idx : number)=>{
        this.isEdit = true;
        this.editIdx = idx;
        this.editIngredient = this.shoppingListServ.getIngredient(idx);
        this.slForm.setValue({
          name : this.editIngredient.name,
          amount : this.editIngredient.amount
        });
      }
    );
  }

  onAddItem(form : NgForm){
    const value = form.value;

    const newIngredient = new Ingredient(value.name, value.amount);
    this.shoppingListServ.addIngredient(newIngredient);
  }

  //lakukan unsubscribe.
  ngOnDestroy(): void {
    this.shoplistSubc.unsubscribe();
  }
}

Sampai disini kita sudah berhasil menampilkan data ingredient yang diclick kedalam form.

Namun masih ada kesalahan logic, dimana add button akan menambahkan item kedalam list, bukan melakukan update.

Kita akan perbaiki pada modul berikutnya.