Angular PrimeNG Fieldset Toggleable

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

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

语法:

<p-fieldset 
    legend="...." 
    [toggleable]="true">
    <p>....</p>
</p-fieldset>

Angular PrimeNG字段集可切换的属性：

• 图例。它是字段集的标题文本。它是字符串数据类型，默认值为空。
• toggleable:它指定了是否可以通过点击图例来切换内容。它是布尔数据类型，默认值是false。

创建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 Togglable的基本例子。

• app.component.html:

<h1 style="color: green">GeeksforGeeks</h1>
<h5>
    Angular PrimeNG Fieldset Toggleable
</h5>
  
<p-fieldset 
    legend="GeeksforGeeks" 
    [toggleable]="true">
    <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 Togglable。

• app.component.html:

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Fieldset Toggleable</h5>
  
<p-fieldset 
    legend="GeeksforGeeks" 
    [toggleable]="true">
    <p>
        <img alt="gfg" 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 { }

输出: