Image Load

Hello world,

Setiap website akan memiliki navigasi untuk berpindah dari satu halaman ke halaman lain. Maka dari itu dibutuhkan route. Tahapan pertama untuk membuat route dalam angular adalah dengan membuat project dengan routing option (app-routing.module.ts).  

Buat config route di app-routing.module.ts. Dan pastikan component diimport ke dalam app-routing.module.ts.
  • Jalankan ng new routedemo untuk membuat project baru. 
  • Saat muncuk opsi “? Would you like to add Angular routing? (y/N)” klik saja “y” lalu enter.
  • Setelah proses selesai, pastikan AppRoutingModule sudah diimport ke app.module.ts. 
  • Buat component baru dengan menjalankan ng g c halaman1 dan ng g c halaman2.
const routes: Routes = [
{path : 'halaman1', component : Halaman1Component},
{path : 'halaman2', component : Halaman2Component}
];


  • Tambahkan routingComponent pada app-routing.module.ts yang berisi component yang dipanggil.
export const RoutingComponent = [ Halaman1Component, Halaman2Component];
  • Sesuaikan app.module.ts dengan kode di bawah ini. Hapus kode berwarna merah dan tambahkan kode yang berwarna hijau.
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppRoutingModule, RoutingComponent } from './app-routing.module';
import { AppComponent } from './app.component';
import { Halaman1Component } from './halaman1/halaman1.component';
import { Halaman2Component } from './halaman2/halaman2.component';

@NgModule({
declarations: [
AppComponent,
Halaman1Component,
Halaman2Component,
RoutingComponent
],
imports: [
BrowserModule,
AppRoutingModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }

  • Dalam tahap ini kita sudah bisa mengakses pada browser http://localhost:4200/halaman1 dan http://localhost:4200/halaman2 .
  • Ubah file app.component.html menjadi seperti berikut untuk membuat link navigasi. Setiap link akan mengarah pada routerLink dan akan memanggil component yang telah didefinisikan dalam app-routing.module.ts. Kemudian halaman yang ada pada component tersebut akan ditampilkan dalam router-outlet pada app.component.html.
<div style="text-align:center">
<h1>
Welcome to {{ title }}!
</h1>
</div>
<a [routerLink]="[ '/halaman1' ]">Halaman 1</a> &nbsp; <a [routerLink]="[ '/halaman2' ]">Halaman 2</a>

<router-outlet></router-outlet>


Selamat Mencoba :)