kit-modal

API

[class] KitModalBackdropComponent

@Component

Selector:'kit-modal-backdrop'

Members

SignatureDescription
@Output() close = new EventEmitter<void>()
get display()
@Input() set display(display: boolean)

[class] KitModalRef

@Injectable

Members

SignatureDescription
readonly onClose = new Subject<void>()
readonly onDestroy = new Subject<void>()
get options(): Partial<KitModalOptions>
set options(options: Partial<KitModalOptions>)
get instance(): T
close()

Emit close event.

input(input: KitOverlayInput<T>)

Pass input to the hosted component.

[class] KitModalModule

@NgModule

Exports:[ KitModalComponent, ]

[class] KitModalService

@Injectable

Provided in:'root'

Modal dialogs are displayed in a layer is above of the page content.

Usage

Core does not provide styling or structure for modal, only tools for controlling overlay, backdrop, nesting, a11y.

You can use Angular component composition and create any set of modals.

export class DemoComponent {
  private modalRef: KitModalRef<DemoModalComponent>;
 *
  constructor(private modalService: KitModalService) {
  }
 *
  showModal() {
    this.modalRef = this.modalService.show({component: DemoModalComponent});
  }
 *
  closeModal() {
    this.modalRef.close();
  }
}

You can provide KitModalRef in DemoModalComponent:

export class DemoModalComponent {
  constructor(private modalRef: KitModalRef<DemoModalComponent>) {
  }
 *
  close() {
    this.modalRef.close();
  }
}

When KitModalRef.close() called it destroys component instance.

Do not forget to define DemoModalComponent in entryComponents.

Configuration

Available options:

  • backdropClose (default: true) - indicating if clicking the backdrop should close the modal.
  • escClose (default: true) - indicating if pressing the esc key should close the modal.
  • scrollLock (default: true) - indicating if scroll of body is disabled while modal is displayed.

Modal options can be passed by DI provider, KitModelService.show() method or with kit-modal params.

this.modalService.show({component: DemoModalComponent, options: {backdropClose: false}});
Default config

If you want to redefine default options with DI you should define all options:

providers: [
  {
    provide: KitModalOptions,
    useValue: {
      backdropClose: true,
      escClose: true,
      scrollLock: true,
    },
  },
],

Data-binding

For service-hosted modals we have methods for communication with component instance.

input
export class DemoModalComponent {
  @Input() field: string;
}
this.modalRef = this.modalService.show({component: DemoModalComponent});
this.modalRef.input({field: 'value'});

input method passes value to the defined field and calls ngOnChanges life-cycle hook (if needed).

output
export class DemoModalComponent {
  @Output() event = new EventEmitter<any>();
}
this.modalRef = this.modalService.show({component: DemoModalComponent});
this.modalRef.instance.event.subscribe((value: any) => {
});

As you can see DemoModalComponent can be used both in the service-hosted and in the template-hosted approach.

<kit-modal>
  <demo-modal *kitOverlay="display"
              [field]=""
              (event)="">
  </demo-modal>
</kit-modal>

Guards

canClose

Handy for service-hosted modals when you don't have full control of closing process.

If canClose method returns false modal will not be destroyed.

export class DemoModalComponent implements KitModalCanClose {
  canClose(): boolean {
  }
}

Modal components in Lazy Modules

You could get error No component factory found for NameOfModalComponent inside Lazy Modules. To solve the problem just provide KitModelService in this module.

Example

Members

SignatureDescription
show({ component, options, componentFactoryResolver, viewContainerRef, }: KitModalShowArgs<T>): KitModalRef<T>

Display component as modal in the overlay.

[class] KitModalComponent

@Component

Selector:'kit-modal'

When modal hosted in template KitModalRef.close() just emit (close) event on the kit-modal component. Display state should be controlled by *kitOverlay directive:

<button (click)="display = true">Show modal</button>
<kit-modal (close)="display = false">
  <demo-modal *kitOverlay="display"></demo-modal>
</kit-modal>

Members

SignatureDescription
@Output() close = new EventEmitter<void>()

Emits when modal should be closed.

@Input() set backdropClose(backdropClose: boolean)

Indicating if clicking the backdrop should close the modal.

@Input() set escClose(escClose: boolean)

Indicating if pressing the esc key should close the modal.

@Input() set scrollLock(scrollLock: boolean)

Indicating if scroll of body is disabled while modal is displayed.

[class] KitModalOptions

@Injectable

Provided in:'root'

Members

SignatureDescription
backdropClose = true
escClose = true
scrollLock = true

[interface] KitModalShowArgs

Members

SignatureDescription
component(): Type<T>
options(): Partial<KitModalOptions>
componentFactoryResolver(): ComponentFactoryResolver
viewContainerRef(): ViewContainerRef

[interface] KitModalCanClose

Members

SignatureDescription
canClose(): boolean