Counting the total number of items and the total price in an Angular reactive form array

Looking to determine the Item Total Price and Total Price in a medicine store invoice system. How can I retrieve the ItemTotal and SubTotal values? I have added Medicine items as lines, but unsure how to calculate the Total Price for all Items.

medicinepurchase.component.ts


export class MedicinePurchaseComponent implements OnInit {
  trial: any;
  ...
}

medicinepuechase.component.html


<form>
...
</form>

Trying to figure out the calculations for Item Total Price and Total Price within a Medicine store invoice system. Need help retrieving the ItemTotal and SubTotal values. Added Medicine items as lines but uncertain about calculating the Total Price for all Items.

angulartypescriptangular-material

Answer №1

To get the total price, all you need to do is loop through the controls in the FormArray and calculate the sum.

public calculateTotalPrice(): number {
  let totalPrice: number
  for (let control of medicineArray.controls) {
     totalPrice = totalPrice + itemTotal;
  }
  return totalPrice;
}

For more information on this topic, you can refer to this informative blog post

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

Angular - Applying styles to child components when parent components are hovered over

What is the best way to style a child component when hovering on a parent component, even across component boundaries in Angular 17? The traditional method of using parent:hover .child in the parent CSS doesn't seem to work on the child component. Is ...

cssangular

Capture the keyboard event for the delete button in Angular 2

I am dealing with multiple records displayed in a gridview and need to select and delete them simultaneously. Once the records are selected, I aim to remove them in one go. Does anyone have a solution on how to trigger the delete event in angular2 when t ...

angularevents

Guide on implementing Bootstrap tooltips using Bootstrap's *Content Delivery Network* in Angular

I have added bootstrap.min.css and bootstrap.min.js to my Angular project's index.html. I want to utilize Bootstrap tooltips, but I'm unsure how to do it without needing to npm install bootstrap Here is the element you can add a tooltip to: < ...

angularbootstrap-5

Issue: Unable to locate a differ that supports the object '[object Object]' of type 'object'. NgFor can only bind to Iterables like Arrays

I have successfully pulled data from the jsonplaceholder fake API and now I am attempting to bind it using Angular 2 {{}} syntax. However, I encountered an error that states: "Error: Cannot find a differ supporting object '[object Object]' of typ ...

angulartypescriptangular2-servicesangular-http

When choosing the child option, it starts acting abnormally if the parent option is already selected in Angular

I am encountering an issue while trying to select the parent and its children in the select option. The concept is to have one select option for the parent and another for the child. I have parent objects and nested objects as children, which are subCatego ...

javascripthtmlangulartypescript

Looking to organize, refine, and establish a default value with the help of rxjs

In my Angular application, I have an observable that is linked to a reactive forms dropdown control. My goal is to filter, sort, and display the default value. I've created two separate implementations - one for filtering and sorting without displayin ...

angularangular-reactive-forms

Issue with primeng dropdown not displaying the selected label

When using the editable dropdown with filter feature from PrimeFaces, I've noticed that selecting an option displays the value instead of the label. https://i.sstatic.net/8YFRa.png Here is the code snippet: <div class="col-md-5 col-xs-1 ...

javascriptangularprimeng

Tips for merging an ExpressJS server and Angular2

I am attempting to create a new angular2 application with NodeJS (Express) serving as the server. However, I have run into an issue where Express is attempting to use its own template engine and route requests, while Angular also utilizes routes and uses i ...

node.jsexpressangular

Upon selection, the first parameter is detected as undefined

I am dealing with a dropdown button that has an event handler: onSelect={this.handleSelect.bind(this)}> However, the first parameter I receive is undefined and the second parameter is a Proxy object with information about the event. I am confused as t ...

reactjstypescript

It’s not possible for Typescript to reach an exported function in a different module

Having trouble referencing and using exported methods from another module. I keep getting an error that says 'There is no exported member in SecondModule'. module FirstModule{ export class someClass{ constructor(method: SecondModule ...

angularjsvisual-studiotypescript

Paper-dropdown-menu component failing to render properly in web browser

Encountering an issue with the rendered HTML for a basic paper-dropdown-menu. Instead of displaying as a styled menu, the list items are just appearing as a plain list on the page. Upon clicking the rendered paper-input component within the dropdown, the ...

htmlangularpolymer

Share edited collection with Observer

The challenge Imagine creating an Angular service that needs to expose an Observable<number[]> to consumers: numbers: Observable<number[]>; Our requirements are: Receive the latest value upon subscription Receive the entire array every tim ...

javascriptangulartypescriptrxjsreactive-programming

Error encountered when using object literals in React with Typescript

I am facing an issue with a component that is supposed to render a row of data with a delete button for each row. When the delete button is clicked, it should update the state by filtering out the clicked row. However, I am encountering an error despite ge ...

reactjstypescript

Yep, implementing conditional logic with the `when` keyword and radio buttons

I seem to be encountering an issue with my implementation (probably something trivial). I am utilizing React Hook Form along with Yup and attempting to establish a condition based on the selection of a radio group. The scenario is as follows: if the first ...

javascriptreactjstypescriptyupreact-hook-form

Can you point me in the direction of the Monaco editor autocomplete feature?

While developing PromQL language support for monaco-editor, I discovered that the languages definitions can be found in this repository: https://github.com/microsoft/monaco-languages However, I am struggling to locate where the autocompletion definitions ...

javascripttypescriptmonaco-editor

Check the status when clicking on an event using Angular Material

I am working with an Angular element that involves a checkbox. <mat-checkbox class="btn-block" labelPosition="before" (change)="showOptions($event)" (click)="makeJSON($event.checked,i,j,k)"> </mat-chec ...

angulartypescriptangular-material

Using NavParams within a service component,

I'm facing a challenge in accessing NavParams within a provider, and simply importing NavParams is not solving the issue. Here's a brief overview of my application: users input their name and address, a pin is dropped on the map based on the add ...

typescriptfirebase-realtime-databaseionic3leaflet

The command 'prefix -g' is encountering an error and is not recognized as a valid command during the installation process of Angular

Microsoft Windows [Version 10.0.16299.309] (c) 2017 Microsoft Corporation. All rights reserved. C:\Users\Futluz>cd desktop/angular-cli-master/angular-cli-master C:\Users\Futluz\Desktop\angular-cli-master\angular-cli- ...

node.jsangular

What is the process of TypeScript module resolution within the Play framework?

In my Play project, I am interested in incorporating Angular 2 with TypeScript. Utilizing the sbt-typescript plugin and the angular2 WebJAR, I have encountered a situation where Play places the extracted WebJAR in target/web/public/main/lib/angular2. Ideal ...

playframeworktypescriptsbtangular

What's the best way to show a submenu when the main menu is scrollable?

I'm facing a challenge with the following issue: I am working with angular 8 and utilizing tieredMenu from primeng 8. The problem arises when I have a scroll, causing the tieredMenu's submenu to be hidden. Do you have any suggestions on how to ...

htmlcssangularprimeng