title: How to update data in one component when changes are made in another component in angular 7
body: <p>I have total 3 components namely filterComponent,tableViewComponent and Homecomponet.
  filterComponent - contain filter option for filtering data in tableViewComponent.filter option like date-range etc..
  tableViewComponent - shows table format of data.
  homecomponent- is base component in which other 2 components are shown.</p>
  
  <p>What I wanted is when I change date range in  filterComponent(I make api call here and I get the data here) it must update the data in tablecomponent(I have pagination also here). but here 2 different component I don't know how to achieve that. before this I included all the data range(like filter)option and table view in the home component .Now I am breaking into two component .I am using angular material</p>
  
  <p>//tableComponent</p>
  
  <pre><code>&lt;div class="mat-elevation-z8  responsive-table"&gt;
  
        &lt;table mat-table [dataSource]="dataSource" matSort&gt;
          &lt;ng-container matColumnDef="id"&gt;
            &lt;th mat-header-cell *matHeaderCellDef&gt; ID &lt;/th&gt;
            &lt;td mat-cell *matCellDef="let element"&gt; {{element.NODE_ID}} &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef="CMTS Name"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; CMTS Name &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt;{{element.CMTS_NAME}} &lt;/td&gt;
          &lt;/ng-container&gt;
  
          &lt;ng-container matColumnDef="Status"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt; Status &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.STATUS}} &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;ng-container matColumnDef="Homes On Node"&gt;
              &lt;th mat-header-cell *matHeaderCellDef&gt;Homes On Node &lt;/th&gt;
              &lt;td mat-cell *matCellDef="let element"&gt; {{element.TOTAL_ADDR_CNT}} &lt;/td&gt;
          &lt;/ng-container&gt;
          &lt;mat-paginator [length]="totalPages" [pageSize]="pageSize" [pageIndex]="pageIndex" [pageSizeOptions]="[10]"
      (page)="nextPage($event)"&gt;
          &lt;/mat-paginator&gt;
      &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>//filtercomponent</p>
  
  <pre><code>&lt;div class="row" id="filter-panel"&gt;
      &lt;form [formGroup]="angForm" (ngSubmit)="onSubmit()"&gt;
          &lt;div class="col-1"&gt;
              &lt;mat-form-field class="range-datepicker"&gt;
              &lt;input [(value)]="date" matInput placeholder="Choose a date" [satDatepicker]="picker" formControlName="date"
          (dateInput)="onDatePickerValueChange()"&gt;
              &lt;sat-datepicker #picker [rangeMode]="true"&gt;
              &lt;/sat-datepicker&gt;
              &lt;sat-datepicker-toggle matSuffix [for]="picker"&gt;&lt;/sat-datepicker-toggle&gt;
              &lt;/mat-form-field&gt;
          &lt;/div&gt;
          &lt;button mat-flat-button color="primary" class="search-btn"&gt;Search&lt;/button&gt;
  
  
      &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>//filtercomponent.ts</p>
  
  <pre><code>onSubmit() {
      this.spinner.show();
  
      this.pageIndex = 0;
      this.ApiServiceObj.getMarkerDataForTableView(this.startdate, this.enddate, this.regionOption, this.pageIndex, 10).subscribe((res) =&gt;         {
       this.generateMapRespose(res['results']);
  
       this.totalPages = res['totalPages'];
  
       this.spinner.hide();
  
      });
    }
  </code></pre>
  
  <p>//homecomponent</p>
  
  <pre><code>  &lt;div&gt;
        &lt;app-filter&gt; &lt;/app-filter&gt;
       &lt;app-table&gt;&lt;/app-table&gt;
    &lt;/div&gt;
  </code></pre>