title: Angular proper way of displaying model calculated data on template
body: <p>Considering a <code>Person</code> model, for example:</p>
  <pre><code>class Person {
    firstName: string;
    lastName: string;
  }
  </code></pre>
  <p>and a calculated/derived data from it, such as <code>fullName</code> that is <code>`${firstName} ${lastName}`</code> (this is just an example because the calculation could be more complex and heavy).</p>
  <p>What is the proper way to display the calculated data on components template? Considering that:</p>
  <ul>
  <li>I want to respect DRY as much as possible, I don't want duplicate my model or write many times on templates <code>{{ person.firstName }} {{ person.lastName }}</code>;</li>
  <li>It is not viable to use getters or methods on template, due to performance issue, even using <code>OnPush</code> change detection strategy;</li>
  <li>The calculation logic must stay in the model, because I need to use it somewhere in the TS code, so I don't want to use pure pipes, or the <a href="https://github.com/angular/angular/issues/20472" rel="nofollow noreferrer">proposed component computed properties</a> (if at some time will be implemented) or some workaround to get a similar behavior.</li>
  </ul>
  <p>I have considered to use an immutable approach to the <code>Person</code> model, and calculate derived properties only in the constructor:</p>
  <pre><code>class Person {
    firstName: string;
    lastName: string;
    readonly fullName: string;
    constructor(firstName: string, lastName: string) {
      this.firstName = firstName;
      this.lastName = lastName;
      this.fullName = `${firstName} ${lastName}`;
    }
  }
  </code></pre>
  <p>Obviously with this approach I can't do <code>person.firstName = 'Changed'</code> to also update <code>fullName</code> property, but I have to do <code>person = new Person('Changed', person.lastName)</code>.<br />
  I've considered to apply <code>readonly</code> also to <code>firstName</code> and <code>lastName</code> to ensure the immutability pattern, but in this way I'm not able to use <code>Person</code> model in another template context where, for example, I need to bind <code>firstName</code> and <code>lastName</code> to some inputs models.</p>
  <p>I'm really interested to know what is the standard/proper/best practice way to properly handle this common situation.</p>