Расширенная карта Angular PrimeNG Card

Опубликовано: 21 Декабря, 2022

Angular PrimeNG — это фреймворк с открытым исходным кодом с богатым набором собственных компонентов пользовательского интерфейса Angular, которые используются для отличного стиля, и этот фреймворк используется для очень легкого создания адаптивных веб-сайтов. Эта статья покажет нам, как использовать Card Advanced Card в Angular PrimeNG . Мы также узнаем о свойствах и их синтаксисе, которые будут использоваться в коде.

Компонент карты используется для отображения гибких и расширяемых контейнеров содержимого.

Синтаксис:

<p-card header="...." subheader="...." 
    [style]="{ .... }" styleClass="....">
    <ng-template pTemplate="header">
        ....
    </ng-template>

    <p>...</p>

    <ng-template pTemplate="footer">
        .....
    </ng-template>
</p-card>

Свойства простой карты Angular PrimeNG Card:

заголовок: указывает название карты. Это строковый тип данных, и значение по умолчанию равно null.
подзаголовок: указывает вторичное название карты. Это строковый тип данных, и значение по умолчанию равно null.
стиль: используется для установки встроенного стиля компонента. Это строковый тип данных, и значение по умолчанию равно null.
styleClass: используется для установки класса стиля компонента. Это строковый тип данных, и значение по умолчанию равно null.

Создание приложения Angular и установка модуля:

Шаг 1: Создайте приложение Angular, используя следующую команду.

ng new appname

Шаг 2: После создания папки проекта, т. е. имени приложения, перейдите к ней с помощью следующей команды.

cd appname

Шаг 3: Установите PrimeNG в указанный вами каталог.

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

Структура проекта: Это будет выглядеть следующим образом:

Шаги для запуска приложения: Запустите приведенную ниже команду, чтобы увидеть результат.

ng serve --open

Пример 1. Это базовый пример кода, который иллюстрирует использование расширенной карты Angular PrimeNG Card с использованием кнопки изображения, заголовка, подзаголовка и нижнего колонтитула .

приложение.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Card Advanced Card</h5>
  
<p-card header="GeeksforGeeks" 
    subheader="Angular PrimeNG Card Advanced Card"
    [style]="{ width: "360px", height: "600px" }" 
    styleClass="shadow-2">
    <ng-template pTemplate="header">
        <img alt="Card" height="300" src=
"https://media.geeksforgeeks.org/img-practice/banner/system-design-live-course-overview-image.png?v=1665305530" />
    </ng-template>
    <p>
        This course helped me a lot in achieving 
          new heights in my career. I have cracked multiple 
          product-based companies including Amazon, 
          Flipkart, and Walmart.
    </p>
  
    <ng-template pTemplate="footer">
        <p-button label="Login" 
            styleClass="p-button-success">
          </p-button>
    </ng-template>
</p-card>

app.component.ts:

Javascript

import { Component } from "@angular/core";
  
@Component({
   selector: "app-root",
   templateUrl: "./app.component.html",
   providers: []
})
  
export class AppComponent {}

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 { ButtonModule } from "primeng/button";
import { CardModule, } from "primeng/card";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        CardModule,
        ButtonModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
  
export class AppModule { }

Выход:

Пример 2. Это еще один пример кода, иллюстрирующий использование Angular PrimeNG Card Advanced Card с использованием изображения, заголовка и подзаголовка.

приложение.component.html:

HTML

<h1 style="color: green">GeeksforGeeks</h1>
<h5>Angular PrimeNG Card Advanced Card</h5>
  
<p-card header="GeeksforGeeks" 
    subheader="Angular PrimeNG Card Advanced Card"
    [style]="{ width: "360px", height: "600px" }" 
    styleClass="shadow-2">
    <ng-template pTemplate="header">
        <img alt="Card" height="300" src=
"https://media.geeksforgeeks.org/img-practice/banner/cpp-stl-course-overview-image.png?v=1665307466" />
    </ng-template>
    <p>
        Initially, I was not comfortable with coding. 
        I kind of guess the logic for the problem but 
          am not able to implement it. So I took a C++ STL course,
        which makes the implementation much easier.
    </p>
  
    <ng-template pTemplate="footer">
        <p-button label="Logout" 
            styleClass="p-button-danger">
          </p-button>
    </ng-template>
</p-card>

app.component.ts:

Javascript

import { Component } from "@angular/core";
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: []
})
  
export class AppComponent { }

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 { ButtonModule } from "primeng/button";
import { CardModule, } from "primeng/card";
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        CardModule,
        ButtonModule,
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
  
export class AppModule { }

Выход:

Ссылка: https://primefaces.org/primeng/card

Picked AngularJS

Расширенная карта Angular PrimeNG Card

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ