Open In App

Angular PrimeNG Card Styling

Improve
Improve
Like Article
Like
Save
Share
Report

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


  • 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=
          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>


  • 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



Last Updated : 20 Jan, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads