title: In Angular 9, how do I get a child component to reload after the parent has loaded data through an Observable?
body: <p>In my Angular 9 application, I want to pass some data from a parent component into a child component.  The parent loads that data via an observable.  Below is what the parent item looks like ...</p>
  <pre><code>&lt;div&gt;
      &lt;h3 align=&quot;center&quot;&gt;Hot Items&lt;/h3&gt;
      &lt;app-items [items]=&quot;items&quot; &gt;&lt;/app-items&gt;
  &lt;/div&gt;
  </code></pre>
  <p>and then in the ts file, I have this</p>
  <pre><code>export class HotComponent implements OnInit {
  
    items: Item[] = [];
  
    constructor(
      private apiService: ApiService
    ) { }
  
    ngOnInit(): void {
      this.apiService.getHotItems().subscribe((result: ResultSet) =&gt; {
        this.items = result.hot_items;
      });
    }
  </code></pre>
  <p>But I notice when the observable loads the data, it is not getting displayed in the child component.  I think maybe I'm passing it to the child incorrectly?  Below is the ts file of the child component ...</p>
  <pre><code>export class ItemsComponent implements OnInit {
  
    dataSource: MatTableDataSource&lt;Item&gt;;
    displayedColumns: string[] = ['title', 'notes'];
    @Input('items') items: Item[] = [];
  
    constructor() { }
  
    ngOnInit(): void {
      this.dataSource = new MatTableDataSource(this.items);
    }
  </code></pre>
  <p>and the child component template has the below</p>
  <pre><code>&lt;mat-table #table [dataSource]=&quot;dataSource&quot;&gt;
      &lt;ng-container matColumnDef=&quot;title&quot;&gt;
      ...
  </code></pre>
  <p>How do I get the child component to reload when the parent component loads the data?</p>