Detail page doesn't show anything

Issue

I tried to make detail page but when i click it doesn't show anything, no errors in console

this is my reference https://angular.io/tutorial/toh-pt5#extract-the-id-route-parameter

This is my app-routing.module.ts

import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';


const routes: Routes = [
  {
    path: '',
    loadChildren: () => import('./tabs/tabs.module').then(m => m.TabsPageModule)
  },
  {
    path: 'detail/:id',
    loadChildren: () => import('./detail/detail.module').then( m => m.DetailPageModule)
  }
];
@NgModule({
  imports: [
    RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
  ],
  exports: [RouterModule]
})
export class AppRoutingModule {}

This is my tab1.page.html

  <ion-grid>
    <ion-row>
      <ion-col size="6" *ngFor="let produk of listProducts">
        <ion-card>
          <img src={{produk.loc}} style="width: 200px; height: 200px;"alt="" (click)="gotoDetail(produk)" />
          <ion-card-content style="height: 50px;">
            <ion-card-title>{{produk.name}}</ion-card-title>
          </ion-card-content>
        </ion-card>
      </ion-col>
    </ion-row>
  </ion-grid>

This is my tab1.page.ts

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';
import { products } from '../products';
import { UtilsService } from '../services/utils.service';
import { category } from '../kategori';
import { DetailService} from '../services/detail.service';
import { Product } from '../produk';

@Component({
  selector: 'app-tab1',
  templateUrl: 'tab1.page.html',
  styleUrls: ['tab1.page.scss']
})
export class Tab1Page implements OnInit{
  public searchTerm: string = "";
  public items: any;
  listProducts = [];
  listKategori = [];
  produk: Product[] = [];
  slideopts = {
    slidesPerView : "3",
    spaceBetween: 0 ,
  };

  constructor(
    private router : Router,
    private utils: UtilsService,
    private detailService: DetailService
    ) {
    this.listProducts = products;
    this.listKategori = category;
    console.log(products);
    console.log(this.listProducts);
    console.log(category);
    console.log(this.listKategori);
    }
    ngOnInit() {
      this.getProduct();
    }

    getItems(ev: any){
      this.listProducts = products;
      let val = ev.target.value;

      if(val && val.trim() !=''){
        this.listProducts = this.listProducts.filter(produk =>{
          return produk.name.toLowerCase().indexOf(val.toLowerCase())>-1;
        });
      }
    }
    getKategori(itema: string){
      this.listProducts = products;
      let val1 = itema;

      if(val1 && val1.trim() !=''){
        this.listProducts = this.listProducts.filter(produk =>{
          return produk.kategori.toLowerCase().indexOf(val1.toLowerCase())>-1;
        });
      }
    }
    gotoDetail(produk: Product){
      this.router.navigate(['/detail', produk.id])
        }
    getProduct(): void{
      this.detailService.getProduct()
      .subscribe(produk => this.produk = produk);
    }
}

This is my detail.page.ts

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { DetailService } from '../services/detail.service';
import { Product} from '../produk';
@Component({
  selector: 'app-detail',
  templateUrl: './detail.page.html',
  styleUrls: ['./detail.page.scss'],
})
export class DetailPage implements OnInit{
  produk: Product;
  constructor(
    private route: ActivatedRoute,
    private detailService: DetailService
  ) {
   }
   ngOnInit() {
    this.getDetail();
  }

  getDetail(): void {
    const id = +this.route.snapshot.paramMap.get('id');
    this.detailService.getDetail(id)
    .subscribe(produk => this.produk = produk)
  }

}

This is my detail.service.ts

import { Injectable } from '@angular/core';
import { products } from '../products';
import { Product} from '../produk'
import { Observable, of } from 'rxjs';
@Injectable({
  providedIn: 'root'
})
export class DetailService {
  public items: any;


  constructor(
  ) { 
  }
  getProduct() : Observable<Product[]>{
    return of(products);
  }
  getDetail(id: any) : Observable<Product> {
    return of(products.find(item => item.id === id));
  }
}

Solution

Looks line your problem

this.router.navigate(['/detail', produk.id]) - to modify

Answered By - Tony Marko