title: How to render placeholder template attributes on page
body: <p>I am building an Angular 9 app.
  In this app I let my users save &quot;placeholders&quot; in text into the database.</p>
  <p>I want to present these placeholders but replace it with real data when rendering.</p>
  <p>For example. The object that holds the data is called Model so normally I present the data on page like this which shows the users name.</p>
  <pre><code>{{model.fullname}}
  </code></pre>
  <p>Basically I want to save this placeholder into the database and then render it. So my question is how I can make {{model.fullname}} &quot;active&quot; when rendering the page even though it is coming from the database/JSON instead of being hard coded into the page.</p>
  <p><strong>Update</strong></p>
  <p>I tried the Pipe suggestion posted below and it kind of works. The problem is that it prints that real data alone and not in context inside the larger string. In other word, I need to <strong>replace</strong> placeholder value within the text at their real places within the string.</p>
  <p><em>This is the Pipe code:</em></p>
  <pre><code>import { Pipe, PipeTransform } from '@angular/core';
  @Pipe({
    name: 'template',
  })
  export class TemplatePipe implements PipeTransform {
    transform(value: string, args: any): any {
      if (value.indexOf('.name') !== -1) {
        return args.name;
      }
      if (value.indexOf('.id') !== -1) {
        console.log(args.id);
        return args.id;
      }
      return null;
    }
  }
  </code></pre>
  <p><em>This is a typical text that I want to use:</em></p>
  <pre><code>The name of the user is {{model.name}} and got the ID of {{model.id}}.
  </code></pre>
  <p><em>The result must be:</em></p>
  <pre><code>The name of the user is Paul Palmer and got the ID of 123456.
  </code></pre>