title: Add dynamic styling to received data Angular Material
body: <p>I want to add some css styling to highlight each text like:
  <a href="https://i.stack.imgur.com/kSyZE.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/kSyZE.png" alt="enter image description here" /></a></p>
  <p>I do not want any cross button and I don't want to give user any option to add tags. I am receiving data from RESTful api in Angular 8 as text separated by , (comma) and I am displaying data as text. It looks like a paragraph. I want to replace each text sentence like this by splitting it on , (comma).</p>
  <p>TS code:</p>
  <pre><code>this.user.data = response.Items;
  for (let i = 0; i &lt;= this.user.data.length; i++){
       this.splitString[i] = this.user.data[i].abc.split(',');
       this.finalSplittedString = [...this.splitString[i]];
   }
  </code></pre>
  <p>I am receiving an array of object and I am storing it in <code>user.data</code> Now I am splitting the string on object parameter <code>abc</code>.
  JSON OBJECT</p>
  <pre><code>[{&quot;names&quot;:&quot;Hello&quot;,&quot;abc&quot;:&quot;abcdef,ghijk,lmnop&quot;},{&quot;names&quot;:&quot;World&quot;,&quot;abc&quot;:&quot;qrstuv,wxyz&quot;}]
  </code></pre>
  <p>I want to split the <code>ABC</code> and write them as shown in image below. Also, they should be displayed in correct table row.</p>
  <p>HTML Code</p>
  <pre><code>&lt;ng-container matColumnDef=&quot;abc&quot;&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; ABC &lt;/th&gt;
              &lt;td mat-cell *matCellDef=&quot;let element&quot; class=&quot;addTag&quot;&gt; {{element.abc}}&lt;/td&gt;
          &lt;/ng-container&gt;
  </code></pre>
  <p>How can I bind the new splitted sting here?</p>