Determining Cost Using Quantity and Option Changes in Angular 4

Question

Determining Cost Using Quantity and Option Changes in Angular 4

Task
In the shopping cart, there is a list of items with options, quantities, and prices. The goal is to calculate the total price based on any changes in the quantity and option of an item.

Investigation I included [(ngModel)] for 2-way data binding, but for some reason, the page keeps loading and then crashes without any error message. Removing the ngModel attribute allows the page to load successfully.

<span class="price col-1 pull-right" >{{ orderType*price}}</span>
<div class="qty" style="margin:0;">
     <span class="spinner">
        <span class="sub">-</span>
        <input type="number" id="qty" name="qty" min="1" max="100" 
               value="1" class="qty-spinner" [(ngModel)]="quantity" />
        <span class="add">+</span>
     </span>
 </div>
 <div class="type">
     <label class="radio inline" *ngFor="let option of item.options; let k = index"> 
     <input id="{{'toggle-half-'+item.id+'-'+j}}" type="radio" 
            name="{{'option-toggle-'+item.id+'-'+j}}" [value]="option.value" 
            [checked]='k===0' [(ngModel)]="orderType" />
     <span>{{option.title}} </span> 
     </label>
 </div>

TypeScript Implementation

quantity:number;
orderType:number;
price:number;

constructor() {
    this.quantity = 1;
    this.price = 0;
}

Controls Utilized
1) Number Control with input type number for quantity input.
2) Radio Controls for Options [Half/Full]
3) Span element for displaying the calculated price.

Desired Outcome
The current price, set at 0, should update when either the quantity or option is modified.
Example values for option [Half] = 10
Example values for option [Full] = 20

Please provide guidance on how to execute this. Is the above logic and implementation correct?

Thank you in advance

javascript angular typescript

Answer 1

Answer №1

The variable option is currently being used in the ngFor directive. Refer to line:

<label class="radio inline" *ngFor="let option of item.options; let k = index">

Please use a different variable for the ngModel, for example:

<input id="{{'toggle-half-'+item.id+'-'+j}}"  
       type="radio" 
       name="{{'option-toggle-'+item.id+'-'+j}}" 
       [value]="option.value"
       [(ngModel)]="selectedOption" />

Refer to the examples in the documentation;

EDIT

Additionally, you are binding the checked attribute while using an ngModel. Instead of that, initialize the ngModel with the desired value, like this:

selectedOption = item.options[0].value

Answer 2

The variable option is currently being used in the ngFor directive. Refer to line:

<label class="radio inline" *ngFor="let option of item.options; let k = index">

Please use a different variable for the ngModel, for example:

<input id="{{'toggle-half-'+item.id+'-'+j}}"  
       type="radio" 
       name="{{'option-toggle-'+item.id+'-'+j}}" 
       [value]="option.value"
       [(ngModel)]="selectedOption" />

Refer to the examples in the documentation;

EDIT

Additionally, you are binding the checked attribute while using an ngModel. Instead of that, initialize the ngModel with the desired value, like this:

selectedOption = item.options[0].value

Answer 3

Answer №2

Update: After examining the provided code sample from jkris' response, it appears that utilizing value for radio inputs is appropriate. Nevertheless, my hunch persists that combining checked with [(ngModel)] may trigger an update loop.

I observed that you are linking checked alongside the NgModel binding. Have you tried removing it to see if the desired functionality remains intact without causing any crashes?

<input type="number" class="qty-spinner" min="1" max="100" 
       name="quantity" [(ngModel)]="quantity" />


<input type="radio" 
       [value]="option.value" name="option" [(ngModel)]="option" />

If not, an alternative approach could involve using [checked] and (click) (or a similar event) bindings instead of NgModel.

Answer 4

Update: After examining the provided code sample from jkris' response, it appears that utilizing value for radio inputs is appropriate. Nevertheless, my hunch persists that combining checked with [(ngModel)] may trigger an update loop.

I observed that you are linking checked alongside the NgModel binding. Have you tried removing it to see if the desired functionality remains intact without causing any crashes?

<input type="number" class="qty-spinner" min="1" max="100" 
       name="quantity" [(ngModel)]="quantity" />


<input type="radio" 
       [value]="option.value" name="option" [(ngModel)]="option" />

If not, an alternative approach could involve using [checked] and (click) (or a similar event) bindings instead of NgModel.

Answer 5

Answer №3

Uncertain as to the reason for the crash, but if in your position, I would consider altering the constructor

constructor() {
    this.quantity = 1;
    this.price = 0;
}

Instead of this, I suggest utilizing ngInit since it allows for two-way binding.

     import { OnInit } from '@angular/core';

        export class myClas implements OnInit {

        ngOnInit() {
            this.quantity = 1;
            this.price = 0;
        }

    }

Furthermore, ensure that the radio button and input type number actually return values of type number. It might be advisable to initially use strings and then convert them to the desired number type afterward. Alternatively, using a pipe could also be beneficial. Incorrect type conversion can sometimes lead to performance issues. Therefore, why not try:

quantity:string;
orderType:string;
price:string;

initially and then perform the number conversions later on?

Answer 6

Uncertain as to the reason for the crash, but if in your position, I would consider altering the constructor

constructor() {
    this.quantity = 1;
    this.price = 0;
}

Instead of this, I suggest utilizing ngInit since it allows for two-way binding.

     import { OnInit } from '@angular/core';

        export class myClas implements OnInit {

        ngOnInit() {
            this.quantity = 1;
            this.price = 0;
        }

    }

Furthermore, ensure that the radio button and input type number actually return values of type number. It might be advisable to initially use strings and then convert them to the desired number type afterward. Alternatively, using a pipe could also be beneficial. Incorrect type conversion can sometimes lead to performance issues. Therefore, why not try:

quantity:string;
orderType:string;
price:string;

initially and then perform the number conversions later on?

Answer 7

Answer №4

The problem has been successfully resolved. I had placed the code snippet within a div tag that included a *ngFor directive, iterating through a list of items.

Problem
To split the list of items into 2 columns using "div.col-md-6", I created a function that returned two arrays, each containing a set of items. The intention was to iterate through each array and display the items in separate columns.

I couldn't figure out why there was an issue only when I added the ngModel tag, which shouldn't have caused any problems. Nonetheless, removing the splitting function solved the issue for me.

Thank you to everyone for your assistance and support.

Answer 8

The problem has been successfully resolved. I had placed the code snippet within a div tag that included a *ngFor directive, iterating through a list of items.

Problem
To split the list of items into 2 columns using "div.col-md-6", I created a function that returned two arrays, each containing a set of items. The intention was to iterate through each array and display the items in separate columns.

I couldn't figure out why there was an issue only when I added the ngModel tag, which shouldn't have caused any problems. Nonetheless, removing the splitting function solved the issue for me.

Thank you to everyone for your assistance and support.

Determining Cost Using Quantity and Option Changes in Angular 4

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Combining PHP, Javascript, and Ajax all in one powerful code snippet

Enhancing the validation of multiple selects using jQuery

Troubleshooting: Vue.js custom select element not responding to blur event

MDX is revolutionizing Next app routing with the introduction of 'use client' functionality

Displaying the countdown of days and hours until a specific date is just a matter of using

Creating a large and spacious modal in Angular using ngx-bootstrap

Retrieve data from an ASP.NET Web API endpoint utilizing AngularJS for seamless file extraction

Come back to Angular 2 on your return function

Concealing tooltip when button is clicked using jQuery

hybrid application combining AngularJS with Angular 17 and above versions

Storing information on the webpage when it is refreshed

Sending the ID of a mapped button to a component

What could be causing this JavaScript code not to run?

How to change a string from utf-8 to iso-8859-1 using Javascript

Convert a single object into a JSON string representation on each line

arrange the elements in a specified sequence

Understanding and parsing JSON with object pointers

What could be the reason for the validation failure?

What are the benefits of incorporating NgRx in Angular, even when data is consistently synchronized through two-way data binding?

I possess a solitary div element that requires dynamic replication