Skip to main content

Getting Started With PrimeNG Styling in Angular App

primeng styling angular

 


This chapter I am going to explain how you can do the styling to our flower store app. There are different kind of CSS frameworks you can use to style you app.

Such as:

1.       Angular Material

2.       ngx-bootstrap

3.       NG bootstrap

4.       Prime NG

 

I am planning to use PrimeNG styling framework to style our flower store app.

PrimeNG has more than 80 UI component and it is a collection of rich UI components for Angular. All widgets are open source and free to use under MIT License.

 

How to Install Prime NG

1.   Run  

npm install primeng –save
 inside your root folder.

       

        npm_install_primeng


2.       Run 

npm install primeicons –save
to install prime icons.


npm install primeicons


3.       Run 

npm install font-awesome --save
to Install Font Awesome


npm install font-awesome --save


4.       Run 

npm install @angular/cdk –save
to install angular  component dev kit.


npm install @angular/cdk –save


Now we are done with installing Prime NG to out flower store app. If you check your package json you will see below list of libraries.



PrimeNG installed libraries


Add below code to your angualr.json file style section.    


        

"styles": [
              "src/styles.scss",
              "./node_modules/primeicons/primeicons.css",
              "./node_modules/primeng/resources/themes/nova-light/theme.css",
             "./node_modules/primeng/resources/primeng.min.css"
            ],



If you are using Angular 8 after above installation you will get error 

Broswerslist: caniuse-lite is outdated. Please run next command `npm update' 
node_modules/primeng/api/megamenuitem.d.ts(30,27): error TS2304: Cannot find name 'QueryParamsHandling'.

node_modules/primeng/api/menuitem.d.ts(1,10): error TS2305: Module '"../../@angular/router/router"' has no exported member 'QueryParamsHandling'.

     when you run ng serve command. 


ng serve error ng caniuse-lite is outdated. Please run next command


This is because there is a mismatch between the Angular version and the PrimeNG version. To resolve this, you can run below two commands to uninstall current version and install Angular 8 compatible PrimeNG version.

npm uninstall primeng

npm install primeng@8.0.1

 

Now you are ready to use PrimeNg to style your flower store app.



Labels

Labels:

Comments

Post a Comment

Popular posts from this blog

Building robust APIs with Node.js

Node.js is a popular open-source JavaScript runtime environment that allows developers to build scalable and high-performance web applications. One of the key strengths of Node.js is its ability to build APIs quickly and efficiently. APIs, or Application Programming Interfaces, allow different systems to communicate with each other, enabling data exchange and other operations. Building robust APIs with Node.js requires an understanding of RESTful architecture, which is a widely adopted standard for creating APIs. RESTful APIs provide a standardized way to expose data and functionality over the web using a set of HTTP methods such as GET, POST, PUT, and DELETE. To build a robust Node.js API, developers must choose an appropriate framework and set up a development environment. They should also handle errors and exceptions, implement authentication and authorization, and use middleware to enhance the functionality of the API. Writing test cases, documenting the API using tools such as Swa...
Post a Comment
Read more

PrimeNG UI Components For Angular Application

Getting Started With PrimeNG Styling in Angular App  This chapter we are going to check how you can add PrimeNG card component to show available flowers in the stock. Before styling the app, I have added some images of flowers to our assets folder as below. In app.module.ts file you can import PrimeNG Card module as below. import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; import { LandingComponent } from './modules/landing/landing.component'; import { HomeComponent } from './modules/home/home.component'; import { CardModule } from 'primeng/card'; ; @NgModule({   declarations: [     AppComponent,     LandingComponent,     HomeComponent   ],   imports: [     BrowserModule,     AppRoutingModule,     CardModule,        ],   provider...
Post a Comment
Read more

DevOps automation using Python - Part 1

DevOps automation is the practice of automating the process of building, testing, and deploying software. Python is a popular language for DevOps automation because of its simplicity and versatility. In this article, we will cover the basics of getting started with DevOps automation using Python. Prerequisites Before we begin, make sure you have Python installed on your system. You can download Python from the official website at https://www.python.org/downloads/ . We will also be using some Python packages, so make sure you have the following packages installed: pip : The package installer for Python. virtualenv : A tool that creates isolated Python environments. Setting up a Virtual Environment The first step in getting started with Python DevOps automation is to set up a virtual environment. A virtual environment allows you to create a separate environment for your Python project, which can help avoid conflicts with other packages on your system. To create a virtual environment, ope...
1 comment
Read more