Implementasi Reactive Form – 7

Melanjutkan dari modul sebelumnya, menu yang baru ditambahkan, bila kita melakukan navigasi, akan hilang.

Hal ini terjadi karena Recipe Service diregistrasikan pada level component. Hal ini cukup mudah diselesaikan.

Pertama buang registrasi service pada level component. Buka file recipes.component.ts, ubah menjadi code seperti dibawah dengan membuang registrasi recipe service.

import { Component, OnInit} from '@angular/core';
import { RecipeService } from './recipe.service';

@Component({
  selector: 'app-recipes',
  templateUrl: './recipes.component.html',
  styleUrls: ['./recipes.component.css'],
  //service akan diregistrasikan pada level aplikasi
  //providers: [RecipeService]
})
export class RecipesComponent implements OnInit {
  constructor() { }

  ngOnInit(): void {
  }
}

Buka file app.module.ts, lalu tambahkan recipe service pada property providers.

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

import { AppComponent } from './app.component';
import { HeaderComponent } from './header/header.component';
import { RecipesComponent } from './recipes/recipes.component';
import { RecipeListComponent } from './recipes/recipe-list/recipe-list.component';
import { RecipeDetailComponent } from './recipes/recipe-detail/recipe-detail.component';
import { RecipeItemComponent } from './recipes/recipe-list/recipe-item/recipe-item.component';
import { ShoppingListComponent } from './shopping-list/shopping-list.component';
import { ShoppingEditComponent } from './shopping-list/shopping-edit/shopping-edit.component';
import { DropDownDirective } from './shared/dropdown.directive';
import { ShoppingListService } from './shopping-list/shopping-list.service';
import { AppRoutingModule } from './app-routing.module';
import { RecipeHomeComponent } from './recipes/recipe-home/recipe-home.component';
import { RecipeEditComponent } from './recipes/recipe-edit/recipe-edit.component';
// tambahkan RecipeService, jika IDE tidak otomatis
import { RecipeService } from './recipes/recipe.service';

@NgModule({
  declarations: [
    AppComponent,
    HeaderComponent,
    RecipesComponent,
    RecipeListComponent,
    RecipeDetailComponent,
    RecipeItemComponent,
    ShoppingListComponent,
    ShoppingEditComponent,
    DropDownDirective,
    RecipeHomeComponent,
    RecipeEditComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    ReactiveFormsModule,
    AppRoutingModule
  ],
  providers: [ShoppingListService, RecipeService], //tambahkan recipe service
  bootstrap: [AppComponent]
})
export class AppModule { }

Jika Anda test melakukan navigasi pada aplikasi, recipe yang baru ditambahkan akan tetap exist.

Berikutnya sedikit perbaikan, pada recipe-list dilakukan subscribe, namun tidak disertai method unsubscribe, yang akan menyebabkan memory leak.

Buka file recipe-list.component.ts, tambahkan implementasi onDestroy dan unsubscribe subject yang digunakan. (lihat code dengan bagian comment).

import { Component, OnDestroy, OnInit } from '@angular/core';
import { ActivatedRoute, Router } from '@angular/router';
//import library subscription jika IDE tidak otomatis.
import { Subscription } from 'rxjs';
import { Recipe } from '../recipe.model';
import { RecipeService } from '../recipe.service';

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

//tambahkan implementasi OnDestroy
export class RecipeListComponent implements OnInit, OnDestroy {
  recipes!: Recipe[];
  //tambahkan property subject subscription
  subscription! : Subscription;

  constructor(private recipeService: RecipeService, 
    private router: Router,
    private route: ActivatedRoute
    ) { }

  ngOnInit(): void {
    //simpan informasi subscription kedalam property
    this.subscription = this.recipeService.recipeChange.subscribe(
      (recipes: Recipe[])=>{
        this.recipes = recipes;
      }
    );
    this.recipes = this.recipeService.getRecipes();
  }

  onNewRecipe(){
    this.router.navigate(['new'], {relativeTo: this.route});
  }

  //unsubscribe subject subscription
  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

Sampai disini, pembahasan reactive form dan perbaikan beberapa bug sudah selesai.

Dengan ini Tutorial Membuat Web App Menggunakan Angular Part 2 sudah selesai.

File project finished dapat download disini: https://drive.google.com/file/d/1B0Zm9EGZ4lAalcCXq1U2oWjTKnx4YZSr/view?usp=sharing

Pada tutorial berikutnya kita akan membahas topik-topik yang lebih advanced seperti pipe, http request dan authentication.