Skip to main content

Related Articles

Loading...

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:

Comments

Post a Comment

Popular posts from this blog

The Power of ChatGPT and Whisper Models

A Deep Dive into Natural Language Processing Natural Language Processing (NLP) has seen a significant boost in recent years due to advancements in artificial intelligence and machine learning. Two models that have shown remarkable success in NLP are ChatGPT and Whisper. In this article, we will delve into the power of these models and their applications in the field of NLP. ChatGPT is a transformer-based language model developed by OpenAI that uses unsupervised learning to predict the next word in a sentence based on the context of previous words. ChatGPT is a generative model that is trained on large datasets of text, such as books and articles, and can be fine-tuned for specific tasks, such as question-answering or dialogue generation. ChatGPT is known for its ability to produce human-like text, making it an ideal tool for applications such as chatbots, content creation, and language translation. Whisper, on the other hand, is a paraphrasing model developed by Google that is based on...
Post a Comment
Read more

React Hooks

React Hooks revolutionized the way we write components in React by providing a more concise and functional approach to managing state and side effects. In this article, we will explore the basics of React Hooks, their benefits, and how they differ from traditional class components. Whether you're new to React or an experienced developer, understanding Hooks is essential for building modern and efficient React applications. React Hooks are functions that allow you to use state and other React features in functional components. They were introduced in React version 16.8 as a way to write reusable and stateful logic without using class components. Prior to Hooks, stateful logic was typically managed in class components using lifecycle methods such as componentDidMount , componentDidUpdate , and componentWillUnmount . This often led to complex and hard-to-maintain code, especially when dealing with multiple lifecycle methods or sharing stateful logic between components. With React Hook...
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