极客教程Angular PrimeNG简介
Angular PrimeNG是一个开源的框架，具有丰富的本地Angular UI组件，有助于创建一个具有增强功能的有吸引力的用户界面。这些组件可以用来做很好的风格设计，并用于制作响应式网站，非常容易。不同的组件支持不同的功能，如波纹效果。这是一个由Button组件支持的动画，它是可选的，默认情况下它是禁用的，它可以通过注入PrimeNGConfig在主组件中全局启用。该动画主要用于增强各种组件的整体用户体验。
PrimeNG促进了各种组件、面板、覆盖物、菜单、图表等，这有助于制作一个单页应用，即一个网络应用，加载一个HTML页面，每次点击鼠标，只有页面的一部分而不是整个页面被更新。这提高了整体的用户体验，同时根据所使用的组件，增加了不同的功能来执行特定的任务。
在这篇文章中，我们将了解一个概述，它的语法和安装程序，以及通过实例了解它的实现。
安装:
npm install primeng --save
安装Angular PrimeNG的步骤：在我们继续安装Angular PrimeNG之前，我们必须在系统中安装Angular CLI。请参考Angular CLI Angular Project Setup文章了解详细的安装步骤。确保Angular CLI & Node Package Manager已正确安装。要检查安装的版本，请运行以下命令。
- 对于NodeJS版本。
node --version
- 对于NPM版本。
npm -V OR npm --version
- 对于Angular CLI版本。
ng -V or ng --version
在完成前提条件的安装后，我们现在可以使用命令行界面在本地系统中安装并创建Angular PrimeNG项目。
创建Angular PrimeNG应用程序的步骤：
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：在创建你的项目文件夹即appname之后，通过使用以下命令，移动到当前工作目录，在那里刚刚创建了新的应用程序。
cd appname
第3步在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
项目结构：安装成功后，它将看起来像以下图片。
Project Structure
例子：这个例子说明了Angular PrimeNG的实现。
<h2>GeeksforGeeks</h2>
<h5>Angular PrimeNG Component</h5>
<p-panelMenu [model]="gfg"></p-panelMenu>
import { Component } from "@angular/core";
import { MenuItem } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
export class AppComponent {
gfg: MenuItem[];
ngOnInit() {
this.gfg = [
{
label: "Web Technology",
items: [
{
label: "HTML",
},
{
label: "CSS",
items: [
{
label: "Pure CSS",
},
{
label: "Bulma CSS",
},
{
label: "Foundation CSS",
},
{
label: "Semantic UI",
},
],
},
{
label: "Javascript",
items: [
{
label: "Angular",
},
{
label: "React",
},
{
label: "FabricJS",
},
{
label: "VueJS",
},
],
},
{
label: "PHP",
},
{
label: "Database Management System",
},
],
},
{
label: "Data Structures",
items: [
{
label: "Linked List",
items: [
{
label: "Singly Linked List",
},
{
label: "Doubly Linked List",
},
{
label: "Circular Linked List",
},
],
},
{
label: "Stack",
},
{
label: "Queue",
},
{
label: "Tree",
},
{
label: "Graph",
},
{
label: "Heap",
},
],
},
];
}
}
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { PanelMenuModule } from 'primeng/panelmenu';
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
PanelMenuModule],
declarations: [AppComponent],
bootstrap: [AppComponent]
})
export class AppModule {}
输出:
实例2：本实例描述了Angular PrimeNG中的对话组件。
<h2>GeeksforGeeks</h2>
<h5>Angular PrimeNG Example</h5>
<p-button (click)="gfg()"
label="Click Here">
</p-button>
<p-dialog header="GeeksforGeeks"
[(visible)]="geeks">
<p>A Computer Science portal for geeks. </p>
</p-dialog>
import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations";
import { AppComponent } from "./app.component";
import { DialogModule } from "primeng/dialog";
import { ButtonModule } from "primeng/button";
@NgModule({
imports: [BrowserModule,
BrowserAnimationsModule,
DialogModule,
ButtonModule],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
export class AppModule {}
import { Component } from "@angular/core";
import { PrimeNGConfig } from "primeng/api";
@Component({
selector: "app-root",
templateUrl: "./app.component.html",
})
export class AppComponent {
constructor(private primengConfig: PrimeNGConfig) {}
ngOnInit() {
this.primengConfig.ripple = true;
}
geeks: boolean;
gfg() {
this.geeks = true;
}
}
输出:
