Angular variable value change doesn't reflect in DOM

Question

I have an Angular component (SummaryComponent) which is injected with a service (LicenseRequestService). A variable (totalLicense) of the component is defined to be equal to a calculated field from the service.

The component class is written as below :

import { Component, OnInit } from '@angular/core';
import { LicenseRequestService } from '../shared/license-request.service';

@Component({
  selector: 'sg-summary',
  templateUrl: './summary.component.html',
  styleUrls: ['./summary.component.css']
})
export class SummaryComponent implements OnInit {

  constructor(private _service : LicenseRequestService) {

   }

   public totalLicense= this._service.licenseDetails.length


  ngOnInit(): void {
    
  }

  updateSummary(){
    const licenses= this._service.licenseDetails.length
    console.log("total players requested : " + players)
    this.totalLicense= players
  }

}

I have embeded the totalLicense value into the DOM as below :

<div>
    Total number of licenses is : {{totaLicense}}
</div>

<button type="submit" (click)="updateSummary()">Get licenses</button>

Everytime the service gets updated, I expect the DOM to reflect the updated value of totalLicense but it stays 0. However, when I click the button labeled Get licenses, the DOM is then updated and the totaLicense variable shows the new value in the browser.

Do I need to make any changes to make sure the value of totalLicense gets updated without clicking the button (which is the desired functionality)?

from where u are updating licenseDetails in LicenseRequestService ? — YogendraR
– YogendraR, Commented Oct 28, 2021 at 7:51

jgerstle · Accepted Answer · 2021-10-28 06:50:08Z

2

Your problem is you're not passing a reference you are passing a value. Basically if you have the following:

let x = 'test';
let y = x;
x = 'update';
console.log(y);

This code will output 'test', not 'update' because y is still pointing at the original value

There are three solutions I can think of offhand:

Reference the service itself in the html (you'd have to make it not private)
Add licenseDetails as a variable in your component instead. This way when you access the length variable it will be by reference, not by value
Use a getter (not suggested since it is an antipattern, since it causes the function to run on each change detection cycle)

answered Oct 28, 2021 at 6:50

jgerstle

1,6847 gold badges25 silver badges35 bronze badges

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

1 Comment

s_om Over a year ago

Thank you! referring the service in the html did the trick.

KEVAL PANCHAL · Accepted Answer · 2021-10-28 06:07:49Z

0

Try to put this public totalLicense= this._service.licenseDetails.length code constructor or ngOnInit

answered Oct 28, 2021 at 6:07

KEVAL PANCHAL

5454 silver badges16 bronze badges

2 Comments

s_om Over a year ago

Thank you for your response. That doesnt work either, I still have to click the button to update. I guess it is because when the component is generated , at that time the service doesnt have any value for the licenseDetails.length

KEVAL PANCHAL Over a year ago

Yes, It might be possible

Collectives™ on Stack Overflow

Angular variable value change doesn't reflect in DOM

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related