how to Dynamically generate different variables in Angular?

Question

I am selecting two checkboxes and the amount is getting calculated in Total Claimed in the 1st div but 2 nd div also the amount is getting calculated. The reason I know; Its coz the div is created using array and I have one common variable. Now the issue arises how to create a dynamic variable ?

In below code, you will find {{claimed}} which is the common variable and I need this to be dynamic:

<p>Total Claimed: [<span [ngClass]="{'text-success': claimed <= d.program_max_limit, 'text-warning': claimed > d.program_max_limit}">{{claimed | number : '2.'}}&nbsp;</span> Of {{d.program_max_limit | number : '2.'}}]</p>

component.ts This is the function of the calculation portion:

  calc(event,val, id) {
    console.log(val,id)
    var i=0;
    if(id == event.target.value){
       if(event.target.checked ){ 
        this.claimed = parseInt(this.claimed) + parseInt(val);
        if (this.claimed > this.max_amount) {
          this.push.showError("You Have Reached the Maximum Limit");
          this.isDisabled = true;
          this.checkForm.reset();
          this.claimed = 0;
        } else {
          this.isDisabled = false;
        }
      } else {
        this.claimed = parseInt(this.claimed) - parseInt(val);
      }

    }

@GouravGarg no. the answer is given by Eliseo, But anyway thanx — GRV
– GRV, Commented Apr 6, 2020 at 9:07

Eliseo · Accepted Answer · 2020-04-05 18:50:42Z

1

define a variable type array of boolean and use in the table.

check:boolean[]=[]; //<--see that you equal to an array

I suppose you has some like

<tr *ngFor="let item of listItems;let i=index">
<td>{{item.invoiceAmmount}}</td>
...
<td><input type="checkbox" [(ngModel)]="check[i]"></td>
</tr>

Then you can use a getter to total

get total()
{
   let total=0;
   this.listItems.forEach((x,index)=>{
     if (check[index])
         total+=x.invoiceAmmount;
   })
   return total;
}

And in your .html

Total:{{total}}
<div *ngIf="total>max_ammount">You has execeded tha ammout!</div>

NOTE: If you dont want use a getter you can use

<td><input type="checkbox" [ngModel]="check[i]"
                           (ngModelChange)="check[i]=$event;getTotal()">
</td>

getTotal()  //<--your function getTotal
{
       let total=0;
       this.listItems.forEach((x,index)=>{
         if (check[index])
             total+=x.invoiceAmmount;
       })
       this.total=total //<--store the total in a variable "total"
}

edited Apr 5, 2020 at 18:50

answered Apr 5, 2020 at 18:44

Eliseo

58.9k4 gold badges39 silver badges82 bronze badges

Sign up to request clarification or add additional context in comments.

7 Comments

GRV Over a year ago

Thanks for the answer. I have applied it, but if user check[0], it is getting checked in two boxes simultaneously

Eliseo Over a year ago

the first row is check[0], the second one check[1], the trhird check[2], see that use ;let i=index and [ngModel]="check[i]"

GRV Over a year ago

I agree but there is no 3rd checkbox, wait i 'll show you my schema. i'll edit my answer

Eliseo Over a year ago

sure, you has so many "checks" as number of rows has your table

GRV Over a year ago

I have edited the answers and thnx for your efforts. I really appreciate it

|

Collectives™ on Stack Overflow

how to Dynamically generate different variables in Angular?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related