Adding Custom Header component implementation

demo/src/app/app.component.ts

@@ -1,8 +1,8 @@
 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';
+import {ModalDialogHeaderType, ModalDialogService, SimpleModalComponent} from 'ngx-modal-dialog';
 
 @Component({
   selector: 'app-root',
@@ -96,13 +96,17 @@ export class AppComponent {
 
   openCustomHeaderModal() {
     this.modalDialogService.openDialog(this.viewContainer, {
-      title: 'Custom child component',
       headerComponent: CustomHeaderModalComponent,
-      childComponent: CustomModalComponent,
+      childComponent: SimpleModalComponent,
       settings: {
-        closeButtonClass: 'close theme-icon-close'
+        closeButtonClass: 'close theme-icon-close',
+        headerType: ModalDialogHeaderType.CUSTOM
       },
-      data: 'Yahima Duarte <[email protected]>'
+      data: {
+        title: 'Yahima Duarte <[email protected]>',
+        text: `Lorem ipsum is placeholder text commonly used in the graphic, print,
+        and publishing industries for previewing layouts and visual mockups.`
+      }
     });
   }
 

demo/src/app/app.module.ts

@@ -1,9 +1,9 @@
 import {BrowserModule} from '@angular/platform-browser';
 import {NgModule} from '@angular/core';
+import { ModalDialogModule } from 'ngx-modal-dialog';
 
 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';
 

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

@@ -1,17 +1,17 @@
 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: `
-    <p>This component is a custom header.</p>
-    <p>Written By: <b>{{data}}</b></p>
+    <h4>This component is a custom header</h4>
+    <p>Written By: <b>{{title}}</b></p>
   `
 })
 export class CustomHeaderModalComponent implements IModalHeaderDialog {
-  data: string;
+  title: string;
 
   setData(data: any) {
-    this.data = data;
+    this.title = data['title'];
   }
 }

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

@@ -1,5 +1,5 @@
-import { IModalDialog, IModalDialogOptions } from 'ngx-modal-dialog';
 import { Component, ComponentRef } from '@angular/core';
+import {IModalDialog, IModalDialogOptions} from 'ngx-modal-dialog';
 
 @Component({
   selector: 'app-custom-modal',

demo/src/app/dialogs/dynamic-modal.component.ts

@@ -1,5 +1,5 @@
-import { IModalDialog, IModalDialogOptions } from 'ngx-modal-dialog';
 import { Component, ComponentRef } from '@angular/core';
+import {IModalDialog, IModalDialogOptions} from 'ngx-modal-dialog';
 
 @Component({
   selector: 'app-dynamic-modal',

src/modal-dialog.ad-header.directive.ts

@@ -0,0 +1,8 @@
+import { Directive, ViewContainerRef } from '@angular/core';
+
+@Directive({
+  selector: '[ad-header]',
+})
+export class AdHeaderDirective {
+  constructor(public viewContainerRef: ViewContainerRef) { }
+}

src/modal-dialog.component.ts

@@ -1,21 +1,25 @@
 import {
-  Component,
-  ComponentRef,
-  ComponentFactoryResolver,
-  ViewContainerRef,
-  ViewChild,
-  OnDestroy, OnInit,
-  HostListener, ElementRef
+    Component,
+    ComponentFactoryResolver,
+    ComponentRef,
+    ElementRef,
+    HostListener,
+    OnDestroy,
+    OnInit,
+    ViewChild,
+    ViewContainerRef
 } from '@angular/core';
 import {
-  IModalDialog,
-  IModalDialogOptions,
-  IModalDialogButton,
-  IModalDialogSettings, ModalDialogOnAction,
-  IModalHeaderDialog
+    IModalDialog,
+    IModalDialogButton,
+    IModalDialogOptions,
+    IModalDialogSettings,
+    IModalHeaderDialog,
+    ModalDialogOnAction
 } from './modal-dialog.interface';
-import { Observable, Subject, from } from 'rxjs';
-import { AdHeaderDirective } from './modal-dialog.ad-header.directive';
+import {from, Observable, Subject} from 'rxjs';
+import {AdHeaderDirective} from './modal-dialog.ad-header.directive';
+import {ModalDialogHeaderType} from './modal-dialog.header-type';
 
 /**
  * Modal dialog component
@@ -57,9 +61,6 @@ import { AdHeaderDirective } from './modal-dialog.ad-header.directive';
         -moz-animation-name: shake;
         animation-name: shake;
       }
-      .modal-title {
-        display: inline-flex;
-      }
   `],
   template: `
     <div *ngIf="settings.overlayClass && showOverlay" [ngClass]="[settings.overlayClass, animateOverlayClass]"></div> 
@@ -69,7 +70,7 @@ import { AdHeaderDirective } from './modal-dialog.ad-header.directive';
           <div [ngClass]="settings.headerClass">
             <div [ngClass]="settings.headerTitleClass">
               <ng-template ad-header></ng-template>
-              <h4 *ngIf="title">{{title}}</h4>
+              <h4 *ngIf="settings.headerType === 1">{{title}}</h4>
             </div>
             <button (click)="close()" *ngIf="!actionButtons || !actionButtons.length" type="button"
                     [title]="settings.closeButtonTitle"
@@ -112,7 +113,8 @@ export class ModalDialogComponent implements IModalDialog, OnDestroy, OnInit {
     alertClass: 'ngx-modal-shake',
     alertDuration: 250,
     notifyWithAlert: true,
-    buttonClass: 'btn btn-primary'
+    buttonClass: 'btn btn-primary',
+    headerType: ModalDialogHeaderType.TITLE
   };
   public actionButtons: IModalDialogButton[];
   public title: string;
@@ -172,17 +174,17 @@ export class ModalDialogComponent implements IModalDialog, OnDestroy, OnInit {
         (document.activeElement as HTMLElement).blur() :
         (document.body as HTMLElement).blur();
     }
-    if (options.headerComponent) {
+    // set options
+    this._setOptions(options);
+
+    if (this.settings.headerType === ModalDialogHeaderType.CUSTOM && 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);
   }
 
   ngOnInit() {

src/modal-dialog.header-type.ts

@@ -0,0 +1,3 @@
+export enum ModalDialogHeaderType {
+  TITLE = 1, CUSTOM = 2
+}

src/modal-dialog.interface.ts

@@ -1,5 +1,6 @@
-import { ComponentRef } from '@angular/core';
-import { Observable, Subject } from 'rxjs';
+import {ComponentRef} from '@angular/core';
+import {Observable, Subject} from 'rxjs';
+import {ModalDialogHeaderType} from './modal-dialog.header-type';
 
 export interface IModalDialog {
   dialogInit: (reference: ComponentRef<IModalDialog>, options: Partial<IModalDialogOptions<any>>) => void;
@@ -47,4 +48,5 @@ export interface IModalDialogSettings {
   alertDuration: number;
   buttonClass: string;
   notifyWithAlert: boolean;
+  headerType: ModalDialogHeaderType;
 }