Angular PrimeNG Card Component

Last Updated : 11 Sep, 2021

Angular PrimeNG is an open-source framework with a rich set of native Angular UI components that are used for great styling and this framework is used to make responsive websites with very much ease. In this article, we will know how to use the Card Component in Angular PrimeNG. We will also learn about the properties, styling along with their syntaxes that will be used in the code.

Card Component: A card is used to display flexible and extensible content containers.

Properties:

header: It specifies the title of the card. It is of string data type & the default value is null.
subheader: It specifies the secondary title of the card. It is of string data type & the default value is null.
style: It is used to set the inline style of the component. It is of string data type & the default value is null.
styleClass: It is used to set the style class of the component. It is of string data type & the default value is null.

Styling:

p-card: It is the container element.
p-card-reader: It is the title element.
p-card-subheader: It is the subtitle element.
p-card-content: It is the content of the card.
p-card-footer: It is the footer of the card.

Creating Angular application & module installation:

Step 1: Create an Angular application using the following command.

ng new appname

Step 2: After creating your project folder i.e. appname, move to it using the following command.

cd appname

Step 3: Install PrimeNG in your given directory.

npm install primeng --save
npm install primeicons --save

Project Structure: It will look like the following:

Example 1: This is the basic example that illustrates how to use the Card component.

app.component.html

<h2>GeeksforGeeks</h2>
<p-card header="Angular PrimeNG Card component">
  
<p>
    Angular PrimeNG is a framework used with
    angular to create components with great styling
    and this framework is very easy to use and
    is used to make responsive websites.
</p>

</p-card>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

app.module.ts

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({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            CardModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

Output:

Example 2: In this example, we will know how to use the subheader property in the Card component.

app.component.html

<p-card header='GeeksforGeeks' subheader="Angular PrimeNG Card component">
  
<p>
    Angular PrimeNG is a framework used with 
    angular to create components with great 
    styling and this framework is very easy 
    to use and is used to make responsive 
    websites.
</p>

</p-card>

app.component.ts

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

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {}

app.module.ts

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({
  imports: [BrowserModule, 
              BrowserAnimationsModule, 
            CardModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent]
})
export class AppModule {}