2. Menambah Component dan Mengatur Routing di Angular 12

    

    Sebelumnya saya sudah share cara bagaimana memulai membuat aplikasi dengan angular. sekarang adalah lanjutan tutorial bagaimana caranya menambah component dan mengatur routing di dalam angular. pada tutorial ini saya menggunakan angular versi 12.4 (terbaru saat ini).

1. Cara Menambah Component di Angular

    Component pada angular merupakan file-file yang di tambahkan secara otomatis melalui kode yang ditulis pada terminal atau command promp. Dan selanjutnya file-file tersebut dapat di buat routing atau dihubungkan satu sama lain melalui akses url. berikut adalah kode cara menambah component:

ng generate component namacomponent

pada tutorial ini, saya akan menambahkan component login dan registrasi ke dalam folder auth. sehingga kode nya menjadi seperti ini :

ng generate component auth/login
ng generate component auth/registrasi

ketikan kode di atas ke dalam terminal atau command promp, dan hasilnya akan seperti ini:

jika berhasil, maka akan terbuat file-file seperti dibawah ini secara otomatis:

2. Cara Mengatur Routing di Angular

    Untuk membuat routing di angular, ikuti cara-cara berikut ini:

a. Mengubah isi file app.component.html

buka file app.component.html dan hapus semua isi kode nya. kemudian copy dan pastekan kode ini :

<router-outlet></router-outlet>

b. Menambah kode di app-routing.module.ts

buka file app-routing.module.ts dan isikan kode dibawah ini :

const routes: Routes = [

  {

    path :'login',

    component :LoginComponent

  },

  {

    path :'registrasi',

    component :RegistrasiComponent

  }

];

jangan lupa importkan component LoginComponet dan RegistrasiComponet seperti dibawah ini :

import { LoginComponent } from './auth/login/login.component';

import { RegistrasiComponent } from './auth/registrasi/registrasi.component';

jika sudah, simpan semua perubahan dan buka browser dengan url localhost:4200/login

jika berhasil maka akan tampil seperti diatas.

jika url nya localhost:4200/registrasi maka tampilanya seperti ini:

Cukup sekian materi tutorial kali ini. simak terus untuk lanjutan tutorialnya.

#angular #routing #component