Shakti – Angular pricing tables

Introduction to Shakti Angular Pricing Tables

Congratulations on choosing Shakti's Angular pricing tables! Our pricing tables are highly customizable and easy to integrate with your Angular application, making it simple to provide clear and concise pricing information to your customers. This tutorial will guide you through the process of setting up and customizing the pricing tables to fit your unique needs.

Getting Started with Shakti Angular Pricing Tables

Before you start, make sure you have the following:

1. Angular 14 or higher installed.
2. npm and yarn packages installed.
3. Shakti Pricing Table package installed, by running the command: npm install @shakti/pricing-table

Step 1: Importing the Module

To use the pricing tables, you need to import the Shakti pricing table module in your Angular application. Add the following code to your imports section in your app.module.ts file:

import { ShaktiPricingTableModule } from '@shakti/pricing-table';

@NgModule({
  imports: [
    // Your other imports...
    ShaktiPricingTableModule
  ]
})
export class AppModule { }

Step 2: Creating the Pricing Table Component

Now that the module is imported, you can create the pricing table component. You can do this by using the shakti-pricing-table tag and passing the required parameters:

<div class="pricing-table-section">
  <shakti-pricing-table>
    <shakti-plan>
      <plan-label>Basic</plan-label>
      <plan-features>
        <ul>
          <li><i class="far fa-circle"></i> Up to 10 users</li>
          <li><i class="far fa-circle"></i> Limited storage</li>
        </ul>
      </plan-features>
      <plan-price><b>$9.99/month</b></plan-price>
    </shakti-plan>
  </shakti-pricing-table>
</div>

Customizing the Pricing Table Component

You can customize the appearance and behavior of the pricing table component by passing props to the shakti-pricing-table tag. Here's an example of how to add a background image:

<div class="pricing-table-section">
  <shakti-pricing-table [imageBackground]="true" [imageUrl]="'assets/path-to-image.jpg'">
    <shakti-plan>
      <!-- Your plans -->
    </shakti-plan>
  </shakti-pricing-table>
</div>

Adding Conditional Styles

You can conditionally apply styles to each plan by using the [bgColor] or [textColor] prop:

<shakti-plan *ngFor="let plan of plans" [bgColor]="plan.monthly? 'light-green' : 'light-grey'" [textColor]="plan.monthly? 'black' : 'black'">
  <!-- Plan contents -->
</shakti-plan>

Using Angular Services or Forms

You can retrieve pricing data from your database using an Angular service. Then, you can populate your pricing table with dynamic data. Here's an example using an Angular service to get pricing data:

import { Component } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { ShaktiPricingTableService } from '@shakti/pricing-table';

@Component({
  selector: 'app-pricing-table',
  templateUrl: './pricing-table.component.html',
  styleUrls: ['./pricing-table.component.css']
})
export class PricingTableComponent {

  plans: any = [];

  constructor(private readonly httpClient: HttpClient, private readonly pricingTableService: ShaktiPricingTableService) { }

  ngAfterViewInit(): void {
    this.httpClient.get<any>('/api/pricing/data')
     .pipe(shareReplay({refCount: true})) // For demo purposes. Adjust according to your data setup.
     .subscribe(result => {
        this.plans = result;
        // Update the pricing table content
        this.prices = this.plans;
      });
  }

  get plans(): Array<{ monthly: boolean }> {
    return this._plans;
  }

  set plans(value: Array<{ monthly: boolean }>) {
    this._plans = value;
    this.prices = this.plans;
  }
}

Conclusión

In this tutorial, you have learned how to use the Shakti Angular pricing tables. You have seen how to import the module, create the pricing table component, customize its appearance and behavior, and use conditional styles. Additionally, we explored how to integrate Shakti pricing tables with an Angular service or a forms-based application. You're now ready to seamlessly implement pricing tables in your own Angular application. If you have any questions, refer to the Shakti documentation or reach out to our support team. Happy coding!