title: Search filter in angular 6
body: <p>I have two components called <code>list</code> and <code>details</code>, On clicking to particular <code>list-item</code> in list component. It will emit selected/clicked <code>list-item</code> to <code>details</code> component as in below image.</p>
  
  <p><a href="https://i.stack.imgur.com/PAQmE.png" rel="noreferrer"><img src="https://i.stack.imgur.com/PAQmE.png" alt="enter image description here"></a></p>
  
  <p>Now i have placed another component called <code>search</code> above the <code>list</code> component like this:</p>
  
  <p><a href="https://i.stack.imgur.com/lbJBK.png" rel="noreferrer"><img src="https://i.stack.imgur.com/lbJBK.png" alt="enter image description here"></a></p>
  
  <p>How can i apply <strong>filter</strong> for the <code>list-items</code> present in the <strong>list</strong> component?
  So that i can search the <code>list-items</code> easily.</p>
  
  <p><strong><a href="https://stackblitz.com/edit/angular-movie-read-load-json-sample-eg-ckwuep?file=src/app/details/details.component.html" rel="noreferrer">Stackblitz Link</a></strong></p>