title: Angular 7 - Reload / refresh data different components
body: <p>How to refresh data in different component 1 when changes made in component 2. These two components are not under same parentnode.</p>
  
  <p><strong>customer.service.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class UserManagementService extends RestService {
  
    private BASE_URL_UM: string = '/portal/admin';
  
    private headers = new HttpHeaders({
      'Authorization': localStorage.getItem('token'),
      'Content-Type': 'application/json'
    });
  
    constructor(protected injector: Injector,
      protected httpClient: HttpClient) {
      super(injector);
    }
    getEapGroupList(): Observable &lt; EapGroupInterface &gt; {
      return this.get &lt; GroupInterface &gt;
        (this.getFullUrl(`${this.BASE_URL_UM}/groups`), {
          headers: this.headers
        });
    }
  
    updateGroup(body: CreateGroupPayload): Observable &lt; CreateGroupPayload &gt; {
      return this.put &lt; GroupPayload &gt;
        (this.getFullUrl(`${this.BASE_URL_UM}/group`), body, {
          headers: this.headers
        });
    }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>Component1.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>export class UserGroupComponent implements OnInit {
  
    constructor(private userManagementService: UserManagementService) {}
  
    ngOnInit() {
      this.loadGroup();
    }
  
    loadGroup() {
      this.userManagementService.getEapGroupList()
        .subscribe(response =&gt; {
          this.groups = response;
        })
    }
  
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;mat-list-item *ngFor="let group of groups?.groupList" role="listitem"&gt;
    &lt;div matLine [routerLink]="['/portal/user-management/group', group.groupCode, 'overview']" [routerLinkActive]="['is-active']"&gt;
      {{group.groupName}}
    &lt;/div&gt;
  &lt;/mat-list-item&gt;
  &lt;mat-sidenav-content&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
  &lt;/mat-sidenav-content&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p><strong>component2.ts</strong></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>setPayload() {
    const formValue = this.newGroupForm.value
    return {
      'id': '5c47b24918a17c0001aa7df4',
      'groupName': formValue.groupName,
    }
  }
  
  onUpdateGroup() {
      this.userManagementService.updateGroup(this.setPayload())
        .subscribe(() =&gt; {
            console.log('success);
            })
        }</code></pre>
  </div>
  </div>
  </p>
  
  <p>When I update onUpdateGroup() api in <strong>component1</strong>, loadGroup() should refresh in <strong>component2</strong></p>