Angular PrimeNG面板的页眉和页脚内容

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架用于制作响应式网站，非常容易。本文将向我们展示如何在Angular PrimeNG中使用Panel Header和Footer Content。我们还将学习属性，以及代码中要用到的语法。

面板组件允许我们制作一个包含头和一些与该头相关的内容的元素。

语法:

<p-panel >
    <ng-template pTemplate="header">
        .....
    </ng-template>
        .....
    <ng-template pTemplate="footer">
        .....
    </ng-template>
</p-panel>

Angular PrimeNG面板的页眉和页脚内容属性：

header。它是面板的标题文本。它是字符串数据类型，默认值为空。
toggleable。它定义了面板的内容是否可以被展开和折叠。它是布尔数据类型，默认值是false。

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构：它将看起来像如下。

Angular PrimeNG面板的页眉和页脚内容

运行以下命令：

ng serve --open

例子1：下面是演示使用Angular PrimeNG面板页眉和页脚内容的基本例子。

app.component.html:

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Panel Header and Footer Content</h5>
  
<p-panel [toggleable]="true">
    <ng-template pTemplate="header">
        GeeksforGeeks Header
    </ng-template>
  
    <p>
        Angular PrimeNG is a framework used with angular to create
        components with great styling and this framework is very
        easy to use and is used to make responsive websites.
    </p>
      
    <ng-template pTemplate="footer">
        GeeksforGeeks Footer
    </ng-template>
</p-panel>

app.component.ts:

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
  
export class AppComponent {}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent }   from './app.component';
import { PanelModule } from 'primeng/panel';
import { ToastModule } from 'primeng/toast';
import { ButtonModule } from 'primeng/button';
import { MenuModule } from 'primeng/menu';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        PanelModule,
        ToastModule,
        ButtonModule,
        MenuModule,
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
  
export class AppModule {}

输出:

Angular PrimeNG面板的页眉和页脚内容

例子2：下面是另一个例子，演示使用Angular PrimeNG Panel Header and Footer Content，使用一张图片。

app.component.html:

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Panel Header and Footer Content</h5>
  
<p-panel [toggleable]="true">
    <ng-template pTemplate="header">
        GeeksforGeeks Header
    </ng-template>
  
    <p>
        <img alt="gfg" height="200px" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807214719/geeksclasseslivecourseoverviewimage-300x289.png" />
  
        <img alt="gfg" height="200px" src=
"https://media.geeksforgeeks.org/img-practice/banner/test-series-bundle-course-overview-image.png?v=1665205091" />
    </p>
  
    <ng-template pTemplate="footer">
        GeeksforGeeks Footer
    </ng-template>
</p-panel>

app.component.ts:

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    providers: [MessageService],
})
  
export class AppComponent {}

app.module.ts:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } 
    from '@angular/platform-browser/animations';
import { AppComponent }   from './app.component';
import { PanelModule } from 'primeng/panel';
import { ToastModule } from 'primeng/toast';
import { ButtonModule } from 'primeng/button';
import { MenuModule } from 'primeng/menu';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        PanelModule,
        ToastModule,
        ButtonModule,
        MenuModule,
    ],
    declarations: [ AppComponent ],
    bootstrap:    [ AppComponent ]
})
  
export class AppModule {}

输出:

Angular PrimeNG面板的页眉和页脚内容