1.第一步把依赖添加到项目中
npm install primeng --save
npm install @angular/animations --save
npm install [email protected] --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>
测试结果:
时间: 2024-08-21 17:16:17