Данные Angular PrimeNG на месте

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

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

Компонент Inplace используется для облегчения редактирования и отображения пользователю. При нажатии на вывод компонента Inplace открывается содержимое. Inplace также можно использовать для отображения данных с использованием таблиц и других компонентов данных в качестве содержимого.

Свойства данных Angular PrimeNG Inplace: для данных Angular PrimeNG Inplace нет свойств.

Синтаксис:

<p-inplace>
    <ng-template pTemplate="display">
        ...
    </ng-template>
    <ng-template pTemplate="content">
        <p-table [value]="...">
            <ng-template pTemplate="header">
                ...
            </ng-template>
            <ng-template let-person pTemplate="body">
                ...
            </ng-template>
        </p-table>
    </ng-template>
</p-inplace>

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

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Наконец, установите PrimeNG в указанный вами каталог.

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

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

Пример 1. В этом примере мы использовали компонент таблицы для отображения данных в виде содержимого файла Inplace.

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

HTML

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Angular PrimeNG Inplace Data</h3>
  
<p-inplace>
    <ng-template pTemplate="display">
        Reveal the Data
    </ng-template>
    <ng-template pTemplate="content">
        <p-table [value]="people">
            <ng-template pTemplate="header">
                <tr>
                    <th>Name</th>
                    <th>Profession</th>
                    <th>Age</th>
                </tr>
            </ng-template>
            <ng-template let-person pTemplate="body">
                <tr>
                    <td>{{person.name}}</td>
                    <td>{{person.profession}}</td>
                    <td>{{person.age}}</td>
                </tr>
            </ng-template>
        </p-table>
    </ng-template>
</p-inplace>

app.component.ts:

Javascript

import { Component } from "@angular/core";
  
interface Person {
    name: String;
    profession: String;
    age: Number;
}
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    people: Person[] = [];
    ngOnInit() {
        this.people = [
            {
                name: "Krish",
                profession: "Doctor",
                age: 32
            },
            {
                name: "Raman",
                profession: "Engineer",
                age: 26
            },
            {
                name: "Shubh",
                profession: "Teacher",
                age: 41
            },
            {
                name: "Divya",
                profession: "Manager",
                age: 27
            },
            {
                name: "Jayesh",
                profession: "Mechanic",
                age: 33
            }
        ];
    }
}

app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { TableModule } from "primeng/table";
import { InplaceModule } from "primeng/inplace";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InplaceModule,
        FormsModule,
        TableModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

Выход:

Пример 2. В этом примере мы использовали компонент дерева в качестве содержимого inplace для отображения данных пользователю.

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

HTML

<h2 style="color: green;">GeeksforGeeks</h2>
<h3>Angular PrimeNG Inplace Data</h3>
  
<p-inplace>
    <ng-template pTemplate="display">
        Reveal the Tree
    </ng-template>
    <ng-template pTemplate="content">
        <p-tree [value]="treeData"></p-tree>
    </ng-template>
</p-inplace>

app.component.ts:

Javascript

import { Component } from "@angular/core";
import { TreeNode } from "primeng/api";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styleUrls: ["./app.component.css"]
})
export class AppComponent {
    treeData: TreeNode[] = [];
  
    ngOnInit() {
        this.treeData = [{
                label: "India",
                children: [
                    {
                        label: "Delhi"
                    },
                    {
                        label: "Amritsar"
                    },
                    {
                        label: "Noida"
                    }
                ]
            },
            {
                label: "United Kingdom",
                children: [
                    {
                        label: "London"
                    },
                    {
                        label: "Manchester"
                    }
                ]
            },
            {
                label: "Dubai",
            }
        ];
    }
}

app.module.ts:

Javascript

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { FormsModule } from "@angular/forms";
import { BrowserAnimationsModule }
    from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { TableModule } from "primeng/table";
import { TreeModule } from "primeng/tree";
import { InplaceModule } from "primeng/inplace";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InplaceModule,
        FormsModule,
        TableModule,
        TreeModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
  
export class AppModule { }

Выход:

Ссылка: http://primefaces.org/primeng/inplace

Technical Scripter Picked AngularJS

Данные Angular PrimeNG на месте

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ