title: Using setters and getter variables on HTML (angular component)
body: <p>I created a simple angular component to test the usage of a variable that uses a getter/setter style:</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    templateUrl: './app.component.html',
    styleUrls: [ './app.component.css' ]
  })
  export class AppComponent  {
    _name = 'Variable Example';
    get name(): string {
      console.log("GET!!!");
      return this._name;
    }
  
    set name(value:string): void {
      this._name = value;
    }
  }
  </code></pre>
  
  <p>Then, I use this variable on the html:</p>
  
  <pre><code>&lt;p&gt;
    {{ name }}
  &lt;/p&gt;
  </code></pre>
  
  <p>What I noticed is that the <code>get name()</code> is called 4 times (check live in <a href="https://stackblitz.com/edit/angular-8conqj?file=src%2Fapp%2Fapp.component.html" rel="noreferrer">here</a>)</p>
  
  <p>There is any best practices rules which points out that <code>getter</code> and <code>setters</code> shouldn't be used on html components? Will I have performance issues using this approach?</p>
  
  <p>Thank you!</p>
  
  <p>PS: This is not the real scenario, it just a small example of what I'm doing.</p>