Angular PrimeNG Inplace Data

Angular PrimeNG是一个用于Angular应用程序的UI组件库。它为各种任务提供了许多预建的主题和UI组件，如输入、菜单、图表、按钮等。在这篇文章中，我们将看到Angular PrimeNG Inplace Data.。

Inplace组件是用来为用户提供一个容易做的编辑和显示。当Inplace组件的输出被点击时，内容就会显示出来。Inplace也可以用来显示数据，使用表格和其他数据组件作为内容。

Angular PrimeNG Inplace Data属性： Angular PrimeNG Inplace Data没有任何属性。

语法:

<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步：创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

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

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

项目结构：在完成上述步骤后，项目结构将看起来像这样。

Angular PrimeNG Inplace Data

Project Structure

例子1：在这个例子中，我们用表格组件来显示数据作为Inplace的内容。

app.component.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:

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:

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

输出:

Angular PrimeNG Inplace Data

例子2：在这个例子中，我们使用树形组件作为inplace的内容，向用户显示数据。

app.component.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:

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:

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

输出:

Angular PrimeNG Inplace Data