Angular PrimeNG Fieldset自定义图例

Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的风格设计，该框架可用于制作响应式网站，非常容易。这篇文章将向我们展示Angular PrimeNG中不同的Fieldset自定义图例。

Fieldset组件是一个分组组件，它需要一个标题以及与该标题相关的一些内容，有一个切换功能。你可以使用标题模板设计你自己的标题。你可以使用模板来创建自定义标题内容，而不是使用图例属性。

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

第1步：要创建一个angular应用程序，你需要通过npm命令安装angular命令行接口。

npm install -g angular-cli

第2步：现在我们将创建一个angular项目。

ng new project_name

第3步：在创建你的angular项目后，进入文件夹执行不同的操作。

cd project_name

第4步：创建Angular应用程序后，使用以下命令安装所需的模块。

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

项目结构：运行上述步骤中提到的命令后，它将看起来像如下。

Project Structure

运行应用程序的步骤：从项目的根目录使用以下命令运行应用程序。

ng serve --open

示例1：我们正在创建一个显示Angular PrimeNG Fieldset Custom Legend的用户界面。

• app.component.html:

<div style="margin:100px;">
    <h1 style="color: green">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Fieldset Custom Legend</h3>
    <br />
    <p-fieldset>
        <ng-template pTemplate="header">
            <span [style]="{'color':'green'}">
                Hi Geek !   
                <i class="pi pi-sun pi-spin"></i>
            </span></ng-template>
        <p>
            Welcome to Geeks For Geeks!<br />
            Billions of Users, Millions of Articles 
            Published, Thousands Got Hired by Top 
            Companies and the numbers are still growing.
        </p>
    </p-fieldset>
</div>

• 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 { FieldsetModule } from "primeng/fieldset";
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FieldsetModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

字段集自定义图例

例子2 。我们正在创建一个UI，显示Angular PrimeNG Fieldset自定义图例。

• app.component.html

<div style="margin:100px;">
    <h1 style="color: green;">GeeksforGeeks</h1>
    <h3>Angular PrimeNG Fieldset Custom Legend</h3>
    <br />
    <p-fieldset>
        <ng-template pTemplate="header">
            <span style="color:green;
                    border: 2px green dotted;
                    padding:5px">
                <i class="pi pi-star pi-spin"></i>  
                  DSA - Self Paced Course  
                 <i class="pi pi-star pi-spin"></i>
            </span>
        </ng-template>
        <p>
            Most popular course on DSA trusted by 
            over 75,000 students! Built with years of
            experience by industry experts and gives 
            you a complete package of video lectures,
            practice problems, quizzes, discussion 
            forums and contests. Start Today!
        </p>
    </p-fieldset>
</div>

• 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 { FieldsetModule } from "primeng/fieldset";
@NgModule({
    declarations: [
        AppComponent
    ],
    imports: [
        BrowserModule,
        FieldsetModule,
        BrowserAnimationsModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

输出:

字段集自定义图例