How to update data in html when variable value varies

Question

I am working on an angular app where I am displaying data of that variable this.result using one way data binding like {{this.result}}. When pressing submit, it will call one function which alter value of this.result. but it is not changing HTML view. It is showing old data. I guess this is happeing because I need to refresh HTML. For temporary fix I can do document.getElementById('').innerHTML = 'abcd', but I read some where you should not do innerHTML, getElementById in angular.

So, I have 2 question

How to do instead of DOM Manipulation?
Why not to do DOM manipulation? isn't it Angular internally uses DOM Manipulation?

I am doing a like button wh

Code snippet:

HTML File

<div style="text-align:right;border-top:1px solid black;border-bottom:1px solid black" [ngClass]="isLiked == true ? 'liked' : 'not-liked'">
   {{ this.likedBy}} liked<i class="fa fa-thumbs-up" style="font-size:30px;" aria-hidden="true"  (click)="toggle()"></i>&nbsp;
</div>

TypeScript file

toggle()
{
   this.isLiked = !this.isLiked;
   if(this.isLiked === true)
   {
      console.log('You liked this idea now');
      this.likedBy.push(this.adalService.userInfo.profile.email);

   }else{
      console.log('You unliked this idea now');
      this.likedBy.splice(this.likedBy.indexOf(this.adalService.userInfo.profile.email), 1);
   }
   console.log('Latest liker :- ' + this.likedBy)
}

In Console, I can see the field value is changing

Provide code snippet of your html template and your component typescript. — penleychan
– penleychan, Commented Feb 14, 2019 at 21:04
Here I am liking and unliking button. It will first check if useremail is not in the likedBy list and user press like button it will add usermail to that variable, and if user unlike it will remove it from likedBy var — Satish Patro
– Satish Patro, Commented Feb 14, 2019 at 21:13
youd don't need "this" in html {{ this.likedBy}} -> {{ likedBy }}, another thing "this.likedBy.push" seems to be an array. — robert
– robert, Commented Feb 14, 2019 at 21:19
Yeah, this is an array of usermail who liked. And removing this is also working like displaying but not updating still. "likedBy: String[];" — Satish Patro
– Satish Patro, Commented Feb 14, 2019 at 21:23
@robert is right. It shouldnt be {{this.likedBy}}. remove the "this". it should be {{likedBy}} in HTML. — Sarah
– Sarah, Commented Feb 14, 2019 at 21:25

Todarmal · Accepted Answer · 2019-02-14 21:35:13Z

In angular, there is no need to refresh the HTML page for getting the updated value from manipulations in the .ts.

I will rewrite your code here with comments so that you understand it better.

HTML

<div style="text-align:right;border-top:1px solid black;border-bottom:1px solid black" [ngClass]="isLiked == true ? 'liked' : 'not-liked'">
  <div *ngFor="let likedByItem of likedBy">
  {{likedByItem}},
  </div> liked<i class="fa fa-thumbs-up" style="font-size:30px;" aria-hidden="true"  (click)="toggle()"></i>&nbsp;
</div>

Typescript file

toggle()
{
  this.isLiked = !this.isLiked;
  if(this.isLiked === true)
  {
     console.log('You liked this idea now');
     this.likedBy.push(this.adalService.userInfo.profile.email);
  }
  else
  {
     console.log('You unliked this idea now');
     this.likedBy.splice(this.likedBy.indexOf(this.adalService.userInfo.profile.email), 1);
  }
     console.log('Latest liker :- ' + this.likedBy)
}
// Here likedBy is an array. 
// For displaying this array you have to use *ngFor directive in html.

Please comment below if you have any problem understanding this.

Satish Patro · Accepted Answer · 2019-02-15 05:37:48Z

0

I did like this

<div style="text-align:right;border-top:1px solid black;border-bottom:1px solid black" [ngClass]="isLiked == true ? 'liked' : 'not-liked'">
    <i class="fa fa-thumbs-up" style="font-size:30px;" aria-hidden="true"  (click)="toggle()"></i>&nbsp;{{ this.likedBy}}
</div>

Changing position of variable before to after is working.

Is it a bug or is there any explanation?

answered Feb 15, 2019 at 5:37

Satish Patro

4,5942 gold badges38 silver badges62 bronze badges

Collectives™ on Stack Overflow

How to update data in html when variable value varies

2 Answers 2

Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Related