Fixed #507

primefaces · Jun 22, 2016 · efd402a · efd402a
1 parent 7134019
commit efd402a
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 5 deletions.
diff --git a/components/dialog/dialog.ts b/components/dialog/dialog.ts
@@ -1,5 +1,6 @@
-import {Component,ElementRef,AfterViewInit,AfterViewChecked,OnDestroy,Input,Output,EventEmitter,Renderer} from '@angular/core';
+import {Component,ElementRef,AfterViewInit,AfterViewChecked,OnDestroy,Input,Output,EventEmitter,Renderer,ContentChild} from '@angular/core';
 import {DomHandler} from '../dom/domhandler';
+import {Header} from '../common';
 
 @Component({
     selector: 'p-dialog',
@@ -8,7 +9,10 @@ import {DomHandler} from '../dom/domhandler';
             [style.display]="visible ? 'block' : 'none'" [style.width.px]="width" [style.height.px]="height" (mousedown)="moveOnTop()">
             <div class="ui-dialog-titlebar ui-widget-header ui-helper-clearfix ui-corner-top"
                 (mousedown)="initDrag($event)" (mouseup)="endDrag($event)">
-                <span class="ui-dialog-title">{{header}}</span>
+                <span class="ui-dialog-title" *ngIf="header">{{header}}</span>
+                <span class="ui-dialog-title" *ngIf="headerFacet">
+                    <ng-content select="header"></ng-content>
+                </span>
                 <a [ngClass]="{'ui-dialog-titlebar-icon ui-dialog-titlebar-close ui-corner-all':true,'ui-state-hover':hoverCloseIcon}" href="#" role="button" *ngIf="closable" 
                     (click)="hide($event)" (mouseenter)="hoverCloseIcon=true" (mouseleave)="hoverCloseIcon=false">
                     <span class="fa fa-fw fa-close"></span>
@@ -22,6 +26,7 @@ import {DomHandler} from '../dom/domhandler';
                 (mousedown)="initResize($event)"></div>
         </div>
     `,
+    directives: [Header],
     providers: [DomHandler]
 })
 export class Dialog implements AfterViewInit,AfterViewChecked,OnDestroy {
@@ -53,6 +58,8 @@ export class Dialog implements AfterViewInit,AfterViewChecked,OnDestroy {
     @Input() closable: boolean = true;
 
     @Input() responsive: boolean;
+
+    @ContentChild(Header) headerFacet;
 
     @Output() onBeforeShow: EventEmitter<any> = new EventEmitter();
 

diff --git a/showcase/demo/dialog/dialogdemo.html b/showcase/demo/dialog/dialogdemo.html
@@ -63,11 +63,15 @@ <h3>Getting Started</h3>
             <p>By default dialog is hidden and enabling the visible property displays the dialog. As visible supports
             two-way binding, hiding the dialog with close button updates the visible state as false.</p>
 
-            <h3>Footer</h3>
-            <p>Footer area is defined using the footer element.</p>
+            <h3>Header and Footer</h3>
+            <p>Header and Footer sections are useful to include custom content. Note that Header and Footer components should be imported and defined
+            at directives section of your component for this to work.</p>
 <pre>
 <code class="language-markup" pCode>
-&lt;p-dialog header="Title" [(visible)]="display"&gt;
+&lt;p-dialog [(visible)]="display"&gt;
+    &lt;header&gt;
+        Header content here
+    &lt;/header&gt;
     Content
     &lt;footer&gt;
         Footer content here