Ways to manage an interactive pricing structure chart in Angular?

In my application, users can choose from four different types of plans that are retrieved from the backend. Once a plan is selected, they are directed to a payment page. The pricing table page can be revisited, and if a user has already purchased a plan, the button text will change to "cancel subscription." I have been able to dynamically change the button text for all plans except when a subscription is canceled.

Although I have provided a link to a StackBlitz example, it may not fully demonstrate the functionality due to data being fetched from the backend. StackBlitz

I am looking for a solution to revert the button text back to 'Choose Plan' after a user cancels their subscription.

angulartypescriptngfor

Answer №1

To implement this in your HTML file, use the following code:

<div class="perks">
  <div class="d-flex actionButton">
    <button
      type="button"
      *ngIf="planIndex === i"
      (click)="cancelSubscription(plan)">
      Cancel Subscription
    </button> 
    <button
      type="button"
      *ngIf="planIndex !== i"
      (click)="selectSubscription(plan)">

      <span *ngIf="planIndex > i"> Upgrade </span>
      <span *ngIf="planIndex < i"> Downgrade </span>
      <span *ngIf="!planIndex"> Choose plan </span>
    </button>
  </div>
</div>

When retrieving subscriptions from the backend, assign the index of the subscribed plan as follows:

 this.planIndex = this.allSubscriptions.findIndex((sub) => sub.isSubscribed);

You can safely remove the setDynamicButtonText function.

Here's how it works:

  • If planIndex is null, all buttons display "Choose Plan"
  • If a subscribed plan is found, the corresponding button will show "Cancel Subscription", while higher indices indicate "Downgrade" and lower ones indicate "Upgrade"

Tip:

  • Avoid calling functions within template expressions to prevent infinite calls and bugs. Learn more here

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What strategies can be employed to improve generic inference skills?

Looking at the scenario provided below, how can we enhance code reusability in a manner similar to foobarA? interface F<T, U extends string> { t: T, f: (u: U) => void } declare const foo: <T, U extends string>(type: U) => F<T, U>; ...

typescript

The @angular/cli ng serve command freezes after a period of activity

My experience with Angular development started with @angular/cli@5 and ng serve always ran smoothly. However, after updating to version 7.0.0 and creating a project with Angular 7.0.0, I encountered an issue where Angular stopped recognizing changes in fil ...

angularubuntuangular-cli

The ForbiddenError has struck again, this time wreaking havoc in the realms of Node.js, Express.js

I am currently adapting this GitHub sample application to utilize Express instead of KOA. However, I am encountering an Access Denied issue when the / route in Express attempts to load the index.html. What specific modifications are required in the code be ...

javascriptnode.jsexpressangular

Resolving the Challenge of Disabling typescript-eslint/typedef in Angular 13 with ESlint

I started a fresh project in Angular 13 and configured typescript-eslint by running the command below: ng add @angular-eslint/schematic I made changes to my .eslintrc.json file where I disabled the rules for "typescript-eslint/typedef" and "typescript-esl ...

angulartypescripteslinteslintrctypescript-eslint

Once the submit button is clicked in Angular Dev Extreme, validation processes are triggered once more

Currently experiencing an issue on a page with textboxes and validations. After entering values into the textboxes and clicking submit, the values successfully pass to the database, but the validations continue to appear again upon submitting. This problem ...

angulardevextreme-angular

Guide on downloading Node modules to an Angular 2 project

I am trying to install a Git project located in the directory D:/myapp. I currently have npm version 3.10.10 and Node.js version 6.11 installed on my Windows machine. However, when I attempt to install all dependent node modules using the 'install npm ...

node.jsangularangular2-templatenpm-installgit-bash

How can I reload a form page in Angular 9 after making a POST request with HttpClient?

I'm currently working on an Angular 9 application and am facing an issue with refreshing the page after making a POST request using HttpClient. Below is my form and its corresponding component: <form #myForm="ngForm" (ngSubmit)="save(myForm)"> ...

angular

What is the process for incorporating a personalized SVG icon into a fontawesome library stored locally (fontawesome-all.js)?

I am trying to incorporate a custom SVG icon into my local fontawesome library (fontawesome-all.js) that is stored in my project's assets folder. I followed the instructions given on https://fontawesome.com/get-started but I am struggling to understan ...

javascripthtmlangularsvgfont-awesome

"Implementing an Angular unit test for a method that calls a service

**I am trying to test the following method using Jasmine & Karma. The requirement is to cover all lines of code. However, I am struggling to achieve full code coverage. Any suggestions on how to approach this?** I attempted calling the method directly, bu ...

angularjasminekarma-jasminekarma-runner

Contrast between utilizing and publishing, demanding and bringing in within Express

I have recently started learning Typescript and Express. I have a simple exported function that looks like this: export function testFunction(req: any, res: any) { console.log(req.body); return res.status(200).send('OK'); }; And ...

node.jstypescriptexpress

Converting TypeScript to ES5 in Angular 2: A Comprehensive Guide

I am currently diving into Angular 2 and delving into Typescript to create simple applications within the Angular 2 framework. What I have discovered is that with Typescript, we can utilize classes, interfaces, modules, and more to enhance our application ...

javascriptangulartypescript

Uploading a File using Angular HttpClient to CodeIgniter 3 API-Rest

I'm currently facing an issue while attempting to send a file from Angular-CLI to an API-Rest application built in Codeigniter3, as I am receiving an unknown error in response. Angular Code Service: constructor( private http: HttpClient) { } submitI ...

angularapirestcodeigniterrequest-headers

What is the best way to call an Angular component function from a global function, ensuring compatibility with IE11?

Currently, I am facing a challenge while integrating the Mastercard payment gateway api into an Angular-based application. The api requires a callback for success and error handling, which is passed through the data-error and data-success attributes of the ...

javascriptangulartypescriptmastercard

Ways to capture the selected item from an Angular 12 reactive dropdown list when a change event occurs

When working with an Angular 12 reactive form, I encountered a situation where I have a dropdown list that triggers the change event. The data in the dropdown list is not just a simple list of strings but of a specific Type. However, upon returning the se ...

angularrxjsreactive

Discover the accurate `keyof` for a nested map in TypeScript

Here is the code snippet I'm working on: const functions={ top1: { f1: () => 'string', f2: (b: boolean, n: number) => 1 }, top2: { f3: (b: boolean) => b } } I am looking to define an apply f ...

typescript

Error message stating: "A missing module (MODULE_NOT_FOUND) was detected in the nest.js code

Having a code base that runs smoothly on a Windows machine using node v10.16.3, I encountered an issue when trying to install the same code on a CentOS Linux box with node v12.16.3. The error message displayed is regarding a missing module '@angular-d ...

node.jsangularnpmnestjs

Tips for converting JSON String data to JSON Number data

Hello everyone, I am facing an issue with converting the 'review' value from String to a numerical format in JSON. This is causing problems when trying to perform calculations, leading to incorrect results. The scenario involves saving user comm ...

javascriptarraysjsontypescriptarraylist

Best practice for retrieving an object by its unique ID within an array of objects in Angular 2?

I am dealing with two arrays: categories and articles. Here is a visual representation of the arrays: categories = [{id: 1, name: 'Gadgets'}, {id: 2, name: 'Artificial Intelligence'}, {id: 3, name: 'Opinions'}]; articles ...

angularmean-stack

Testing Angular Components with Jasmine and Karma: When handling the 'onChange' event, the changeEvent parameter of type MatRadioChange should not be void and must be assigned to a parameter of type

Hey there, I was working on a test for a call where I am using to emit the event: onChange(eventName: MatRadioChange): void { this.eventName.emit(eventName.value); } Here is the test I have written for it: describe('onChange', (eventName: ...

angulartypescriptjasminekarma-jasmine

Enhancing ES6 capabilities with Angular polyfills

While exploring the Angular documentation and various online resources about Angular, I came across a question. If all code is written in Typescript, why would we need ES6 polyfills? My understanding is that webpack eventually transpiles the code to ES5, s ...

angulartypescriptecmascript-6