Adding Custom Header component implementation

README.md

@@ -96,6 +96,45 @@ 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
+1. Create a custom header component that implements `IModalHeaderDialog`.
+
+```ts
+import {Component} from '@angular/core';
+import {IModalHeaderDialog} from '../../../../src/modal-dialog.interface';
+
+@Component({
+  selector: 'app-custom-header-modal',
+  template: `
+    <p>This component is a custom header.</p>
+    <p><strong>Written By: </strong><b>{{data}}</b></p>
+  `
+})
+export class CustomHeaderModalComponent implements IModalHeaderDialog {
+  data: string;
+
+  setData(data: any) {
+    this.data = data;
+  }
+}
+```
+
+2. Inject the `ModalDialogService` where you want to open the dialog passing the headerComponent as a new parameter instead of the title attribute:
+```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 <[email protected]>'
+  });
+}
+```
+
 ## API
 
 ### ModalDialogService
@@ -122,6 +161,7 @@ Modal heading text
 ```ts
 interface IModalDialogOptions<T> {
   title: string;
+  headerComponent: IModalHeaderDialog;
   childComponent: IModalDialog;
   onClose: ModalDialogOnAction;
   actionButtons: IModalDialogButton[];
@@ -136,6 +176,9 @@ This is generic interface, where `T` is arbitrary type of `data` section.
 - title: `string`  
 Modal heading text
 
+- headerComponent: `any`
+Component type that will be rendered as a header of modal dialog. Component must implement `IModalHeaderDialog` interface.
+
 - childComponent: `any`  
 Component type that will be rendered as a content of modal dialog. Component must implement `IModalDialog` interface.
 

demo/package.json

@@ -43,7 +43,7 @@
     "karma-coverage-istanbul-reporter": "~2.0.0",
     "karma-jasmine": "~1.1.1",
     "karma-jasmine-html-reporter": "^0.2.2",
-    "protractor": "~5.3.0",
+    "protractor": "^5.4.0",
     "ts-node": "~5.0.1",
     "tslint": "~5.9.1",
     "typescript": "~2.7.2"

demo/src/app/app.component.html

@@ -27,6 +27,11 @@
         <button class="btn btn-success" type="button" (click)="openCustomModal()">Dialog with custom child component</button>
       </div>
     </div>
+    <div class="row mb-2">
+      <div class="col">
+        <button class="btn btn-success" type="button" (click)="openCustomHeaderModal()">Dialog with custom header component</button>
+      </div>
+    </div>
     <div class="row mb-2">
       <div class="col">
         <button class="btn btn-danger" type="button" (click)="openMultipleModal()">Multiple modal dialogs on top of each other</button>

demo/src/app/app.component.ts

@@ -1,14 +1,16 @@
-import { Component, ViewContainerRef } from '@angular/core';
-import { ModalDialogService, SimpleModalComponent } from 'ngx-modal-dialog';
-import { CustomModalComponent } from './dialogs/custom-modal.component';
-import { DynamicModalComponent } from './dialogs/dynamic-modal.component';
+import {Component, ViewContainerRef} from '@angular/core';
+import {ModalDialogService, SimpleModalComponent} from 'ngx-modal-dialog';
+import {CustomModalComponent} from './dialogs/custom-modal.component';
+import {DynamicModalComponent} from './dialogs/dynamic-modal.component';
+import {CustomHeaderModalComponent} from './dialogs/custom-header-modal.component';
 
 @Component({
   selector: 'app-root',
   templateUrl: './app.component.html'
 })
 export class AppComponent {
-  constructor(private modalDialogService: ModalDialogService, private viewContainer: ViewContainerRef) {}
+  constructor(private modalDialogService: ModalDialogService, private viewContainer: ViewContainerRef) {
+  }
 
   openSimpleModal() {
     this.modalDialogService.openDialog(this.viewContainer, {
@@ -92,6 +94,18 @@ export class AppComponent {
     });
   }
 
+  openCustomHeaderModal() {
+    this.modalDialogService.openDialog(this.viewContainer, {
+      title: 'Custom child component',
+      headerComponent: CustomHeaderModalComponent,
+      childComponent: CustomModalComponent,
+      settings: {
+        closeButtonClass: 'close theme-icon-close'
+      },
+      data: 'Yahima Duarte <[email protected]>'
+    });
+  }
+
   openDynamicModal() {
     this.modalDialogService.openDialog(this.viewContainer, {
       title: 'Dynamic child component',
@@ -106,30 +120,34 @@ export class AppComponent {
     this.modalDialogService.openDialog(this.viewContainer, {
       title: 'Dialog 1',
       childComponent: SimpleModalComponent,
-      settings: { closeButtonClass: 'close theme-icon-close' },
+      settings: {closeButtonClass: 'close theme-icon-close'},
       placeOnTop: true,
-      data: { text: `
+      data: {
+        text: `
         Lorem ipsum dolor sit amet, consectetur adipiscing elit,
         sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
         Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
         Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
-        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.` }
+        Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.`
+      }
     });
     this.modalDialogService.openDialog(this.viewContainer, {
       title: 'Dialog 2',
       childComponent: SimpleModalComponent,
-      settings: { closeButtonClass: 'close theme-icon-close' },
+      settings: {closeButtonClass: 'close theme-icon-close'},
       placeOnTop: true,
-      data: { text: `
+      data: {
+        text: `
         Lorem ipsum is placeholder text commonly used in the graphic, print,
-        and publishing industries for previewing layouts and visual mockups.` }
+        and publishing industries for previewing layouts and visual mockups.`
+      }
     });
     this.modalDialogService.openDialog(this.viewContainer, {
       title: 'Dialog 3',
       childComponent: SimpleModalComponent,
-      settings: { closeButtonClass: 'close theme-icon-close' },
+      settings: {closeButtonClass: 'close theme-icon-close'},
       placeOnTop: true,
-      data: { text: 'Some text content' }
+      data: {text: 'Some text content'}
     });
   }
 }

demo/src/app/app.module.ts

@@ -1,18 +1,20 @@
-import { BrowserModule } from '@angular/platform-browser';
-import { NgModule } from '@angular/core';
+import {BrowserModule} from '@angular/platform-browser';
+import {NgModule} from '@angular/core';
 
-import { AppComponent } from './app.component';
-import { CustomModalComponent } from './dialogs/custom-modal.component';
-import { ModalDialogModule } from 'ngx-modal-dialog';
-import { DynamicModalComponent } from './dialogs/dynamic-modal.component';
+import {AppComponent} from './app.component';
+import {CustomModalComponent} from './dialogs/custom-modal.component';
+import {ModalDialogModule} from 'ngx-modal-dialog';
+import {DynamicModalComponent} from './dialogs/dynamic-modal.component';
+import {CustomHeaderModalComponent} from './dialogs/custom-header-modal.component';
 
 @NgModule({
-  declarations: [AppComponent, CustomModalComponent, DynamicModalComponent],
+  declarations: [AppComponent, CustomModalComponent, DynamicModalComponent, CustomHeaderModalComponent],
   imports: [
     BrowserModule,
     ModalDialogModule.forRoot()
   ],
-  entryComponents: [CustomModalComponent, DynamicModalComponent],
+  entryComponents: [CustomModalComponent, DynamicModalComponent, CustomHeaderModalComponent],
   bootstrap: [AppComponent]
 })
-export class AppModule { }
+export class AppModule {
+}

demo/src/app/dialogs/custom-header-modal.component.ts

@@ -0,0 +1,17 @@
+import {Component} from '@angular/core';
+import {IModalHeaderDialog} from '../../../../src/modal-dialog.interface';
+
+@Component({
+  selector: 'app-custom-header-modal',
+  template: `
+    <p>This component is a custom header.</p>
+    <p>Written By: <b>{{data}}</b></p>
+  `
+})
+export class CustomHeaderModalComponent implements IModalHeaderDialog {
+  data: string;
+
+  setData(data: any) {
+    this.data = data;
+  }
+}

src/modal-dialog.component.ts

@@ -11,9 +11,11 @@ import {
   IModalDialog,
   IModalDialogOptions,
   IModalDialogButton,
-  IModalDialogSettings, ModalDialogOnAction
+  IModalDialogSettings, ModalDialogOnAction,
+  IModalHeaderDialog
 } from './modal-dialog.interface';
 import { Observable, Subject, from } from 'rxjs';
+import { AdHeaderDirective } from './modal-dialog.ad-header.directive';
 
 /**
  * Modal dialog component
@@ -55,14 +57,20 @@ import { Observable, Subject, from } from 'rxjs';
         -moz-animation-name: shake;
         animation-name: shake;
       }
+      .modal-title {
+        display: inline-flex;
+      }
   `],
   template: `
     <div *ngIf="settings.overlayClass && showOverlay" [ngClass]="[settings.overlayClass, animateOverlayClass]"></div> 
     <div [ngClass]="[settings.modalClass, animateModalClass]" #dialog>
       <div [ngClass]="settings.modalDialogClass">
         <div [ngClass]="[ showAlert ? settings.alertClass : '', settings.contentClass]">
           <div [ngClass]="settings.headerClass">
-            <h4 [ngClass]="settings.headerTitleClass">{{title}}</h4>
+            <div [ngClass]="settings.headerTitleClass">
+              <ng-template ad-header></ng-template>
+              <h4 *ngIf="title">{{title}}</h4>
+            </div>
             <button (click)="close()" *ngIf="!actionButtons || !actionButtons.length" type="button"
                     [title]="settings.closeButtonTitle"
                     [ngClass]="settings.closeButtonClass">
@@ -83,6 +91,7 @@ import { Observable, Subject, from } from 'rxjs';
 })
 export class ModalDialogComponent implements IModalDialog, OnDestroy, OnInit {
   @ViewChild('modalDialogBody', { read: ViewContainerRef }) public dynamicComponentTarget: ViewContainerRef;
+  @ViewChild(AdHeaderDirective) adHeader: AdHeaderDirective;
   @ViewChild('dialog') private dialogElement: ElementRef;
   public reference: ComponentRef<IModalDialog>;
 
@@ -147,8 +156,8 @@ export class ModalDialogComponent implements IModalDialog, OnDestroy, OnInit {
 
     // inject component
     if (options.childComponent) {
-      let factory = this.componentFactoryResolver.resolveComponentFactory(options.childComponent);
-      let componentRef = this.dynamicComponentTarget.createComponent(factory) as ComponentRef<IModalDialog>;
+      const factory = this.componentFactoryResolver.resolveComponentFactory(options.childComponent);
+      const componentRef = this.dynamicComponentTarget.createComponent(factory) as ComponentRef<IModalDialog>;
       this._childInstance = componentRef.instance as IModalDialog;
 
       this._closeDialog$ = new Subject<void>();
@@ -163,6 +172,15 @@ export class ModalDialogComponent implements IModalDialog, OnDestroy, OnInit {
         (document.activeElement as HTMLElement).blur() :
         (document.body as HTMLElement).blur();
     }
+    if (options.headerComponent) {
+      const factory = this.componentFactoryResolver.resolveComponentFactory(options.headerComponent);
+
+      const viewContainerRef = this.adHeader.viewContainerRef;
+      viewContainerRef.clear();
+      const componentRef = viewContainerRef.createComponent(factory);
+      (<IModalHeaderDialog>componentRef.instance).setData(options.data);
+    }
+
     // set options
     this._setOptions(options);
   }

src/modal-dialog.interface.ts

@@ -5,8 +5,13 @@ export interface IModalDialog {
   dialogInit: (reference: ComponentRef<IModalDialog>, options: Partial<IModalDialogOptions<any>>) => void;
 }
 
+export interface IModalHeaderDialog {
+  setData(data: any): void;
+}
+
 export interface IModalDialogOptions<T> {
   title: string;
+  headerComponent: any;
   childComponent: any;
   onClose: () => Promise<any> | Observable<any> | boolean;
   actionButtons: IModalDialogButton[];

src/modal-dialog.module.ts

@@ -6,6 +6,7 @@ import { ModalDialogInstanceService } from './modal-dialog-instance.service';
 // modules
 import { CommonModule } from '@angular/common';
 import { NgModule, ModuleWithProviders, InjectionToken, SkipSelf, Optional } from '@angular/core';
+import { AdHeaderDirective } from './modal-dialog.ad-header.directive';
 
 /**
  * Guard to make sure we have single initialization of forRoot
@@ -15,7 +16,7 @@ export const MODAL_DIALOG_FORROOT_GUARD = new InjectionToken<ModalDialogModule>(
 
 @NgModule({
   imports: [CommonModule],
-  declarations: [ModalDialogComponent, SimpleModalComponent],
+  declarations: [ModalDialogComponent, SimpleModalComponent, AdHeaderDirective],
   entryComponents: [ModalDialogComponent, SimpleModalComponent],
   exports: [ModalDialogComponent, SimpleModalComponent],
   providers: [ModalDialogService]

src/simple-modal.component.ts

@@ -1,4 +1,4 @@
-import { Component, ComponentRef } from '@angular/core';
+import { Component, ComponentRef, HostBinding } from '@angular/core';
 import { IModalDialog, IModalDialogOptions } from './modal-dialog.interface';
 
 export interface ISimpleModalDataOptions {
@@ -8,13 +8,10 @@ export interface ISimpleModalDataOptions {
 @Component({
   selector: 'simple-modal-dialog',
   template: ``,
-  styles: [':host { display: block; }'],
-  host: {
-    '[innerHTML]': 'text'
-  }
+  styles: [':host { display: block; }']
 })
 export class SimpleModalComponent implements IModalDialog {
-  text: string;
+    @HostBinding('innerHTML') text: string;
 
   /**
    * Initialize dialog with simple HTML content