title: How to concat a string after using slice pipe
body: <p>I'm new to Angular. I want to cut short strings that are longer than 15 characters (say) and then add <code>...</code> at the end.</p>
  <p>For eg:</p>
  <blockquote>
  <p>Name: Tanzeel,</p>
  <p>Role: Intern</p>
  <p>Address: Bangal...,</p>
  <p>Likes: C, CPP, ...,</p>
  </blockquote>
  <p>I'm using <code>p-chips</code> from PrimeNg to display some tags. I'm not getting any error. Actually I'm not getting anything, my web page is just blank. Even the console log is also clean. Here's my code:</p>
  <pre><code>&lt;p-chips [(ngModel)]=&quot;tokens&quot;&gt;
    &lt;ng-template let-item pTemplate=&quot;item&quot;&gt;
      {{item | slice:0:15+'...'}}
    &lt;/ng-template&gt;
  &lt;/p-chips&gt;
  </code></pre>
  <p>And here's the <a href="https://stackblitz.com/edit/angular-ewagu3" rel="nofollow noreferrer">stackblitz</a> for the same. The code works when I remove <code>+...</code> but then there was no <code>...</code> concatenation seen (obviously). Please point of my mistake. However, In a separate branch, I created my own custom pipe for the same from this question:</p>
  <p><a href="https://stackoverflow.com/questions/60993211/how-to-cut-short-long-strings-while-rendering-using-typescript/60993632#60993632">How to cut short long strings while rendering using Typescript</a></p>
  <p>And here's the code.</p>
  <p><strong>EllipsisPipe.component.ts</strong></p>
  <pre><code>import { Pipe } from '@angular/core';
  import { SlicePipe } from '@angular/common';
  
  @Pipe({
    name: 'ellipsis'
  })
  export class EllipsisPipe extends SlicePipe {
    constructor () {
      super();
    }
    transform(value: string, maxLength: number): any {
      const suffix = value &amp;&amp; value.length &gt; maxLength ? &quot;...&quot; : &quot;&quot;;
      return super.transform(value, 0, maxLength) + suffix;
    }
  }
  </code></pre>
  <p>And It is working perfectly. You can see the <a href="https://stackblitz.com/edit/angular-v8yp86" rel="nofollow noreferrer">stackblitz</a> for this also. But when I showed this to my Tech lead, She called me an idiot for re-inventing the wheel. :-( She told me to use <code>slice</code> or anything which is provided by Angular itself. Please correct my mistake. (Please pardon me If I'm really asking a stupid question).</p>
  <p>P.S: I got some help from this - <a href="https://stackoverflow.com/questions/44669340/how-to-truncate-text-in-angular2">How to truncate text in Angular2?</a></p>