Preface: As we all know, primeNG is a UI component library for ng2. It is very powerful. I personally feel that it is more powerful than ng2-bootstrap. Let me tell you how to install and use it. The official website:/primeng/#/
I use angular cli to create a project, so I talk about the configuration and installation steps under cli. If you don’t use cli, don’t worry. The official website has specific installation steps.
1. Installation
cd your project directory
npm install primeng --save-dev
2. Configuration
Omega is a theme, there are many themes, bootstrap, etc...
"styles": [ "", "../node_modules/primeng/resources/themes/omega/", "../node_modules/primeng/resources/", "../node_modules/font-awesome/css/" ],
It should be noted that all small icons in the system use the font-awosome font library, which is a font icon file and needs to be installed.
npm install font-awosome --save
3. All components that need to be used must be loaded in
// Load the primeng moduleimport {AutoCompleteModule, TabViewModule, ButtonModule} from "primeng/primeng"
......
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
FormsModule,
HttpModule,
AutoCompleteModule,
ButtonModule,
TabViewModule
],
......
4. The components defined in the module can be used in the template.
// Button<button pButton type="button" label="Click"></button> // Tag page<p-tabView> <p-tabPanel header="Header 1"> Content 1 </p-tabPanel> <p-tabPanel header="Header 2" [selected]="true" [closable]="true"> Content 2 </p-tabPanel> <p-tabPanel header="Header 3"> Content 3 </p-tabPanel> </p-tabView>
The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.