Membuat Demo Module dan Routing

by

Aplikasi yang akan dibuat akan kita bedakan menjadi 2 routing, pertama real aplikasi yaitu contact manager, dan routing kedua adalah untuk area melakukan testing.

Setup Demo Module

Pertama, kita tambahkan module dan routing untuk melakukan testing component.

$ ng g m demo/demo --flat --routing

Perintah diatas akan membuat directory baru demo, dengan 2 file demo module dan routing.

CREATE src/app/demo/demo-routing.module.ts (247 bytes)
CREATE src/app/demo/demo.module.ts (272 bytes)

Berikutnya kita buat component yang untuk testing, yaitu component buttons.

ng g c demo/buttons --flat --skip-tests --inline-style --inline-template

Kemudian buka file demo/buttons.component.ts, ubah bagian template seperti code berikut.

Template akan menampilkan button dan checkbox dengan menggunakan Angular Material Class.

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

@Component({
  selector: 'app-buttons',
  template: `
    <button mat-button>
      <mat-icon>face</mat-icon>
      Click here!
    </button>
    <mat-checkbox>Checkbox it is..</mat-checkbox>
  `,
  styles: [
  ]
})
export class ButtonsComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Buka file demo-routing.module.ts, tambahkan code routing.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { ButtonsComponent } from './buttons.component';

const routes: Routes = [
  {path: 'buttons', component: ButtonsComponent},
  {path: '**', redirectTo: 'buttons'}
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export class DemoRoutingModule { }

Kemudian buka file demo/demo.module.ts, tambahkan import untuk MaterialModule dan FormsModule.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { DemoRoutingModule } from './demo-routing.module';
import { ButtonsComponent } from './buttons.component';


import { MaterialModule } from '../shared/material.module';

@NgModule({
  declarations: [
    ButtonsComponent
  ],
  imports: [
    CommonModule,
    DemoRoutingModule,
    FormsModule,
    MaterialModule
  ]
})
export class DemoModule { }

Menambahkan Routing Pada App Module

Kemudian tambahkan router outlet, buka file app.component.html, isi dengan code berikut

<router-outlet></router-outlet>

Kemudian file app.module.ts, disini kita tambahkan routing.

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

import { AppComponent } from './app.component';
import { MaterialModule } from './shared/material.module';

const routes : Routes = [
  {path: 'demo', loadChildren: () => import('./demo/demo.module').then(m=> m.DemoModule)},
  {path: '**', redirectTo: 'demo'}
]

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    BrowserAnimationsModule,
    RouterModule.forRoot(routes),
    MaterialModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

JIka Aplikasi kita jalankan dengan ng serve, sesuai ekspektasi, akan ditampilkan seperti berikut

Sharing is caring:

Leave a Comment