diff --git a/README.md b/README.md index e6db090..e4f5038 100644 --- a/README.md +++ b/README.md @@ -96,42 +96,47 @@ Action button can be of two types: - without return value Has no direct effect on dialog. Can be used to trigger some arbitrary functionality (e.g. copy values to clipboard) -Custom Header +### Custom Header 1. Create a custom header component that implements `IModalHeaderDialog`. ```ts import {Component} from '@angular/core'; -import {IModalHeaderDialog} from '../../../../src/modal-dialog.interface'; +import {IModalHeaderDialog} from 'ngx-modal-dialog'; @Component({ selector: 'app-custom-header-modal', template: ` -
This component is a custom header.
-Written By: {{data}}
+Written By: {{title}}
` }) export class CustomHeaderModalComponent implements IModalHeaderDialog { - data: string; + title: string; setData(data: any) { - this.data = data; + this.title = data['title']; } } ``` -2. Inject the `ModalDialogService` where you want to open the dialog passing the headerComponent as a new parameter instead of the title attribute: +2. Inject the `ModalDialogService` where you want to open the dialog passing the headerComponent as a new option parameter instead of the title attribute and change the value of the new parameter headerType to CUSTOM: ```ts constructor(modalService: ModalDialogService, viewRef: ViewContainerRef) { } -openNewDialog() { - this.modalDialogService.openDialog(this.viewContainer, { - headerComponent: CustomHeaderModalComponent, - childComponent: CustomModalComponent, - settings: { - closeButtonClass: 'close theme-icon-close' - }, - data: 'Yahima Duarte