title: How to detect when an @Input() value changes in Angular?
body: <p>I have a parent component (<strong>CategoryComponent</strong>), a child component (<strong>videoListComponent</strong>) and an ApiService.</p>
  
  <p>I have most of this working fine i.e. each component can access the json api and get its relevant data via observables.</p>
  
  <p>Currently video list component just gets all videos, I would like to filter this to just videos in a particular category, I achieved this by passing the categoryId to the child via <code>@Input()</code>.</p>
  
  <p>CategoryComponent.html</p>
  
  <pre class="lang-xml prettyprint-override"><code>&lt;video-list *ngIf="category" [categoryId]="category.id"&gt;&lt;/video-list&gt;
  </code></pre>
  
  <p>This works and when the parent CategoryComponent category changes then the categoryId value gets passed through via <code>@Input()</code> but I then need to detect this in VideoListComponent and re-request the videos array via APIService (with the new categoryId).</p>
  
  <p>In AngularJS I would have done a <code>$watch</code> on the variable. What is the best way to handle this?</p>