title: list view component in angular which will accept any data source
body: <p>i wanted to create common list component like below</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li *ngFor="let item of items"&gt;{{item.text}}&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>with interface</p>
  
  <pre><code>export interface Items{
  id:string
  text:string
  }
  </code></pre>
  
  <p>and in component.ts </p>
  
  <pre><code>@input items:any
  </code></pre>
  
  <p>now i wanted to reuse above component with any data source.</p>
  
  <p>for example,</p>
  
  <pre><code>&lt;app-list-view [items]="ProductList"&gt;&lt;/app-list-view&gt;
  </code></pre>
  
  <p>&amp; products contains.</p>
  
  <pre><code>this.ProductList =[PRODUCTSITEMS...]
      export interface Products{
      produceId
      productText
      }
  </code></pre>
  
  <p>may be <code>&lt;app-list-view [items]="OrderList"&gt;&lt;/app-list-view&gt;</code></p>
  
  <pre><code>this.OrderList=[ORDERITEMS...]
  export interface Orders{
      orderId
      orderText
      }
  </code></pre>
  
  <p>how can we use typescript generics or something like that here?, i do not want to use map function to create 2 more extra property on ProductList and OrderList.</p>
  
  <p>what is best way to achieve above functionality.</p>