title: How to update data in html when variable value varies
body: <p>I am working on an angular app where I am displaying data of that variable <strong>this.result</strong> using one way data binding like <strong>{{this.result}}</strong>. When pressing submit, it will call one function which alter value of <strong>this.result</strong>. 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 <strong>document.getElementById('').innerHTML = 'abcd'</strong>, but I read some where you should not do innerHTML, getElementById in angular.</p>
  
  <p>So, I have 2 question</p>
  
  <ul>
  <li>How to do instead of DOM Manipulation?</li>
  <li>Why not to do DOM manipulation? isn't it Angular internally uses DOM Manipulation?</li>
  </ul>
  
  <p>I am doing a like button wh</p>
  
  <p>Code snippet:</p>
  
  <p>HTML File</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;div style="text-align:right;border-top:1px solid black;border-bottom:1px solid black" [ngClass]="isLiked == true ? 'liked' : 'not-liked'"&gt;
     {{ this.likedBy}} liked&lt;i class="fa fa-thumbs-up" style="font-size:30px;" aria-hidden="true"  (click)="toggle()"&gt;&lt;/i&gt;&amp;nbsp;
  &lt;/div&gt;  
  </code></pre>
  
  <p>TypeScript file</p>
  
  <pre class="lang-js prettyprint-override"><code>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)
  }
  </code></pre>
  
  <p>In Console, I can see the field value is changing</p>