title: while iterating through ngfor directive is it possible to split a string and display it in angular 2
body: <p>I am trying to split a string while iterating though ngfor directive</p>
  
  <p>this is my code</p>
  
  <pre><code>&lt;ng-container *ngFor="let item of packageDetails;let i = index"&gt;
      &lt;div  class="col-lg-3 col-md-4 col-sm-6 ic-customer-packageDiv" &gt;
          &lt;nb-card  class="package_card" [ngClass]="{'ic-customer-freePackageBody':item.packageType=='free','ic-customer-activePkg': item.id == activePackageId,'ic-customer-inactivePkg': item.id != activePackageId}" style="border-radius:unset"&gt;
              &lt;nb-card-header class="form-group" [ngClass]="{'ic-customer-cardFreeHeader' : item.packageType=='free','ic-customer-cardHeader' : item.packageType!='free'}"&gt;                               
                  &lt;p class="ic-customer-packageTitle control-label" [class.ic-customer-freePackage]="item.packageType=='free'"&gt;{{item.name}}&lt;/p&gt;          
              &lt;/nb-card-header&gt;
              &lt;nb-card-body&gt;
                  &lt;form&gt;
                      &lt;div class="form-group ic-customer-packagePriceDiv"&gt;
                          &lt;p class="ic-customer-packagePrice" *ngIf=" item.packageType != 'free'"&gt;$ {{item.cost}}/ YEAR&lt;/p&gt;
                          &lt;p class="ic-customer-packagePrice" *ngIf=" item.packageType == 'free'" [class.ic-customer-freePackage]="item.packageType=='free'"&gt;FREE!!!&lt;/p&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                        &lt;ng-template *ngFor="let descr of item.description | split"&gt;
                           &lt;p class="ic-customer-packageDescription" [class.ic-customer-freePackage]="item.packageType=='free'"&gt;{{descr}}&lt;/p&gt;
                        &lt;/ng-template&gt;
                     &lt;/div&gt;
  </code></pre>
  
  <p>the pipe file code is </p>
  
  <pre><code>import { Pipe,PipeTransform } from '@angular/core';
  @Pipe({
      name:'split'
  })
  
  export class splitPipe implements PipeTransform {
      transform(value) {
          console.log(value.split('\n'));
          return value.split('\n');
      }
  }
  </code></pre>
  
  <p>but it displays nothing in the html file.i can't find any problems in this codes</p>