title: Angular 2/4/5/6 - Transforming the innerHTML of a custom component on its component class side
body: <p>I want to make the following basic component: <code>card.component</code> to take whatever the user defines on it's <code>innerHTML</code> into its component class so it can transform it and display it on its template.</p>
  
  <p>This is how the user is going to use this component:</p>
  
  <pre><code>&lt;app-card&gt;hello world, this is a sample text&lt;/app-card&gt;
  </code></pre>
  
  <p>Here you have a base project on <a href="https://stackblitz.com/edit/angular-cmdpgh?file=src%2Fapp%2Fcomponents%2Fcard%2Fcard.component.ts" rel="nofollow noreferrer">StackBlitz.com</a> which you can fork to make it work.</p>
  
  <p><a href="https://stackblitz.com/edit/angular-cmdpgh?file=src%2Fapp%2Fcomponents%2Fcard%2Fcard.component.ts" rel="nofollow noreferrer">https://stackblitz.com/edit/angular-cmdpgh?file=src%2Fapp%2Fcomponents%2Fcard%2Fcard.component.ts</a></p>
  
  <p>Here you have a preview of the code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import { Component, OnInit } from '@angular/core';
  
  @Component({
      selector: 'app-card',
      templateUrl: 'card.component.html',
      styleUrls: [ 'card.component.css' ],
  })
  export class CardComponent implements OnInit {
  
    private content: string;
  
    ngOnInit() {
      // please, override this to get the real innerHTML on: 'app.component.html'
      let innerHTML = 'testing';
      this.content = CardComponent.complexStrTransform(innerHTML);
    }
    private static complexStrTransform(str: string): string {
      // complex transformations here
      let result = '';
      for (let i = 0; i &lt; str.length; i++) {
        let c = str[i];
        result += c;
        result += c.toUpperCase();
        result += '|';
      }
      result = '!!!' + result + '!!!';
      return result;
    }
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-card&gt;
      &lt;mat-card-content&gt;
          {{content}}
      &lt;/mat-card-content&gt;
      &lt;mat-card-actions&gt;
          &lt;button mat-button&gt;LIKE&lt;/button&gt;
          &lt;button mat-button&gt;SHARE&lt;/button&gt;
      &lt;/mat-card-actions&gt;
  &lt;/mat-card&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>where on the location of: <code>{{content}}</code> the component should display the result of: <code>complexStrTransform(...)</code>.</p>
  
  <p>I have seen on some places that it is possible to use: <code>&lt;ng-content&gt;&lt;/ng-content&gt;</code> to specify on the component's template where you want to put the <code>innerHTML</code> but I think that's not the best bet here because I need to transform that <code>innerHTML</code> with very complex changes that can be done only on the component class.</p>
  
  <p>Any suggestions?</p>
  
  <p>Thank you for your attention.</p>