0

How to refresh angular material datatable in component 1 when changes made in component 2. These two components are not under same parentnode / not related.

customer.service.ts

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);
  }

  createUser(body: UpdateUserDetailPayload): Observable < UpdateUserDetailPayload > {
    return this.post < UpdateUserDetailPayload >
      (this.getFullUrl(`${this.BASE_URL_UM}/user`), body, {
        headers: this.headers
      });
  }

  getEapGroupDetail(groupCode: string): Observable < EapGroupElement > {
      return this.get < GroupPayload >
        (this.getFullUrl(`${this.BASE_URL_UM}/group/${groupCode`), {
        headers: this.headers
      });
  }
}

component1.ts

onCreateUser() {
  this.userManagementService.createUser(this.setCreatePayload())
    .subscribe(response => {
        console.log('success');
      },
      (error => {
        console.log('error');
      })
    )
}

component2.ts

loadGroupDetail() {
  this.userManagementService.getEapGroupDetail(this.groupCode)
    .subscribe(response => {
      this.groupDetail = response;
      this.dataSource = new MatTableDataSource(this.groupDetail.userList);
      this.dataSource.sort = this.sort;
      this.dataSource.paginator = this.paginator;
    })
}
<table mat-table [dataSource]="dataSource" matSort class="mat-elevation-z8">
  <ng-container matColumnDef="username">
    <th mat-header-cell *matHeaderCellDef mat-sort-header class="custom-column">
      {{ 'Dashboard.header.management.user.username' | translate}}
    </th>
    <td mat-cell *matCellDef="let element" class="custom-column">
      {{element.username}}
    </td>
  </ng-container>

  <ng-container matColumnDef="email">
    <th mat-header-cell *matHeaderCellDef mat-sort-header class="custom-column">
      {{ 'Dashboard.header.management.user.email' | translate}}
    </th>
    <td mat-cell *matCellDef="let element" class="custom-column">
      {{element.email}}
    </td>
  </ng-container>

  <tbody>
    <tr mat-header-row *matHeaderRowDef="displayedColumns">
    </tr>
    <tr mat-row *matRowDef="let row; columns: displayedColumns;">
    </tr>
  </tbody>
</table>

When I create new user onCreateUser() in component1, loadGroupDetail() should refresh in component2. These components are not related

SKL
  • 1,243
  • 4
  • 32
  • 53

1 Answers1

0

you could use an RxJS subject and use the next method to signal change. in the other component you would use to the event. 

const subject = new Subject();
button.addEventListener(‘click’, () => subject.next('click');
subject.subscribe(x => console.log(x));

Added simple example. as found here: https://medium.com/@benlesh/on-the-subject-of-subjects-in-rxjs-2b08b7198b93

jcuypers
  • 1,774
  • 2
  • 14
  • 23
  • Can you give some example please? – SKL Feb 21 '19 at 15:54
  • most of the time its contained in some kind of service. and you get the Subject and observable from there. you could also use a store but this would be overkill for this case. – jcuypers Feb 21 '19 at 15:59
  • Ok. Can you please show me how to use asObservable and new subject with my code? – SKL Feb 21 '19 at 16:15
  • Sorry it's king of straightforward, just go through the docs and the responses to your previous request: https://stackoverflow.com/questions/54759713/angular-7-reload-refresh-data-different-components. the concepts you study will help you in future changes. – jcuypers Feb 21 '19 at 16:24