Membuat Contact Manager Module

Aplikasi yang akan kita buat memiliki layout seperti berikut

Mari kita buat module dan component untuk aplikasi diatas. Buka command prompt dan jalankan perintah berikut

$ ng g m contactmanager
$ ng g c contactmanager/contactmanager-app --flat --skip-tests --inline-style --inline-template
$ ng g c contactmanager/components/toolbar --skip-tests
$ ng g c contactmanager/components/main-content --skip-tests
$ ng g c contactmanager/components/sidenav --skip-tests 

contactmanager-app akan berfungsi sebagai container, yang akan berisi component toolbar, sidenav dan main-content.

Buka file app.module.ts, tambahkan routing untuk contactmanager dan ubah default redirect ke contactmanager.

import { NgModule } from '@angular/core';

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

import { AppComponent } from './app.component';


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

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

Buka file contactmanager.module.ts, tambahkan flex-layout dan formsmodule.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule } from '@angular/forms';
import { Routes, RouterModule } from '@angular/router';

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

import { ContactmanagerAppComponent } from './contactmanager-app.component';
import { ToolbarComponent } from './components/toolbar/toolbar.component';
import { MainContentComponent } from './components/main-content/main-content.component';
import { SidenavComponent } from './components/sidenav/sidenav.component';


const routes : Routes = [
  {
    path: '', component: ContactmanagerAppComponent, 
    children: [
      {path: '', component: MainContentComponent}
    ]
},
  {path: '**', redirectTo: ''}
]

@NgModule({
  declarations: [
    ContactmanagerAppComponent,
    ToolbarComponent,
    MainContentComponent,
    SidenavComponent,
  ],
  imports: [
    CommonModule,
    FormsModule,
    MaterialModule,
    FlexLayoutModule,
    RouterModule.forChild(routes)   
  ]
})
export class ContactmanagerModule { }

Kemudian kita hubungkan antar component. Buka file contactmanager-app.component.ts, ubah template dengan menambahkan sidenav selector.

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

@Component({
  selector: 'app-contactmanager-app',
  template: `
    <app-sidenav></app-sidenav>
  `,
  styles: [
  ]
})
export class ContactmanagerAppComponent implements OnInit {

  constructor() { }

  ngOnInit(): void {
  }

}

Buka file sidenav.component.html, tambahkan toolbar selector router-outlet

<app-toolbar></app-toolbar>
<router-outlet></router-outlet>

Jika kita jalankan aplikasi, component sudah terhubung.

Sampai disini kita sudah berhasil membuat kerangka dasar dari aplikasi.

Pada modul berikutnya kita mulai menggunakan Angular Material Component untuk membuat SideNav.