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

项目结构：安装成功后，它将看起来像以下图片。

Angular PrimeNG简介

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

输出:

Angular PrimeNG简介

实例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;
  }
}