Componente de la tarjeta Angular PrimeNG

Angular PrimeNG es un marco de trabajo de código abierto con un amplio conjunto de componentes nativos de la interfaz de usuario de Angular que se utilizan para lograr un gran estilo y este marco se utiliza para crear sitios web receptivos con mucha facilidad. En este artículo, sabremos cómo usar el Componente Tarjeta en Angular PrimeNG. También aprenderemos sobre las propiedades, el estilo junto con sus sintaxis que se usarán en el código. 

Componente de tarjeta: una tarjeta se utiliza para mostrar contenedores de contenido flexibles y extensibles.

Propiedades:

• header: Especifica el título de la tarjeta. Es de tipo de datos de string y el valor predeterminado es nulo.
• subcabecera: Especifica el título secundario de la tarjeta. Es de tipo de datos de string y el valor predeterminado es nulo.
• estilo: Se utiliza para establecer el estilo en línea del componente. Es de tipo de datos de string y el valor predeterminado es nulo.
• styleClass: Se utiliza para establecer la clase de estilo del componente. Es de tipo de datos de string y el valor predeterminado es nulo.

Estilo:

• p-card: Es el elemento contenedor.
• p-card- reader: Es el elemento del título.
• p-card-subheader : Es el elemento del subtítulo.
• p-card-content: Es el contenido de la tarjeta.
• p-card-footer: Es el pie de página de la tarjeta.

Creación de aplicaciones angulares e instalación de módulos:

• Paso 1: Cree una aplicación Angular usando el siguiente comando.

ng new appname

• Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la aplicación, muévase a ella con el siguiente comando.

cd appname

• Paso 3: Instale PrimeNG en su directorio dado.

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

Estructura del proyecto: se verá así:

Ejemplo 1: Este es el ejemplo básico que ilustra cómo usar el componente Tarjeta. 

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

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

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 {}

Producción:

Ejemplo 2: En este ejemplo, sabremos cómo usar la propiedad de subtítulo en el componente Tarjeta.

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

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

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 {}

Producción:

Referencia:https://primefaces.org/primeng/showcase/#/tarjeta