Angular PrimeNG Card Styling
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.
- app.component.html
HTML
< h1 > < span > < img src = "https://media.w3wiki.net/wp-content/assets/Group 210.svg" class = "gfg-logo" alt = "icon" /> </ span > < span style = "color: green; font-size: 40px;" > w3wiki </ 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 > |
- app.component.ts
Javascript
import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent { title = 'cardStyling' ; } |
- app.module.ts
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.
- app.component.html
HTML
< h1 > < span > < img src = "https://media.w3wiki.net/wp-content/assets/Group 210.svg" class = "gfg-logo" alt = "icon" /> </ span > < span style = "color: green; font-size: 40px;" > w3wiki </ span > </ h1 > < h3 >PrimeNG Card Styling</ h3 > < p-card header = "Angular PrimeNG Card Styling" subheader = "PrimeNG Card Component" > < ng-template pTemplate = "header" > < img src = "https://media.w3wiki.net/wp-content/assets/Group 210.svg" 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 > |
- app.component.ts
Javascript
import { Component } from '@angular/core' ; @Component({ selector: 'app-root' , templateUrl: './app.component.html' , styleUrls: [ './app.component.css' ] }) export class AppComponent { title = 'cardStyling' ; } |
- app.module.ts
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 {} |
- style.css
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
Contact Us