Angular PrimeNG Fieldset Regular

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式网站，非常方便。本文将告诉我们如何在Angular PrimeNG中使用Fieldset Regular。我们还将了解这些属性，以及在代码中使用的语法。

字段组组件是一个分组组件，它接收一个标题以及与该标题相关的一些内容，具有切换功能。

语法:

<p-fieldset 
   legend="....">
   <p>....</p>
</p-fieldset>

Angular PrimeNG字段集常规属性：

• 图例。它是字段集的标题文本。它是字符串数据类型，默认值为空。

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

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

ng new appname

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

cd appname

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

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

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

运行应用程序的步骤：运行以下命令。

ng serve --open

例子1：下面是演示使用**Angular PrimeNG Fieldset Regular的基本例子。

• app.component.html:

<h1 style="color: green">GeeksforGeeks</h1>
<h5>
   Angular PrimeNG Fieldset Regular
</h5>
  
<p-fieldset legend="GeeksforGeeks">
    <p>
       Welcome to GeeksforGeeks.
       It is a Computer Science
       portal for all Geeks.
    </p>
</p-fieldset>

• app.component.ts:

import { Component } from '@angular/core';
  
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   providers: [],
})
  
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 { FieldsetModule, } from 'primeng/fieldset';
  
@NgModule({
   imports: [
       BrowserModule,
       BrowserAnimationsModule,
       FieldsetModule,
   ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
  
export class AppModule { }

输出:

例子2：下面是另一个例子，展示了使用Angular PrimeNG Fieldset Regular的图片。

• app.component.html:

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Fieldset Regular</h5>
  
<p-fieldset legend="GeeksforGeeks">
    <p>
       <img alt="gfg" height="200px" src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220807214719/geeksclasseslivecourseoverviewimage-300x289.png" />
    </p>
</p-fieldset>

• app.component.ts:

import { Component } from '@angular/core';
  
@Component({
   selector: 'app-root',
   templateUrl: './app.component.html',
   providers: [],
})
  
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 { FieldsetModule, } from 'primeng/fieldset';
  
@NgModule({
   imports: [
       BrowserModule,
       BrowserAnimationsModule,
       FieldsetModule,
   ],
   declarations: [ AppComponent ],
   bootstrap:    [ AppComponent ]
})
  
export class AppModule { }

输出: