Angular and RxJS: Refresh a Component From Another
Tags: angular, rxjs, webdev, javascript
Published: 2022-05-12 18:46:41

RxJS is Reactive Extensions of JavaScript. It provides various handy Observables and Operators to work within Angular. It becomes important in scalable application development. **This tutorial will guide you to reload or refresh a component from another using RxJS Observables.** I will use a common service that will be responsible to keep the event emitters.

## Real examples
Building a large-scale application requires an optimized and well-structured code, only then it will give the best performance measurement. There are many situations where we need to refresh a part of a component from another component’s action. Here are a few of them.

### Refresh data table at component after action on another
This is the most common scenario when building an application. You have a data table on the list component and there is another component for Add/Edit/Delete. You want to refresh the data table when a record is added/edited/deleted.

### Reload a dropdown after action on a different component
A dropdown data can be refreshed using RxJS Subject or EventEmitter from a different component. It requires a common service to be used by both of the components. Emit the event from the source component and subscribe to the listener. Reload the data in the subscription.

### Refresh multi-lingual content explicitly
This situation happens when Angular’s Change Detection is not able to detect the language change button click. In that case, you want to manually emit an event at the language change action and refresh the multi-language content.

You can use any one of the below events generation mechanisms to implement any of the above examples. You can also use it in any other use case as per your requirement. Let’s start code implementation.

## Refresh a Component From Another Using RxJS
RxJS observables and operators will be used to reload a part of data at a component from a different component. We will look into the ways one by one with examples.

### Reload part of component using RxJS Subject
RxJS Subject is an Observable that is used to multicast the event to multiple observers. We will use Subject to notify the component on some action and reload the part.

`data.service.ts`

```typescript
import { Injectable } from '@angular/core';
import { Subject } from 'rxjs';
 
@Injectable({
  providedIn: 'root'
})
export class DataService {
  subjectNotifier: Subject<null> = new Subject<null>();
 
  constructor() { }
 
  notifyAboutChange() {
    this.subjectNotifier.next();
  }
}
```

A variable `subjectNotifier` with Subject Data Type is declared. `null` type is passed in the Subject argument because I don’t need to send any value with notification. If you want to send a value along with the notification, you can specify there the value type and send the value in `this.subjectNotifier.next();`

Call the `notifyAboutChange` method from the origin component.

`sender.component.ts`

This is the event originator component. An event will be emitted on add/edit/delete record or as per your requirement. The event will be then subscribed by the receiver component.

```typescript
import { Component, OnInit } from '@angular/core';
import { DataService } from '../data.service';
 
@Component({
  selector: 'app-sender',
  templateUrl: './sender.component.html',
  styleUrls: ['./sender.component.scss']
})
export class SenderComponent implements OnInit {
 
  constructor(private dataService: DataService) { }
 
  ngOnInit(): void {
    this.notifyForChange(); // call this method after add/edit/delete or as per your requirement
  }
 
  notifyForChange() {
    this.dataService.notifyAboutChange();
  }
}
```

`receiver.component.ts`

Subscribe to the event in receiver component.

```typescript
import { Component, OnDestroy, OnInit } from '@angular/core';
import { Subscription } from 'rxjs';
import { DataService } from '../data.service';
 
@Component({
  selector: 'app-receiver',
  templateUrl: './receiver.component.html',
  styleUrls: ['./receiver.component.scss']
})
export class ReceiverComponent implements OnInit, OnDestroy {
 
  notifierSubscription: Subscription = this.dataService.subjectNotifier.subscribe(notified => {
    // originator has notified me. refresh my data here.
  });
 
  constructor(private dataService: DataService) { }
 
  ngOnInit(): void {
  }
 
  ngOnDestroy() {
    this.notifierSubscription.unsubscribe();
  }
}
```

**Note**: I have used a Subscription variable `notifierSubscription`. I can unsubscribe it in `ngOnDestroy` to prevent memory leaks when component is destroyed.

### Refresh part of component using EventEmitter
`data.service.ts`

Declare an EventEmitter variable.

```typescript
eventEmitterNotifier: EventEmitter<null> = new EventEmitter();
```

Again, I am using `null` value in the EventEmitter argument because I don’t need to pass any value. I only need to notify my listener. If you need to pass data along with event notification, you can provide the data reference and pass the value while emitting the event.

Emit the event.

```typescript
notifyAboutChange() {
  this.eventEmitterNotifier.emit();
}
```

Call the `emit()` method in `notifyAboutChange` in `data.service.ts` file. Consume `notifyAboutChange` method from sender component to emit event.

`sender.component.ts`

Call the `notifyAboutChange` service method to emit the event on add/edit/delete action or any other action as per your need.

```typescript
constructor(private dataService: DataService) { }
 
ngOnInit(): void {
  this.notifyForChange(); // call this method after add/edit/delete or as per your requirement
}
 
notifyForChange() {
  this.dataService.notifyAboutChange();
}
```

This will invoke the event and the listener will be notified immediately.

`receiver.component.ts`

Subscribe to the event in the same way we did for the RxJS Subject.

```typescript
notifierSubscription: Subscription = this.dataService.eventEmitterNotifier.subscribe(notified => {
  // originator has notified me. refresh my data here.
});
 
constructor(private dataService: DataService) { }
 
ngOnInit(): void {
}
 
ngOnDestroy() {
  this.notifierSubscription.unsubscribe();
}
```

**Note**: Unsubscribe the subscription in `ngOnDestroy` to prevent unnecessary memory leakage.

## Conclusion
Events generation is one of the most used mechanisms in Angular development. RxJS comes to mind when implementing such use cases. This article explains how to refresh a part of component from another component with the help of RxJS Observables.

Read [How to Pass Data Between Components Using RxJS](https://stackblogger.com/sharing-data-between-components-rxjs-angular/).

Also Read:

[5 Best Google Charts to Use in Angular](https://stackblogger.com/5-best-google-charts-for-angular/)
[Angular Material 12 Table, Sorting, Searching & Pagination](https://stackblogger.com/angular-material-data-table-tutorial/)
[RxJS forkJoin: Definition and Real World Uses](https://stackblogger.com/rxjs-forkjoin-definition-and-real-world-uses/)
5 Great SEO Ideas To Improve Angular Website Ranking
Real World Examples of 5 Common Observable Operators