4. Templating

tech

Table of Content

• Generate Layouts
• Isi Component.html
• Definisikan Routes
• Modifikasi app.components.ts
• Modifikasi app.component.html
• Hasil

Generate Layouts

Gue akan buat 3 layouts: detail, home, dan login. Kita akan mengetik perintah berikut:

ng generate component layouts/login-nik
ng generate component layouts/home
ng generate component layouts/detail

Maka struktur folder akan seperti ini:

Isi Component.html

isi nya langsung pakai bootstrap kurang lebih seperti ini:

<div class="container">    
	<h1>Detail Page</h1>    
	<p>Here are the details...</p>
</div>

Definisikan Routes

app/app.routes.ts

import { Routes } from '@angular/router';
import { HomeComponent } from './layouts/home/home.component';
import { DetailComponent } from './layouts/detail/detail.component';
import { LoginNikComponent } from './layouts/login-nik/login-nik.component';
 
export const routes: Routes = [
    { path: '', component: LoginNikComponent },
    { path: 'home', component: HomeComponent }, 
    { path: 'detail', component: DetailComponent }, 
];

Modifikasi app.components.ts

import { Component } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import { Router } from '@angular/router';
 
@Component({
  selector: 'app-root',
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css'
})
export class AppComponent {
  title = 'simobil-silo';
 
  constructor(private router: Router) {}
 
  navigateTo(route: string) {
    this.router.navigate([route]);
  }
}

Penjelasan:

• Constructor: Ini adalah metode khusus dalam kelas TypeScript (dan JavaScript) yang dipanggil saat sebuah objek dari kelas tersebut dibuat. Dalam konteks Angular, constructor digunakan untuk menginisialisasi properti dan melakukan dependency injection.
• Dependency Injection: Angular menggunakan pola ini untuk mengelola ketergantungan antar komponen dan layanan. Dalam hal ini, Router adalah layanan yang disediakan oleh Angular untuk menangani navigasi antar rute dalam aplikasi.
• private router: Router:
  • Kata kunci private di sini berarti bahwa properti router hanya dapat diakses dari dalam kelas AppComponent.
  • router adalah nama properti yang akan menyimpan instance dari Router.
  • Router adalah tipe dari properti tersebut, yang menunjukkan bahwa router akan memiliki semua metode dan properti yang tersedia dalam kelas Router Angular.
• Method: navigateTo adalah metode yang didefinisikan dalam kelas AppComponent. Metode ini bertanggung jawab untuk melakukan navigasi ke rute yang ditentukan.
• Parameter route: string:
  • route adalah parameter yang diterima oleh metode ini. Tipe string menunjukkan bahwa parameter ini harus berupa string, yang biasanya merupakan path rute yang ingin Anda navigasikan (misalnya, '/', '/detail', atau '/login').
• this.router.navigate([route]):
  • this.router merujuk pada instance Router yang telah di-inject melalui constructor.
  • navigate([route]) adalah metode dari kelas Router yang digunakan untuk mengubah rute saat ini ke rute yang baru.
  • Parameter yang diberikan ke navigate adalah array, sehingga Anda dapat memberikan beberapa segmen rute jika diperlukan. Dalam kasus ini, Anda hanya memberikan satu segmen rute.

Modifikasi app.component.html

<div class="container">
  <h1 class="mt-5">Welcome to My Angular App</h1>
  <button class="btn btn-primary" (click)="navigateTo('/')">Home</button>
  <button class="btn btn-primary" (click)="navigateTo('/detail')">Detail</button>
  <button class="btn btn-primary" (click)="navigateTo('/login')">Login</button>
</div>
 
<router-outlet></router-outlet>

Penjelasan:

• (click)="navigateTo('/')": Ini adalah event binding Angular. Ketika tombol diklik, metode navigateTo('/') akan dipanggil, yang akan mengarahkan pengguna ke rute utama (home) aplikasi.
• Ini adalah direktif Angular yang berfungsi sebagai placeholder untuk menampilkan komponen yang sesuai berdasarkan rute saat ini.

Hasil

Date: 24-03-2025