Image Load

Hello world,

Melanjutkan pembahasan sebelumnya yaitu Route & Navigation (part 1), kali ini saya lanjutkan untuk pembahasan mengenai bagaimana cara menambahkan parameter yang ingin dikirim/ditampilkan pada halaman-halaman saat bernavigasi. Pada part 2 ini kita langsung saja melanjutkan dari codingan yang sebelumnya ada di part 1. Oke langsung saja ke contoh.

Pada contoh berikut ini kita akan mencoba membuat sebuah halaman detail yang akan memiliki parameter yaitu id.


  • Buat component baru dengan menjalankan ng g c halaman1-detail.
  • Tambahkan component halaman1-detail pada route
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { Halaman1Component } from './halaman1/halaman1.component';
import { Halaman2Component } from './halaman2/halaman2.component';
import { Halaman1DetailComponent } from './halaman1-detail/halaman1-detail.component';


const routes: Routes = [
{path : 'halaman1', component : Halaman1Component},
{path : 'halaman1/:id', component : Halaman1DetailComponent},

{path : 'halaman2', component : Halaman2Component}
];

@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
export const RoutingComponent = [ Halaman1Component, Halaman2Component, Halaman1DetailComponent ];


  • Dalam tahap ini kita sudah bisa menjankan http://localhost:4200/halaman1/3
  • Selanjutnya adalah tahap untuk mengambil parameter id dari url. Perbaharui file halaman1-detail.component.ts menjadi seperti berikut. Tambahkan kode berwana kuning.

import { Component, OnInit } from '@angular/core';
import { ActivatedRoute } from '@angular/router'


@Component({
selector: 'app-halaman1-detail',
templateUrl: './halaman1-detail.component.html',
styleUrls: ['./halaman1-detail.component.css']
})
export class Halaman1DetailComponent implements OnInit {

public halamanId;


constructor(private route : ActivatedRoute) { }

ngOnInit() {
let id = parseInt(this.route.snapshot.paramMap.get('id'));
this.halamanId = id;

}
}
  • Perbaharui juga halaman1-detail.component.html untuk menampilkan ID.
<p>
halaman1-detail dengan halaman id = {{halamanId}}
</p>


Selamat Mencoba :)