angular项目中使用Primeng
1.第一步把依赖添加到项目中
npm install primeng --save
npm install @angular/animations --save
npm install font-awesome@4.7.0 --save
2.在.angular-cli.json中添加
"styles": [
"styles.css",
"../node_modules/primeng/resources/primeng.min.css",
"../node_modules/primeng/resources/themes/omega/theme.css",
"../node_modules/font-awesome/css/font-awesome.min.css"
],
3.在app.module.ts中添加以下模块
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core'; import { AppComponent } from './app.component';
import {FormsModule} from "@angular/forms";
import {HttpModule} from "@angular/http";
import {BrowserAnimationsModule} from "@angular/platform-browser/animations";
import {ButtonModule, InputTextModule} from "primeng/primeng"; @NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
BrowserAnimationsModule,
InputTextModule,
ButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
4.在app.component.ts中添加
import {Component} from '@angular/core'; @Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
constructor( ) { } name: string; message: string; onClick() { this.message = "Hello , " + this.name; }
}
5.在app.component.html中添加
<input type="text" [(ngModel)]="name" pInputText> <button type="button" pButton label="Click" icon="fa fa-check" (click)="onClick($event)"></button> <div>{{message}}</div>
测试结果:
angular项目中使用Primeng的更多相关文章
- gulp 在 angular 项目中的使用
gulp 在 angular 项目中的使用 keyword:gulp,angularjs,ng,ngAnnotate,jshint,gulpfile 最后附完整简洁的ng项目gulpfile.js 准 ...
- angular项目中各个文件的作用
原文地址 https://www.jianshu.com/p/176ea79a7101 大纲 1.对angular项目中的一些文件的概述 2.对其中一些文件的详细描述 2.1.package.json ...
- Angular 项目中如何使用 ECharts
在有些使用 ECharts 库的 Angular 项目中,通常除了安装 npm 包之外,还会在 angular.json 中配置 “build.options.scripts”,将 “node_mod ...
- angular项目中遇到的问题
一.angular项目中如何实现路由缓存 需要实现的效果,对请求的数据进行缓存,比如进入文章详情页之后点击返回,不会再调用后台数据接口:而是加载缓存中的数据,如何数据变动的情况下,可使用下拉刷新刷新页 ...
- Angular项目中引入jQuery
npm install --save jquery npm install @types/jquery --save 在对应的组件中引入 import * as $ from "jquery ...
- 在angular项目中使用bootstrap的tooltip插件时,报错Property 'tooltip' does no t exist on type 'JQuery<HTMLElement>的解决方法和过程
在angular4的项目中需要使用bootstrap的tooltip插件. 1. 使用命令安装jQuery和bootstrap npm install bootstrap jquery --save ...
- angular项目中使用jquery的问题
1.使用npm命令往项目中添加jQuery. npm install jquery --save 2.在你想要用jQuery的组件中添加. import * as $ from "jquer ...
- Angular项目中共享模块的实现
创建share Modele:ng g m share import进来所有需要共享的模块都export出去, 一.共享CommonModule 暂时只有CommonModule,以后会有一些需要共享 ...
- Angular项目中核心模块core Module只加载一次的实现
核心模块CoreModule在整个系统中只加载一次,如何实现? 创建core Modele:ng g m core 既然CoreModule是类,就有构造函数,在构造函数中进行依赖注入. export ...
随机推荐
- 洛谷 P2574 XOR的艺术
刚刚学了,线段树,一道线段树入门题试试水 下面是题面 题目描述 AKN觉得第一题太水了,不屑于写第一题,所以他又玩起了新的游戏.在游戏中,他发现,这个游戏的伤害计算有一个规律,规律如下 1. 拥有一个 ...
- Codeforces Round #409 (rated, Div. 2, based on VK Cup 2017 Round 2)
A 每次可以换一个或不换,暴力枚举位置即可 B 模拟 C 二分答案.. 边界可以优化r=totb/(tota-p),二分可以直接(r-l>=EPS,EPS不要太小,合适就好),也可以直接限定二分 ...
- Wifi密码破解实战
原文链接地址:http://www.freebuf.com/articles/wireless/127261.html https://www.baidu.com/?tn=98012088_4_dg& ...
- BZOJ1089 [SCOI2003]严格n元树 【dp + 高精】
Description 如果一棵树的所有非叶节点都恰好有n个儿子,那么我们称它为严格n元树.如果该树中最底层的节点深度为d (根的深度为0),那么我们称它为一棵深度为d的严格n元树.例如,深度为2的严 ...
- acid(数据库事务正确执行的四个基本要素的缩写)
ACID,指数据库事务正确执行的四个基本要素的缩写.包含:原子性(Atomicity).一致性(Consistency).隔离性(Isolation).持久性(Durability).一个支持事务(T ...
- C++类间转换之dynamic_cast
当在C++的基类与派生类之间转换时,其多态性充分显现出来: 本次只讨论 dynamic_cast 的用法. 在查阅资料后发现百度百科关于 dynamic_cast (以及static_cast ...
- signal和sigaction 分析
1:signal 函数 原型: sighandler_t signal(int signum, sighandler_t handler) typedef void (*sighandler ...
- Nginx基本功能极速入门
http://xxgblog.com/2015/05/17/nginx-start/ 本文主要介绍一些Nginx的最基本功能以及简单配置,但不包括Nginx的安装部署以及实现原理.废话不多,直接开始. ...
- STL源码分析-list
http://note.youdao.com/noteshare?id=81492dc45602618344edc838ef104581
- 装饰器--decorator2
装饰器加参数 import time def timer(func): # timer(test2) func = test2 def deco(): start_time = time.time() ...