Menggunakan Angular Material Dialog

by

Kita akan menggunakan Component Dialog yang berisi form untuk menambahkan contact.

Pertama kita buka file toolbar.component.html, lalu tambahkan click listener.

<mat-toolbar color="primary">
    <button class="sidenav-toggle" mat-button (click)="toggleSidenav.emit()">
        <mat-icon>menu</mat-icon>
    </button>
    <span>Contact Manager</span>
    <!-- menambahkan menu pada toolbar -->
    <span class="example-spacer"></span>
    <button mat-icon-button [matMenuTriggerFor]="menu">
      <mat-icon>more_vert</mat-icon>
    </button>
    <mat-menu #menu="matMenu">
      <button mat-menu-item (click)="openAddContactDlg()">Add Contact</button>
    </mat-menu>
</mat-toolbar>

Karena dialog yang akan kita buat cukup besar, oleh karena itu kita buat component baru.

$ ng g c contactmanager/components/add-contact-dialog --skip-tests

Kemudian buka file toolbar.component.ts, tambahkan code untuk menampilkan dialog.

import { Component, OnInit, Output, EventEmitter } from '@angular/core';
import { MatDialog } from '@angular/material/dialog';
import { AddContactDialogComponent } from '../add-contact-dialog/add-contact-dialog.component';

@Component({
  selector: 'app-toolbar',
  templateUrl: './toolbar.component.html',
  styleUrls: ['./toolbar.component.scss']
})
export class ToolbarComponent implements OnInit {
  // handling click event emiter
  @Output() toggleSidenav = new EventEmitter<void>();

  constructor(private dialog : MatDialog) { }

  ngOnInit(): void {
  }

  openAddContactDlg(){
    //open dialog here.
    let dialogRef = this.dialog.open(AddContactDialogComponent, {
      width: '400px'
    });

    dialogRef.afterClosed().subscribe(result=>{
      console.log(result);
    });
  }
}

Jika Anda test, sampai disini kita sudah berhasil menampilkan dialog yang berisi component AddContactDialogComponent.

Menambahkan Form Pada Dialog

Berikutnya kita akan menambahkan form pada AddContactDialog. Buka file add-contact-dialog.component.html, lalu tambahkan code berikut.

<h2 mat-dialog-title>Add New Contact</h2>
<mat-dialog-content>
    <div class="dialog-container">
        <mat-form-field appearance="fill">
            <mat-label>Avatar</mat-label>
            <mat-select ([ngModel])="user.avatar">
                <mat-option *ngFor="let avatar of avatars" [value]="avatar">
                    <mat-icon svgIcon="{{avatar}}"></mat-icon>{{avatar}}
                </mat-option>
            </mat-select>
        </mat-form-field>

        <mat-form-field appearance="fill">
            <mat-label>Name</mat-label>
            <input matInput  [formControl]="name"  required>
            <mat-error *ngIf="name.invalid">{{getErrorMessage()}}</mat-error>
        </mat-form-field>

        <mat-form-field appearance="fill">
            <mat-label>Bio</mat-label>
            <textarea matInput ([ngModel])="user.bio"></textarea>
        </mat-form-field>
    </div>
</mat-dialog-content>
<mat-dialog-actions>
    <button mat-button color="primary" (click)="save()"><mat-icon>save</mat-icon>Save</button>
    <button mat-button (click)="cancel()"><mat-icon>cancel</mat-icon>Cancel</button>
</mat-dialog-actions>

Kemudian tambahkan ccs pada add-contact-dialog.component.scss

.dialog-container{
    display: flex;
    flex-direction: column;
}

.dialog-container>*{
 width: 100%;
}

Kemudian buka file add-contact-dialog.component.ts, tambahkan code untuk handling click listener save dan cancel. Juga code untuk handling validasi.

import { Component, OnInit } from '@angular/core';
import { FormControl, Validators } from '@angular/forms';
import { MatDialogRef } from '@angular/material/dialog';
import { User } from '../../models/user';

@Component({
  selector: 'app-add-contact-dialog',
  templateUrl: './add-contact-dialog.component.html',
  styleUrls: ['./add-contact-dialog.component.scss']
})
export class AddContactDialogComponent implements OnInit {
  avatars=['svg-1', 'svg-2', 'svg-4' ];

  user! : User;


  constructor(private dialogRef : MatDialogRef<AddContactDialogComponent>) { }

  ngOnInit(): void {
    this.user = new User();
  }

  save(){
    this.user.name = this.name.value;
    this.dialogRef.close(this.user);
  }

  cancel(){
    this.dialogRef.close(null);
  }


  name = new FormControl('', [Validators.required]);
  getErrorMessage() {
    return this.name.hasError('required') ? 'Please Enter Name' : '';
  }
}

Perhatian, karena menggunakan Reactive form untuk melakukan validasi, jangan lupa untuk import library pada contactmanager.module.ts.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FlexLayoutModule } from '@angular/flex-layout';
import { FormsModule, ReactiveFormsModule } 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';
import { UserService } from './services/user.service';
import { HttpClientModule } from '@angular/common/http';
import { NotesComponent } from './components/notes/notes.component';
import { AddContactDialogComponent } from './components/add-contact-dialog/add-contact-dialog.component';


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

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

Sampai disini kita sudah berhasil menambahkan form dialog.

Karena tutorial ini bukan tutorial tentang membuat aplikasi programming, tapi lebih ke tutorial desain dengan menggunakan Angular Material, kita tidak akan bahas proses save.

Sharing is caring:

Leave a Comment