Skip to main content

Related Articles

PrimeNG UI Components For Angular Application

PrimeNG UI Components For Angular 9 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.


images in assets folder in angular app

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,

    

  ],

  providers: [],

  bootstrap: [AppComponent]

})

export class AppModule { }


import card module from primeng/card


Then you have to import card module in landing.component.ts file also.


import { Component, OnInit } from '@angular/core';

import { flower } from '../../domain/flower';

import {CardModule} from 'primeng/card';


@Component({

  selector: 'app-landing',

  templateUrl: './landing.component.html',

  styleUrls: ['./landing.component.scss']

})

export class LandingComponent implements OnInit {


  myFlowerList:flower[]=[];

  constructor() { }

  ngOnInit() {

    this.mySellingFlowers();

  }


  mySellingFlowers(){

    let rose = new flower();

    rose.name = "Rose";

    rose.price = 100;

    rose.availableQuantity = 1000;

    this. myFlowerList.push(rose);


    let lily = new flower();

    lily.name = "Lilly";

    lily.price = 80;

    lily.availableQuantity = 2000;

    this. myFlowerList.push(lily);


    let tulip = new flower();

    tulip.name = "Tulip";

    tulip.price = 100;

    tulip.availableQuantity = 2300;

    this. myFlowerList.push(tulip);


    let carnation = new flower();

    carnation.name = "Carnation";

    carnation.price = 50;

    carnation.availableQuantity = 1500;

    this. myFlowerList.push(carnation);


    let gerbera = new flower();

    gerbera.name = "Gerbera";

    gerbera.price = 50;

    gerbera.availableQuantity = 1500;

    this. myFlowerList.push(gerbera);


    let orchid = new flower();

    orchid.name = "Orchid";

    orchid.price = 50;

    orchid.availableQuantity = 1500;

    this. myFlowerList.push(orchid);

  }

}


   trackFlowers(index,flower){

    return flower?flower.name:undefined

  }

  }



Then you can use PrimeNG card module inside your component.html file as below.


<h1>Welcome to my flower store</h1>

<div *ngFor="let flower of myFlowerList;trackBy:trackFlowers">

        <p-card header="{{flower.name}}"  [style]="{width: '360px','float':'left','margin-bottom': '2em','margin-right': '2em','background-color':'light-pink'}" styleClass="p-card-shadow">

                <img alt="Card" width="100" height="100" src="assets/stock/{{flower.name}}.jpg">

            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Inventore sed consequuntur error repudiandae numquam deserunt

                quisquam repellat libero asperiores earum nam nobis, culpa ratione quam perferendis esse, cupiditate neque quas!</p>

                   </p-card>

    </div>


I have changed background styles in the banner in style.scss file.  


@import url('https://fonts.googleapis.com/css family=Nunito:400,700&display=swap');


$primary: indianred;


body {

    margin: 0;

    font-family: 'Nunito', 'sans-serif';

    font-size: 18px;

}


.container {

    width: 80%;

    margin: 0 auto;

}


header {

    background: $primary;

    padding: 1em 0;


    a {

        color: white;

        text-decoration: none;

        font-size: larger;

    }

    a.logo {

        font-weight: bold;

        color: white;

        font-size: larger;

    }


    nav {

        float: right;


        ul {

            list-style-type: none;

            margin: 0;

            display: flex;


            li a {

                padding: 1em;

                color:white;

                font-weight: bold;

                &:hover {

                    background: darken($primary, 10%);

                }

            }

        }

    }

}


h1 {

    margin-top: 2em;

}



Once you apply PrimeNG cards modules, app will look like below.


PrimeNG cards modules styles css example - flower store app


Let’s give a background color to the card title. For that you must override ui-card-title CSS inside your landing.component.scss file as below.
.ui-card-title{
    background-color: lightpink !important;
}



.ui-card-title css is defined inside primeng.min.scss file. To override it you must put below line of code in your landing.component.ts file.



import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { flower } from '../../domain/flower';
import {CardModule} from 'primeng/card';

@Component({
  selector: 'app-landing',
  templateUrl: './landing.component.html',
  styleUrls: ['./landing.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class LandingComponent implements OnInit {

  myFlowerList:flower[]=[];
  constructor() { }

  ngOnInit() {
    this.mySellingFlowers();
  }

  mySellingFlowers(){
    let rose = new flower();
    rose.name = "Rose";
    rose.price = 100;
    rose.availableQuantity = 1000;
    this. myFlowerList.push(rose);

    let lily = new flower();
    lily.name = "Lilly";
    lily.price = 80;
    lily.availableQuantity = 2000;
    this. myFlowerList.push(lily);

    let tulip = new flower();
    tulip.name = "Tulip";
    tulip.price = 100;
    tulip.availableQuantity = 2300;
    this. myFlowerList.push(tulip);

    let carnation = new flower();
    carnation.name = "Carnation";
    carnation.price = 50;
    carnation.availableQuantity = 1500;
    this. myFlowerList.push(carnation);

    let gerbera = new flower();
    gerbera.name = "Gerbera";
    gerbera.price = 50;
    gerbera.availableQuantity = 1500;
    this. myFlowerList.push(gerbera);

    let orchid = new flower();
    orchid.name = "Orchid";
    orchid.price = 50;
    orchid.availableQuantity = 1500;
    this. myFlowerList.push(orchid);

  }

  trackFlowers(index,flower){
    return flower?flower.name:undefined
  }
}



primeng landing.component.ts file




After applying all our changes flower store app will look like below. 


primeng flower store app complete example




Comments

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...

Getting Started With PrimeNG Styling in Angular App

  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.                    2.        Run npm install primeicons –save to install prime icons. 3.        Run npm ...