Angular Routing – Part 4

Pada modul ini kita akan belajar melakukan passing parameter melalui routing.

Menggunakan project sebelumnya, kita ingin menampilkan user dengan id tertentu.

Modul ini lebih bertujuan menjelaskan penggunaan parameter, jadi data diambil bukan dari database. Agar tutorial menjadi lebih sederhana dan mudah dipahami.

Buka file app.module.ts, lalu tambahkan routing baru (lihat bagian comment).

Route baru akan menggunakan aturan path users/:id/:nama, artinya :id dan :nama adalah parameter, bisa diisi nilai. Dan component yang akan ditampilkan adalah UserComponent.

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

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { UsersComponent } from './users/users.component';
import { UserComponent } from './users/user/user.component';


const appRoutes : Routes = [
  {path: '', component: HomeComponent},
  {path: 'users', component: UsersComponent},
  {path: 'users/:id/:name', component: UserComponent} //routing dengan parameter
];

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    UsersComponent,
    UserComponent,
  ],
  imports: [
    BrowserModule,
    FormsModule,
    RouterModule.forRoot(appRoutes)
  ],
  bootstrap: [AppComponent]
})
export class AppModule { }

Berikutnya kita perlu menangkap data dari parameter. Buka file user.component.ts,

Akses current active route melalui constructor.
Fetch data id dan nama dari parameter router.

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

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.css']
})
export class UserComponent implements OnInit {
  user!: {id: number, name: string};

  //akses instance Active Route.
  constructor(private route: ActivatedRoute) { }

  //fetch data id dan nama dari parameter
  ngOnInit() {
    this.user = {
      id: this.route.snapshot.params['id'],
      name: this.route.snapshot.params['name']
    }
  }

}

Buka file user.component.html, ubah untuk menampilkan data user diatas.

<p>User with ID {{user.id}}</p>
<p>User name is {{user.name}}</p>

Kemudian buka file users.component.html, ubah a href degan

membuang attribut href=”#” agar page tidak diload ulang.
tambahkan directive routerLink untuk menambahkan route.

<div class="row">
  <div class="col-xs-12 col-sm-4">
    <div class="list-group">
      <a
        class="list-group-item"
        *ngFor="let user of users"
        [routerLink]="['/users',  user.id, user.name]"
        >
        {{ user.name }}
      </a>
    </div>
  </div>
  <div class="col-xs-12 col-sm-4">
    <app-user></app-user>
  </div>
</div>

Sesuai ekspektasi, kita sudah berhasil membaca parameter dari link.

Sampai disini, pengenalan routing sudah selesai. Anda bisa download file finish project disini: https://drive.google.com/file/d/1OfLhCXenYQxIllioP3Wh_a1QEjS4-gQr/view?usp=sharing

Sharing is caring:

Leave a Comment Cancel reply