Skip to main content

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

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

SMPP protocol library for fast and easy SMSC(Short Message Service Centre) client development even for non-telecom guys

SMS sending through .NET C# is really easy. But most of the guys face many issues with SMSC client developments. SMPP protocol has many parameters to configure, but for simple SMPP gateway application you need very few of them to configure correctly. This article will cover how to implement SMSC client application using EasySMPP library. EasySMPP is a free SMPP library used by many people to implement SMS sending applications. There are many SMPP libraries but EasySMPP library is very easy to use and relatively stable. EasySMPP library mainly contain five class library projects. KernelParameters, SMPPClient, SMSClient, SMSService and Tools are the library projects and you only need to use SMSClient library to implement SMPP client application. First download EasySMPP library and add class library project to your .NET C# solution.  1. public bool SendSms( string from, string to, string text)