PrimeNG安装使用

PrimeNG是Angular2的一个富客户端组件，可以独立于Bootstrap单独使用，也可以结合Bootstrap共同使用。

官方上只有例子的介绍，并没找到个类似入门教程一类的资料，这里自己结合网上搜到的资料整理一份入门资料。

官网网址：https://www.primefaces.org/primeng/

我使用angular-cli生成项目

需要安装的包有primeng、font-awesome

@angular/animations看你项目之前是否安装过，如果没有则需要安装，否则会报错

ERROR in ./~/primeng/components/panel/panel.js
Module not found: Error: Can't resolve '@angular/animations' in '/Users/xuwen/workspace/angular2/primengtest/node_modules/primeng/components/panel'@ ./~/primeng/components/panel/panel.js 15:19-49@ ./~/primeng/primeng.js@ ./src/app/app.module.ts@ ./src/main.ts@ multi webpack-dev-server/client?http://0.0.0.0:4200 ./src/main.ts

再接下来就可以使用PrimeNG组件了

首先来配置css文件（选择我们需要的风格bootstrap、omega等）

"styles": ["styles.css","../node_modules/primeng/resources/themes/bootstrap/theme.css","../node_modules/primeng/resources/primeng.min.css","../node_modules/font-awesome/css/font-awesome.css"
],

添加所需要的模块，在app.module.ts添加

app.module.ts代码

import { BrowserModule } from '@angular/platform-browser';

import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

import { NgModule } from '@angular/core';

import { FormsModule } from '@angular/forms';

import { HttpModule } from '@angular/http';

import { ConfirmDialogModule } from 'primeng/primeng';

import { GrowlModule } from 'primeng/primeng';

import { AppComponent } from './app.component';

@NgModule({

declarations: [

AppComponent

imports: [

BrowserModule,

FormsModule,

HttpModule,

ConfirmDialogModule,

BrowserAnimationsModule,

GrowlModule

providers: [],

bootstrap: [AppComponent]

})

export class AppModule { }

app.component.ts代码

import { Component } from '@angular/core';

import { Message } from 'primeng/primeng';

import { ConfirmationService } from 'primeng/primeng';

@Component({

selector: 'app-root',

templateUrl: './app.component.html',

styleUrls: ['./app.component.css'],

providers: [ConfirmationService]

})

export class AppComponent {

msgs: Message[] = [];

constructor(private confirmationService: ConfirmationService) { }

confirm1() {

this.confirmationService.confirm({

message: 'Are you sure that you want to perform this action?',

accept: () => {

this.msgs = [];

this.msgs.push({ severity: 'info', summary: 'Confirmed', detail: 'You have accepted' });

}

});

}

confirm2() {

this.confirmationService.confirm({

message: 'Do you want to delete this record?',

header: 'Delete Confirmation',

icon: 'fa fa-trash',

accept: () => {

this.msgs = [];

this.msgs.push({ severity: 'info', summary: 'Confirmed', detail: 'Record deleted' });

}

});

}

app.component.html代码

<p-growl [value]="msgs"></p-growl>

<p-confirmDialog width="425"></p-confirmDialog>

最终效果

转载于:https://www.cnblogs.com/bh4lm/p/6649796.html

PrimeNG安装使用相关推荐

手把手建项目 PrimeNG安装使用
手把手建项目 PrimeNG安装使用之前写过一片关于PrimeNG的安装使用,当时也是接触不久,最近重新使用的时候发现还是有一些东西没有说清楚. 当时用的是Angular2现在已经是Angular4 ...
Angular + PrimeNG 安装配置
PrimeNG是Angular一个比较完善的控件库,下面就根据这几天的学习(踩坑)过程,来梳理一下其基本操作安装流程. 1.安装NodeJs 首先作为Angular的语言支持,要先安装nodejs,到 ...
primeNG组件库在Angular2上的使用
第一:搭建一个新的Angular 2项目 1.新创建一个Angular CLI项目(PC安装好node,npm Angular CLI ,通过百度查找安装方法) 使用webstorm创建新的angul ...
Angular4与PrimeNG
[前言] 最近遇到了一个需要修改第三方组件库PrimeNG日历控件样式的问题,每一次遇见问题都是我们成长的机会. [过程] 1.下载安装依赖包 2.下载安装PrimeNG第三方组件库 cnpm ins ...
在Angular6中使用primeNG UI框架
第一步:使用ng new project ng new PrimeNGproject 第二步:可以运行一下是否成功 ng s 第三步:安装primeNG npm install primeng 第四步 ...
primeng使用步骤
1,选择路径,使用cli新建项目选择要创建项目的文件夹路径D:\primeNG files 地址栏打开cmd输入ng new KW2后回车 2,确认创建成功启动服务器注意:如果创建成功,用cmd ...
Angular 4入门教程系列：14：PrimeNG的使用方式
这篇文章介绍一下Angular的老牌UI组件库PrimeNG,并演示一下如何使引入PrimeNG到项目之中. Why PrimeNG 使用PrimeNG有很多原因,比如 70多个完善的组件开源提高 ...
Angular4中使用PrimeNG calendar
这段时间在我的Angular项目中需要用到日历这一控件: 像treeview.calendar等等这些"大"型控件,如果要自己写的话,需要花费很多时间,而且容易遗漏掉一些细节问题. ...
angular primeng 弹出对话框修改
功能目标: 点击列表项字符串弹出对话框,修改后关闭对话框,替换列表项原字符串. 点击"background"时弹出图2: 点击[apply],列表框background变为back ...

PrimeNG安装使用

PrimeNG安装使用相关推荐

最新文章

热门文章