Пользовательская легенда Angular PrimeNG Fieldset

Опубликовано: 23 Февраля, 2023

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Эта статья покажет нам различные пользовательские легенды Fieldset в Angular PrimeNG.

Компонент Fieldset — это компонент группировки, который принимает заголовок вместе с некоторым содержимым, связанным с этим заголовком, имеющим функцию переключения. Вы можете создать свой собственный заголовок, используя шаблон заголовка. Вместо использования свойства легенды вы можете использовать шаблон для создания настраиваемого содержимого заголовков.

Создание приложения Angular и установка модуля:

Шаг 1: Чтобы создать приложение angular, вам необходимо установить интерфейс командной строки angular с помощью команды npm.

npm install -g angular-cli

Шаг 2: Теперь мы создадим угловой проект.

ng new project_name

Шаг 3: После создания углового проекта перейдите в папку для выполнения различных операций.

cd project_name

Шаг 4: После создания приложения Angular установите необходимый модуль с помощью следующей команды:

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

Структура проекта: после выполнения команд, упомянутых в предыдущих шагах, он будет выглядеть следующим образом:

Шаг для запуска приложения: Запустите приложение, используя следующую команду из корневого каталога проекта:

ng serve --open

Пример 1: мы создаем пользовательский интерфейс, который показывает пользовательскую легенду Angular PrimeNG Fieldset.

  • приложение.component.html:

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:

Javascript




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. Мы создаем пользовательский интерфейс, который показывает пользовательскую легенду Angular PrimeNG Fieldset.

  • app.component.html

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:

Javascript




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 { }

Выход:

Ссылка: https://primefaces.org/primeng/fieldset