PricingComponent

The PricingComponent is an Angular component designed to display pricing cards with feature lists, prices, and call-to-action buttons. It supports discounts, highlights, and interactive icons for an engaging presentation.

Features

Pricing Tiers: Displays multiple pricing options with individual features.
Highlighting: Supports highlighting specific plans to draw attention (e.g., "Bestseller").
Feature Icons: Uses Lucide icons for feature availability (checkmark or cross).
Responsive Design: Adjusts layout dynamically based on the number of pricing cards and screen size.
Call-to-Action Buttons: Includes customizable buttons with links for purchasing or learning more.

Usage

Step 1: Import the Component

Include the PricingComponent in your Angular module or component.

import { PricingComponent } from "src/app/components/pricing/pricing.component";
 
@Component({
  ...
  imports: [..., PricingComponent],
  ...
})

Step 2: Add the Template

Add the PricingComponent in your HTML template:

<pricing></pricing>

Configuration

Data Interface

The component accepts an array of pricing card data defined using the PricingCardData interface.

Interface Definition

interface PricingCardData {
  title: string; // Title of the pricing plan
  price: number; // Current price of the plan
  discountedPrice?: number; // Optional: Original price before discount
  features: { name: string; enabled: boolean }[]; // List of features with their availability
  buttonText: string; // Text displayed on the action button
  buttonLink: string; // URL for the button action
  isHighlighted: boolean; // Whether the plan is highlighted
  highlightedText?: string; // Optional: Text displayed on the highlight chip
}

Example Data

cardsData: PricingCardData[] = [
  {
    title: 'Starter',
    price: 147,
    discountedPrice: 247,
    features: [
      { name: 'Angular Boilerplate', enabled: true },
      { name: 'SEO Optimization', enabled: true },
      { name: 'Mailgun Email Integration', enabled: true },
      { name: 'Stripe Payment Gateway Integration', enabled: true },
      { name: 'MongoDB Integration', enabled: true },
      { name: 'Google OAuth & Magic Links Authentication', enabled: true },
      { name: 'Ready-Made Components & Animations', enabled: true },
      { name: 'AI-powered features', enabled: true },
      { name: 'Discord Community', enabled: false },
      { name: '24 hours support', enabled: false },
      { name: 'Lifetime Updates', enabled: false },
    ],
    buttonText: 'Get DevRocket',
    buttonLink: 'https://devrocket.ai/',
    isHighlighted: false,
  },
  {
    title: 'All-in',
    price: 197,
    discountedPrice: 297,
    features: [
      { name: 'Angular Boilerplate', enabled: true },
      { name: 'SEO Optimization', enabled: true },
      { name: 'Mailgun Email Integration', enabled: true },
      { name: 'Stripe Payment Gateway Integration', enabled: true },
      { name: 'MongoDB Integration', enabled: true },
      { name: 'Google OAuth & Magic Links Authentication', enabled: true },
      { name: 'Ready-Made Components & Animations', enabled: true },
      { name: 'AI-powered features', enabled: true },
      { name: 'Discord Community', enabled: true },
      { name: '24 hours support', enabled: true },
      { name: 'Lifetime Updates', enabled: true },
    ],
    buttonText: 'Get DevRocket',
    buttonLink: 'https://devrocket.ai/',
    isHighlighted: true,
    highlightedText: '🔥 Bestseller',
  },
];

Icons and Highlighting

Feature Icons

The component uses the Lucide Angular library for feature availability icons:

Check (Check icon): Indicates the feature is included.
Cross (X icon): Indicates the feature is unavailable.

Example Import

import { Check, X } from "lucide-angular";

Highlighting Plans

To highlight a specific plan:

Set isHighlighted: true in the pricing card data.
Optionally, include a highlightedText property for custom text (e.g., "🔥 Bestseller").

PricingComponent

On this page