Creating Custom Dialogs

The angular-modals library supports custom modal dialogs components. This can be done by implementing the IModalDialog<T> interface on your custom component. We'll create an example below that shows how you could create a modal dialog that allows a user to select a date from a date picker.

Creating our custom date picker component

In order to create a date picker modal we need to ensure our component implements IModalDialog<Date>. To satisfy the IModalDialog interface the component will also need to have a dialogResult: Subject<Date> property.

Angular Component

When the user submits the form the dialogResult will be the selected Date value, if the form/dialog is cancelled a null value is set.

import { Component, Output } from '@angular/core';
import { Subject } from 'rxjs';
import { IModalDialog } from '@thirdwheel-studios/angular-modals';


@Component({
  templateUrl: './date-picker-dialog.component.html',
  styleUrls: []
})
export class DatePickerDialogComponent implements IModalDialog<Date> {

  dateValue: string;

  @Output() dialogResult = new Subject<Date>();

  onSubmit() {

    const date = new Date(this.dateValue);

    this.dialogResult.next(date);
    this.dialogResult.complete();

  }

  onCancelClick() {

    this.dialogResult.next(null);
    this.dialogResult.complete();

  }

  onOverlayClick(event: MouseEvent) {

    event.stopPropagation();

    this.dialogResult.next(null);
    this.dialogResult.complete();

  }

  onDialogClick(event: MouseEvent) {

    event.stopPropagation();

  }

}

Angular Template

The component template is simply a form containing a input type="date" control.

<div class="modal-overlay" (click)="onOverlayClick($event)">
  <div class="modal-dialog" (click)="onDialogClick($event)">
    <form #datePickerForm="ngForm" (ngSubmit)="onSubmit()">
      <h5>Example Date Picker Modal Component</h5>

      <div>
        <label for="dateValue">Select a date:</label>
        <input id="dateValue" name="dateValue" [(ngModel)]="dateValue" type="date" required autofocus />
      </div>

      <div class="footer">
        <button class="button-primary" type="submit" [disabled]="datePickerForm.pristine || !datePickerForm.valid">Save</button>
        <button (click)="onCancelClick()">Cancel</button>
      </div>
    </form>
  </div>
</div>

Registering the component

As with other Angular components, the custom modal component needs to be registered in a module.

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

import { DatePickerDialogComponent } from './date-picker-dialog.component';

@NgModule({
  declarations: [DatePickerDialogComponent],
  imports: [],
  exports: [],
  providers: []
})
export class AppModule {

}

Using our new custom date picker component

To use our shiny new date picker modal we need to use ModalService which can be injected into any component that needs to use it. We just need to tell showModal the custom component we want to show and what we are expecting back from the modal:

this.modalService.showModal<DatePickerDialogComponent, Date>(DatePickerDialogComponent)
  .subscribe(date => {

    if (date)
      console.log(`Date Picked: ${date}`);

  });