Fixed #9795 - Remove deprecated p-header and p-footer from demos

src/app/showcase/components/calendar/calendardemo.html

@@ -200,11 +200,11 @@ <h5>Multiple Months</h5>
 </app-code>
 
             <h5>Custom Content</h5>
-            <p>Calendar UI accepts custom content using p-header and p-footer components.</p>
+            <p>Calendar UI accepts custom content using header and footer templates.</p>
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-calendar [(ngModel)]="dateValue"&gt;
-    &lt;p-header&gt;Header&lt;/p-header&gt;
-    &lt;p-footer&gt;Footer&lt;/p-footer&gt;
+    &lt;ng-template pTemplate="header"&gt;Header&lt;/ng-template&gt;
+    &lt;ng-template pTemplate="footer"&gt;Footer&lt;/ng-template&gt;
 &lt;/p-calendar&gt;
 </app-code>
 

src/app/showcase/components/card/carddemo.html

@@ -48,16 +48,16 @@ <h5>Header</h5>
 </app-code>
 
             <h5>Header and Footer Content</h5>
-            <p>Header and Footers sections can be customized using <i>p-header</i> and <i>p-footer</i> components.</p>
+            <p>Header and Footers sections can be customized using <i>header</i> and <i>footer</i> templates.</p>
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-card&gt;
-    &lt;p-header&gt;
+    &lt;ng-template pTemplate="header"&gt;
         Header content here
-    &lt;/p-header&gt;
+    &lt;/ng-template&gt;
     Body Content
-    &lt;p-footer&gt;
+    &lt;ng-template pTemplate="footer"&gt;
         Footer content here
-    &lt;/p-footer&gt;
+    &lt;/ng-template&gt;
 &lt;/p-card&gt;
 </app-code>
 
@@ -158,9 +158,9 @@ <h5>Dependencies</h5>
 &lt;/p-card&gt;
 
 &lt;p-card header="Advanced Card" subheader="Card Subheader" [style]="&#123;width: '360px'&#125;" styleClass="p-card-shadow"&gt;
-    &lt;p-header&gt;
+    &lt;ng-template pTemplate="header"&gt;
         &lt;img alt="Card" src="assets/showcase/images/usercard.png"&gt;
-    &lt;/p-header&gt;
+    &lt;/ng-template&gt;
     &lt;p&gt;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!&lt;/p&gt;
     &lt;ng-template pTemplate="footer"&gt;

src/app/showcase/components/carousel/carouseldemo.html

@@ -154,12 +154,12 @@ <h5>Responsive</h5>
 </app-code>
 
             <h5>Header and Footer</h5>
-            <p>Custom content projection is available using the <i>p-header</i> and <i>p-footer</i> components.</p>
+            <p>Custom content projection is available using the <i>header</i> and <i>footer</i> templates.</p>
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-carousel [value]="cars"&gt;
-    &lt;p-header&gt;
+    &lt;ng-template pTemplate="header"&gt;
         &lt;h5&gt;Vertical&lt;/h5&gt;
-    &lt;/p-header&gt;
+    &lt;/ng-template&gt;
     &lt;ng-template let-car pTemplate="item"&gt;
         Content to display
     &lt;/ng-template&gt;
@@ -180,9 +180,9 @@ <h5>AutoPlay and Circular</h5>
             <p>When <i>autoplayInterval</i> is defined in milliseconds, items are scrolled automatically. In addition, for infinite scrolling <i>circular</i> property needs to be enabled. Note that in autoplay mode, circular is enabled by default.</p>
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-carousel [value]="cars" [autoplayInterval]="3000" [circular]="true"&gt;
-    &lt;p-header&gt;
+    &lt;ng-template pTemplate="header"&gt;
         &lt;h5&gt;Vertical&lt;/h5&gt;
-    &lt;/p-header&gt;
+    &lt;/ng-template&gt;
     &lt;ng-template let-car pTemplate="item"&gt;
         Content to display
     &lt;/ng-template&gt;

src/app/showcase/components/dataview/dataviewdemo.html

@@ -152,12 +152,11 @@ <h3>Layouts</h3>
 </app-code>
 
             <h3>Sections</h3>
-            <p>Header and Footer are the two sections that are capable of displaying custom content.</p>
+            <p>Header and Footers sections can be customized using <i>header</i> and <i>footer</i> templates.</p>
 
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-dataView [value]="cars"&gt;
-    &lt;p-header&gt;List of Cars&lt;/p-header&gt;
-    &lt;p-footer&gt;Choose from the list.&lt;/p-footer&gt;
+    &lt;ng-template pTemplate="header"&gt;List of Cars&lt;/ng-template&gt;
     &lt;ng-template let-car pTemplate="listItem"&gt;
         &lt;div&gt;
             &#123;&#123;car.id&#125;&#125;
@@ -168,6 +167,7 @@ <h3>Sections</h3>
             &#123;&#123;car.year&#125;&#125;
         &lt;/div&gt;
     &lt;/ng-template&gt;
+    &lt;ng-template pTemplate="footer"&gt;Choose from the list.&lt;/ng-template&gt;
 &lt;/p-dataView&gt;
 </app-code>
 
@@ -179,13 +179,9 @@ <h3>DataViewLayoutOptions</h3>
 
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-dataView [value]="cars"&gt;
-    &lt;p-header&gt;
+    &lt;ng-template pTemplate="header"&gt;
         &lt;p-dataViewLayoutOptions&gt;&lt;/p-dataViewLayoutOptions&gt;
-    &lt;/p-header&gt;
-    &lt;p-footer&gt;
-        &lt;p-dataViewLayoutOptions&gt;&lt;/p-dataViewLayoutOptions&gt;
-    &lt;/p-footer&gt;
-
+    &lt;/ng-template&gt;
     &lt;ng-template let-car pTemplate="listItem"&gt;
         &lt;div&gt;
             &#123;&#123;car.id&#125;&#125;
@@ -196,6 +192,9 @@ <h3>DataViewLayoutOptions</h3>
             &#123;&#123;car.year&#125;&#125;
         &lt;/div&gt;
     &lt;/ng-template&gt;
+    &lt;ng-template pTemplate="footer"&gt;
+        &lt;p-dataViewLayoutOptions&gt;&lt;/p-dataViewLayoutOptions&gt;
+    &lt;/ng-template&gt;
 &lt;/p-dataView&gt;
 </app-code>
 
@@ -264,10 +263,10 @@ <h3>Sorting</h3>
 
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-dataView [value]="cars" [sortField]="sortField" [sortOrder]="sortOrder"&gt;
-    &lt;p-header&gt;
+    &lt;ng-template pTemplate="header"&gt;
         &lt;p-dropdown [options]="sortOptions" [(ngModel)]="sortKey" placeholder="Sort By"
             (onChange)="onSortChange($event)" [style]="&#123;'min-width':'15em'&#125;"&gt;&lt;/p-dropdown&gt;
-    &lt;/p-header&gt;
+    &lt;/ng-template&gt;
     &lt;ng-template let-car pTemplate="listItem"&gt;
         &lt;div&gt;
             &#123;&#123;car.id&#125;&#125;
@@ -329,9 +328,9 @@ <h3>Filtering</h3>
 
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-dataView #dv [value]="cars" filterBy="brand"&gt;
-    &lt;p-header&gt;
+    &lt;ng-template pTemplate="header"&gt;
         &lt;input type="search" pInputText placeholder="Search by brand" (input)="dv.filter($event.target.value, "contains")"&gt;
-    &lt;/p-header&gt;
+    &lt;/ng-template&gt;
     &lt;ng-template let-car pTemplate="listItem"&gt;
         &#123;&#123;car.id&#125;&#125;
     &lt;/ng-template&gt;

src/app/showcase/components/dialog/dialogdemo.html

@@ -159,13 +159,12 @@ <h5>Responsive</h5>
 </app-code>
 
             <h5>Header and Footer</h5>
-            <p>Header and Footer sections are useful to include custom content. Note that <i>Header</i> and <i>Footer</i> components should be imported and defined
-            at directives section of your component for this to work.</p>
+            <p>Header and Footers sections can be customized using <i>header</i> and <i>footer</i> templates.</p>
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-dialog [(visible)]="display"&gt;
-    &lt;p-header&gt;
+    &lt;ng-template pTemplate="header"&gt;
         Header content here
-    &lt;/p-header&gt;
+    &lt;/ng-template&gt;
     Content
     &lt;p-footer&gt;
         //buttons

src/app/showcase/components/editor/editordemo.html

@@ -56,7 +56,7 @@ <h5>Toolbar</h5>
             <p>Editor provides a default toolbar with common options, to customize it define your elements inside the header element. Refer to <a href="http://quilljs.com/docs/modules/toolbar/">Quill documentation</a> for available controls.</p>
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-editor [(ngModel)]="text2" [style]="&#123;'height':'320px'&#125;"&gt;
-    &lt;p-header&gt;
+    &lt;ng-template pTemplate="header"&gt;
         &lt;span class="ql-format-group"&gt;
             &lt;span title="Bold" class="ql-format-button ql-bold"&gt;&lt;/span&gt;
             &lt;span class="ql-format-separator"&gt;&lt;/span&gt;
@@ -66,7 +66,7 @@ <h5>Toolbar</h5>
             &lt;span class="ql-format-separator"&gt;&lt;/span&gt;
             &lt;span title="Strikethrough" class="ql-format-button ql-strike"&gt;&lt;/span&gt;
         &lt;/span&gt;
-    &lt;/p-header&gt;
+    &lt;/ng-template&gt;
 &lt;/p-editor&gt;
 </app-code>
 

src/app/showcase/components/fieldset/fieldsetdemo.html

@@ -50,10 +50,10 @@ <h5>Toggleable</h5>
 </app-code>
 
             <h5>Custom Legend</h5>
-            <p>Legend content can be customized with <i>p-header</i> component.</p>
+            <p>Header  section can be customized using <i>header</i> template.</p>
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-fieldset&gt;
-    &lt;p-header&gt;Custom Legend Content&lt;/p-header&gt;
+    &lt;ng-template pTemplate="header"&gt;Custom Legend Content&lt;/ng-template&gt;
     Content
 &lt;/p-fieldset&gt;
 </app-code>

src/app/showcase/components/panel/paneldemo.html

@@ -57,16 +57,16 @@ <h5>Toggleable</h5>
 </app-code>
 
             <h5>Header and Footer Content</h5>
-            <p>Header and Footers sections can be customized using <i>p-header</i> and <i>p-footer</i> components.</p>
+            <p>Header and Footers sections can be customized using <i>header</i> and <i>footer</i> templates.</p>
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-panel &gt;
-    &lt;p-header&gt;
+    &lt;ng-template pTemplate="header"&gt;
         Header content here
-    &lt;/p-header&gt;
+    &lt;/ng-template&gt;
     Body Content
-    &lt;p-footer&gt;
+    &lt;ng-template pTemplate="footer"&gt;
         Footer content here
-    &lt;/p-footer&gt;
+    &lt;/ng-template&gt;
 &lt;/p-panel&gt;
 </app-code>
 

src/app/showcase/components/virtualscroller/virtualscrollerdemo.html

@@ -152,11 +152,11 @@ <h5>Sections</h5>
             <p>Header and Footer are the two sections that are capable of displaying custom content.</p>
 <app-code lang="markup" ngNonBindable ngPreserveWhitespaces>
 &lt;p-virtualScroller [value]="cars" scrollHeight="500px" [itemSize]="150"&gt;
-    &lt;p-header&gt;Header Content&lt;/p-header&gt;
-    &lt;p-footer&gt;Footer Content&lt;/p-footer&gt;
+    &lt;ng-template pTemplate="header"&gt;Header Content&lt;/ng-template&gt;
     &lt;ng-template pTemplate="item" let-car&gt;
-        Car content
+    Car content
     &lt;/ng-template&gt;
+    &lt;ng-template pTemplate="footer"&gt;Footer Content&lt;/ng-template&gt;
 &lt;/p-virtualScroller&gt;
 </app-code>