Angular2 trying to slice string object using SlicePipe in template
<p>Ref : <a href="https://angular.io/docs/js/latest/api/common/SlicePipe-class.html" rel="nofollow">https://angular.io/docs/js/latest/api/common/SlicePipe-class.html</a>. Trying to slice first 20 characters of a string object.</p>

<p>Tried :</p>

<pre><code>&lt;p&gt;{{item.description | slice:0:20}}...&lt;/p&gt;
</code></pre>

<p>and </p>

<pre><code>&lt;p&gt;{{item.description}}[0:20]: '{{item.description | slice:0:20}}'&lt;/p&gt;
</code></pre>

<p>Here item.description is of type String</p>

<pre><code>export class Details {
  description: string; 
}

@Component({
  selector: 'editor'
})
export class AppComponent implements OnInit {
  item: details = &lt;Details&gt;{};
}
</code></pre>

<p>Note : I am getting value for description in my template using <code>{{item.description}}</code> but when i slice it says </p>

<blockquote>
  <p>Invalid argument 'undefined' for pipe 'SlicePipe'</p>
</blockquote>

<p>Any help would be great.</p>