Angular PrimeNG Card Styling
Last Updated :
20 Jan, 2023
A responsive website may be created with great ease using the open-source Angular PrimeNG framework, which has a wide range of native Angular UI components for superb style. In this article, we will learn how to style the Card Component in Angular PrimeNG.
A card is a display device for extensible and adaptable content containers.
Angular PrimeNG Card Styling:
- p-card: This class is for applying custom styling to the container element.
- p-card-reader: This class is for applying custom styling to the title element.
- p-card-subheader: This class is for applying custom styling to the subtitle element.
- p-card-content: This class is for applying custom styling to the content of the card.
- p-card-footer: This class is for applying custom styling to the footer of the card.
Â
Syntax:
<p-card
header="..."
subheader="...">
<p-card>
Creating Angular application and Installing the modules:
Step 1: Use the command below to create an Angular application.
ng new appname
Step 2: Use the following command to move to our project folder, appname, after creating it.
cd appname
Step 3: Install PrimeNG in the specified location.
npm install primeng --save
npm install primeicons --save
Project Structure: The project structure will look like this once the installation is finished:
Â
Steps to run the above application: Run the below command
ng serve --open
Example 1: In this example, use inline style or style attributes for styling the Card Styling in Angular PrimeNG.
HTML
< h1 >
< span >
< img src =
class = "gfg-logo" alt = "icon" />
</ span >
< span style = "color: green; font-size: 40px;" >
GeeksforGeeks
</ span >
</ h1 >
< h3 >PrimeNG Card Styling</ h3 >
< p-card
header = "Angular PrimeNG Card component"
[style]="{
border: '2px solid black',
borderRadius: '15px',
width: '450px',
backgroundColor: 'green',
color: 'white'
}">
< p >
A responsive website may be created
with great ease using the open-source
Angular PrimeNG framework, which has
a wide range of native Angular UI components
for superb style.
</ p >
</ p-card >
|
Javascript
import { Component } from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
title = 'cardStyling' ;
}
|
Javascript
import { NgModule } from "@angular/core" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { CardModule } from "primeng/card" ;
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
CardModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
|
Output:
Â
Example 2: In this example, we will be using predefined structural styling classes to style the Angular PrimeNG Card Styling.
HTML
< h1 >
< span >
< img src =
class = "gfg-logo" alt = "icon" />
</ span >
< span style = "color: green; font-size: 40px;" >
GeeksforGeeks
</ span >
</ h1 >
< h3 >PrimeNG Card Styling</ h3 >
< p-card
header = "Angular PrimeNG Card Styling"
subheader = "PrimeNG Card Component" >
< ng-template pTemplate = "header" >
< img src =
alt = "icon" />
</ ng-template >
< p >
A responsive website may be
created with great ease using
the open-source Angular PrimeNG
framework, which has a wide range of native
Angular UI components for superb style.
</ p >
< ng-template pTemplate = "footer" >
< p-button label = "Continue" icon = "pi pi-check" ></ p-button >
< p-button label = "Close" icon = "pi pi-times" ></ p-button >
</ ng-template >
</ p-card >
|
Javascript
import { Component } from '@angular/core' ;
@Component({
selector: 'app-root' ,
templateUrl: './app.component.html' ,
styleUrls: [ './app.component.css' ]
})
export class AppComponent {
title = 'cardStyling' ;
}
|
Javascript
import { NgModule } from "@angular/core" ;
import { BrowserModule } from "@angular/platform-browser" ;
import { BrowserAnimationsModule }
from "@angular/platform-browser/animations" ;
import { AppComponent } from "./app.component" ;
import { CardModule } from "primeng/card" ;
import { ButtonModule } from "primeng/button" ;
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
BrowserAnimationsModule,
CardModule,
ButtonModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule {}
|
CSS
:host ::ng-deep .p-card {
border-radius: 25px !important ;
width : 550px ;
border : 2px solid black ;
}
:host ::ng-deep .p-card-header {
border-radius: 25px 25px 0px 0px !important ;
color : white ;
font-size : 20px ;
font-weight : bold ;
text-align : center ;
padding : 10px ;
width : 150px ;
margin : 0 auto ;
}
:host ::ng-deep .p-card .p-card-subtitle {
color : black !important ;
}
:host ::ng-deep .p-card .p-card-content {
font-size : 18px ;
font-style : italic ;
font-family : cursive ;
font-weight : 700 ;
color : black ;
}
:host ::ng-deep .p-card .p-card-footer {
display : flex;
justify- content : center ;
}
:host ::ng-deep .p-button.p-element {
margin-right : 5px ;
}
|
Output:
Â
Reference: https://primefaces.org/primeng/card
Share your thoughts in the comments
Please Login to comment...