Angular Pricing Card

About this module

An Angular pricing card component with `@Input` plan data and a highlighted tier flag.

Installation

1. 1

   Install Angular

   Create or open an Angular project (Angular 16+ for standalone components).

   npx @angular/cli@latest new my-app --standalone

2. 2

   Create the component files

   Create PricingCardComponent.component.ts, .html and .scss and paste the matching sources below.

3. 3

   Declare it

   Import the component into your standalone component or NgModule.

   import { PricingCardComponentComponent } from "./pricing-card-component/PricingCardComponent.component";
   
   @Component({
     imports: [PricingCardComponentComponent],
     // ...
   })

4. 4

   Use it

   Render the component in a template.

   <app-pricing-card-component></app-pricing-card-component>

Usage

1. 1

   Import

   Import PricingCardComponentComponent where needed.

   import { PricingCardComponentComponent } from "./pricing-card-component.component";

2. 2

   Render

   Add the selector to your template.

   <app-pricing-card-component></app-pricing-card-component>