Данные Angular PrimeNG на месте
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