Angular Routing – Part 2

by

Berikutnya kita akan menghubungkan routing yang telah dibuat pada modul sebelumnya dengan Link Navigasi.

Mungkin Anda akan berpikir, tinggal menambahkan routing pada masing-masing link yang terdapat pada file app.component.html.

<li role="presentation" class="nav-item active"><a href="/" class="nav-link">Home</a></li>
<li role="presentation" class="nav-item active"><a href="/users" class="nav-link" >Users</a></li>

Pendekatan diatas memang link berjalan dengan baik, namun yang terjadi adalah, aplikasi di reload ulang. Artinya aplikasi melakukan request ke server.

Namun pendekatan ini bukan behaviour yang baik, karena kita akan selalu me-restart aplikasi setiap navigasi dilakukan.

Implementasi Navigasi dan Router

Untuk mengggunakan router pada navigasi dengan benar, digunakan directive routerLink. Ada dua method, menggunakan sebagai attribute atau sebagai property binding.

Method property binding akan kita bahas lebih mendalam dimodul berikutnya.

<a routerLink="/" class="nav-link">Home</a>
<a [routerLink]="['/users']" class="nav-link" >Users</a>

Buka file app.component.html, ubah navigasi menggunakan code diatas.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <ul class="nav nav-tabs">
        <li role="presentation" class="nav-item active"><a routerLink="/" class="nav-link">Home</a></li>
        <li role="presentation" class="nav-item active"><a [routerLink]="['/users']" class="nav-link" >Users</a></li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <router-outlet></router-outlet>
    </div>
  </div>  
</div>

Perhatian

Link diatas digunakan absolute path, yaitu / dan /users. Untuk kondisi diatas dapat digunakan relative path.

<a [routerLink]="['users']" class="nav-link" >Users</a>

Jika akan menggunakan relative path, Anda perlu perhatikan current path ketika component diload.

Pada saat app.component.html ditampilkan, current path adalah /, jadi bila digunakan relative path untuk menampilkan users, yang terjadi adalah relative path akan ditambahkan kedalam current path, jadi /users.

Menambahkan Visual Selected

Karena kita akan menggunakan bootstrap 5, untuk navigasi kita ubah menggunakan button. Code HTML diatas berjalan pada bootstrap 3.

Ganti code <a href> menjadi <button>

...
...
      <ul class="nav nav-tabs">
        <li role="presentation" class="nav-item">
          <button class="nav-link" type="button" role="tab" routerLink="/" >Home</button>
        </li>
        <li role="presentation" class="nav-item">
          <button class="nav-link" type="button" role="tab" [routerLink]="['/users']">Users</button>
        </li>
      </ul>
...
...

Agar tab yang dipilih ditampilkan active secara visual, digunakan directive routerLinkActive=”nama class”.

Pada bootstrap digunakan class active untuk menunjukan tab dalam kondisi aktif atau dipilih.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <ul class="nav nav-tabs">
        <li role="presentation" class="nav-item">
          <button class="nav-link" type="button" role="tab" routerLinkActive="active" routerLink="/" >
            Home
          </button>
        </li>
        <li role="presentation" class="nav-item">
          <button class="nav-link" type="button" role="tab" routerLinkActive="active" [routerLink]="['/users']" >Users</button>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <router-outlet></router-outlet>
    </div>
  </div>  
</div>

Jika Anda test, button home akan selalu dalam kondisi aktif.

Untuk mengatasi masalah diatas, pada home button, perlu ditambahkan directive tambahan.

[routerLinkActiveOptions]="{exact:true}"

Berikut hasil akhir app.component.html.

<div class="container">
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <ul class="nav nav-tabs">
        <li role="presentation" class="nav-item">
          <button class="nav-link" type="button" role="tab" routerLinkActive="active" [routerLinkActiveOptions]="{exact:true}" routerLink="/" >
            Home
          </button>
        </li>
        <li role="presentation" class="nav-item">
          <button class="nav-link" type="button" role="tab" routerLinkActive="active" [routerLink]="['/users']" >Users</button>
        </li>
      </ul>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">
      <router-outlet></router-outlet>
    </div>
  </div>  
</div>

Sesuai ekspektasi, sekarang hanya aktif tab saja yang ditampilkan aktif.

Sharing is caring:

Leave a Comment