diff --git a/src/app/showcase/components/calendar/calendardemo.html b/src/app/showcase/components/calendar/calendardemo.html
index ea967435261..38a411f0d78 100755
--- a/src/app/showcase/components/calendar/calendardemo.html
+++ b/src/app/showcase/components/calendar/calendardemo.html
@@ -200,11 +200,11 @@ Multiple Months
Custom Content
- Calendar UI accepts custom content using p-header and p-footer components.
+ Calendar UI accepts custom content using header and footer templates.
<p-calendar [(ngModel)]="dateValue">
- <p-header>Header</p-header>
- <p-footer>Footer</p-footer>
+ <ng-template pTemplate="header">Header</ng-template>
+ <ng-template pTemplate="footer">Footer</ng-template>
</p-calendar>
diff --git a/src/app/showcase/components/card/carddemo.html b/src/app/showcase/components/card/carddemo.html
index 22bd6b108c7..c3f57b67899 100755
--- a/src/app/showcase/components/card/carddemo.html
+++ b/src/app/showcase/components/card/carddemo.html
@@ -48,16 +48,16 @@ Header
Header and Footer Content
- Header and Footers sections can be customized using p-header and p-footer components.
+ Header and Footers sections can be customized using header and footer templates.
<p-card>
- <p-header>
+ <ng-template pTemplate="header">
Header content here
- </p-header>
+ </ng-template>
Body Content
- <p-footer>
+ <ng-template pTemplate="footer">
Footer content here
- </p-footer>
+ </ng-template>
</p-card>
@@ -158,9 +158,9 @@ Dependencies
</p-card>
<p-card header="Advanced Card" subheader="Card Subheader" [style]="{width: '360px'}" styleClass="p-card-shadow">
- <p-header>
+ <ng-template pTemplate="header">
<img alt="Card" src="assets/showcase/images/usercard.png">
- </p-header>
+ </ng-template>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt
quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>
<ng-template pTemplate="footer">
diff --git a/src/app/showcase/components/carousel/carouseldemo.html b/src/app/showcase/components/carousel/carouseldemo.html
index 71715cc3591..445cbf5335a 100755
--- a/src/app/showcase/components/carousel/carouseldemo.html
+++ b/src/app/showcase/components/carousel/carouseldemo.html
@@ -154,12 +154,12 @@ Responsive
Header and Footer
- Custom content projection is available using the p-header and p-footer components.
+ Custom content projection is available using the header and footer templates.
<p-carousel [value]="cars">
- <p-header>
+ <ng-template pTemplate="header">
<h5>Vertical</h5>
- </p-header>
+ </ng-template>
<ng-template let-car pTemplate="item">
Content to display
</ng-template>
@@ -180,9 +180,9 @@ AutoPlay and Circular
When autoplayInterval is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling circular property needs to be enabled. Note that in autoplay mode, circular is enabled by default.
<p-carousel [value]="cars" [autoplayInterval]="3000" [circular]="true">
- <p-header>
+ <ng-template pTemplate="header">
<h5>Vertical</h5>
- </p-header>
+ </ng-template>
<ng-template let-car pTemplate="item">
Content to display
</ng-template>
diff --git a/src/app/showcase/components/dataview/dataviewdemo.html b/src/app/showcase/components/dataview/dataviewdemo.html
index 44d16213cfe..c3920efea01 100755
--- a/src/app/showcase/components/dataview/dataviewdemo.html
+++ b/src/app/showcase/components/dataview/dataviewdemo.html
@@ -152,12 +152,11 @@ Layouts
Sections
- Header and Footer are the two sections that are capable of displaying custom content.
+ Header and Footers sections can be customized using header and footer templates.
<p-dataView [value]="cars">
- <p-header>List of Cars</p-header>
- <p-footer>Choose from the list.</p-footer>
+ <ng-template pTemplate="header">List of Cars</ng-template>
<ng-template let-car pTemplate="listItem">
<div>
{{car.id}}
@@ -168,6 +167,7 @@ Sections
{{car.year}}
</div>
</ng-template>
+ <ng-template pTemplate="footer">Choose from the list.</ng-template>
</p-dataView>
@@ -179,13 +179,9 @@ DataViewLayoutOptions
<p-dataView [value]="cars">
- <p-header>
+ <ng-template pTemplate="header">
<p-dataViewLayoutOptions></p-dataViewLayoutOptions>
- </p-header>
- <p-footer>
- <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
- </p-footer>
-
+ </ng-template>
<ng-template let-car pTemplate="listItem">
<div>
{{car.id}}
@@ -196,6 +192,9 @@ DataViewLayoutOptions
{{car.year}}
</div>
</ng-template>
+ <ng-template pTemplate="footer">
+ <p-dataViewLayoutOptions></p-dataViewLayoutOptions>
+ </ng-template>
</p-dataView>
@@ -264,10 +263,10 @@ Sorting
<p-dataView [value]="cars" [sortField]="sortField" [sortOrder]="sortOrder">
- <p-header>
+ <ng-template pTemplate="header">
<p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By"
(onChange)="onSortChange($event)" [style]="{'min-width':'15em'}"></p-dropdown>
- </p-header>
+ </ng-template>
<ng-template let-car pTemplate="listItem">
<div>
{{car.id}}
@@ -329,9 +328,9 @@ Filtering
<p-dataView #dv [value]="cars" filterBy="brand">
- <p-header>
+ <ng-template pTemplate="header">
<input type="search" pInputText placeholder="Search by brand" (input)="dv.filter($event.target.value, "contains")">
- </p-header>
+ </ng-template>
<ng-template let-car pTemplate="listItem">
{{car.id}}
</ng-template>
diff --git a/src/app/showcase/components/dialog/dialogdemo.html b/src/app/showcase/components/dialog/dialogdemo.html
index 77ce2066e5d..c16a013d4b0 100755
--- a/src/app/showcase/components/dialog/dialogdemo.html
+++ b/src/app/showcase/components/dialog/dialogdemo.html
@@ -159,13 +159,12 @@ Responsive
Header and Footer
- 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.
+ Header and Footers sections can be customized using header and footer templates.
<p-dialog [(visible)]="display">
- <p-header>
+ <ng-template pTemplate="header">
Header content here
- </p-header>
+ </ng-template>
Content
<p-footer>
//buttons
diff --git a/src/app/showcase/components/editor/editordemo.html b/src/app/showcase/components/editor/editordemo.html
index 311631130b0..85d3510ae32 100755
--- a/src/app/showcase/components/editor/editordemo.html
+++ b/src/app/showcase/components/editor/editordemo.html
@@ -56,7 +56,7 @@ Toolbar
Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to Quill documentation for available controls.
<p-editor [(ngModel)]="text2" [style]="{'height':'320px'}">
- <p-header>
+ <ng-template pTemplate="header">
<span class="ql-format-group">
<span title="Bold" class="ql-format-button ql-bold"></span>
<span class="ql-format-separator"></span>
@@ -66,7 +66,7 @@ Toolbar
<span class="ql-format-separator"></span>
<span title="Strikethrough" class="ql-format-button ql-strike"></span>
</span>
- </p-header>
+ </ng-template>
</p-editor>
diff --git a/src/app/showcase/components/fieldset/fieldsetdemo.html b/src/app/showcase/components/fieldset/fieldsetdemo.html
index 1f0cfaa9756..af62e3e3db2 100755
--- a/src/app/showcase/components/fieldset/fieldsetdemo.html
+++ b/src/app/showcase/components/fieldset/fieldsetdemo.html
@@ -50,10 +50,10 @@ Toggleable
Custom Legend
- Legend content can be customized with p-header component.
+ Header section can be customized using header template.
<p-fieldset>
- <p-header>Custom Legend Content</p-header>
+ <ng-template pTemplate="header">Custom Legend Content</ng-template>
Content
</p-fieldset>
diff --git a/src/app/showcase/components/panel/paneldemo.html b/src/app/showcase/components/panel/paneldemo.html
index 5abcda01e0a..9cba9a87c0c 100755
--- a/src/app/showcase/components/panel/paneldemo.html
+++ b/src/app/showcase/components/panel/paneldemo.html
@@ -57,16 +57,16 @@ Toggleable
Header and Footer Content
- Header and Footers sections can be customized using p-header and p-footer components.
+ Header and Footers sections can be customized using header and footer templates.
<p-panel >
- <p-header>
+ <ng-template pTemplate="header">
Header content here
- </p-header>
+ </ng-template>
Body Content
- <p-footer>
+ <ng-template pTemplate="footer">
Footer content here
- </p-footer>
+ </ng-template>
</p-panel>
diff --git a/src/app/showcase/components/virtualscroller/virtualscrollerdemo.html b/src/app/showcase/components/virtualscroller/virtualscrollerdemo.html
index 9fb14383786..8abc9e64a67 100755
--- a/src/app/showcase/components/virtualscroller/virtualscrollerdemo.html
+++ b/src/app/showcase/components/virtualscroller/virtualscrollerdemo.html
@@ -152,11 +152,11 @@ Sections
Header and Footer are the two sections that are capable of displaying custom content.
<p-virtualScroller [value]="cars" scrollHeight="500px" [itemSize]="150">
- <p-header>Header Content</p-header>
- <p-footer>Footer Content</p-footer>
+ <ng-template pTemplate="header">Header Content</ng-template>
<ng-template pTemplate="item" let-car>
- Car content
+ Car content
</ng-template>
+ <ng-template pTemplate="footer">Footer Content</ng-template>
</p-virtualScroller>