Angular 14 – Methods to Subscribe to Variable value – Subject and BehaviourSubject Example

Angular is a popular JavaScript framework for building web applications, and one important feature of Angular is the ability to subscribe to changes in variables. In this tutorial, we will explore different methods for subscribing to variable value changes in Angular and demonstrate how to use them in a simple example application.

Prerequisites

Before getting started with this tutorial, you should have a basic understanding of Angular and TypeScript. You should also have a local development environment set up with Node.js and Angular CLI installed.

 

Method 1: Using a Subject

A Subject is a special type of observable in RxJS that allows both the observer and the observable to send data to each other. In order to subscribe to changes in a variable, we can create a Subject and use the next method to update the value of the variable.

First, let’s create a new Angular project using the Angular CLI. Open a command prompt or terminal window and run the following command:

ng new variable-change-example

This will create a new directory called variable-change-example with the basic structure of an Angular application. Next, navigate into the new project directory and install the rxjs library, which we will use to create the Subject.

cd variable-change-example
npm install rxjs

In a component, import Subject from rxjs and create a new variable of type Subject.

import { Subject } from 'rxjs';

export class MyComponent {
  myVariable = new Subject<string>();

In the component’s template, use the async pipe to subscribe to the variable and display its value.

<h1>{{myVariable | async}}</h1>

Now, when you want to update the value of the variable, call the next method on the Subject and pass in the new value.

this.myVariable.next('new value');

 

Method 2: Using a BehaviorSubject

A BehaviorSubject is similar to a Subject, but it also holds the current value of the variable. This means that when a new observer subscribes to the variable, it will immediately receive the current value.

In a component, import BehaviorSubject from rxjs and create a new variable of type BehaviorSubject.

import { BehaviorSubject } from 'rxjs';

export class MyComponent {
  myVariable = new BehaviorSubject<string>('initial value');

In the component’s template, use the async pipe to subscribe to the variable and display its value.

<h1>{{myVariable | async}}</h1>

Now, when you want to update the value of the variable, call the next method on the BehaviorSubject and pass in the new value.

this.myVariable.next('new value');

 

Method 3: Using the @Input() Decorator

Another way to subscribe to changes in a variable is to use the @Input() decorator. This method is useful when you want to share data between components.

First, in the parent component, set the value of the variable and pass it to the child component using an input binding.

export class ParentComponent {
  myVariable = 'initial value';
}

<app-child-component [myVariable]="myVariable"></app-child-component>

Then, in the child component, use the @Input() decorator to declare the variable as an input and subscribe to changes in its value.

export class ChildComponent {
  @Input() myVariable: string;
}

You can then use the myVariable variable in the child component’s template to display its value.

<h1>{{myVariable}}</h1>

Now, when the parent component updates the value of myVariable, the change will be propagated to the child component and the new value will be displayed.

Conclusion

In this tutorial, we have covered different methods for subscribing to changes in variables in Angular. We have shown how to use a Subject, a BehaviorSubject, and the @Input() decorator to subscribe to changes in variables and update their values.

It is important to choose the right method depending on the requirement, using Subject and BehaviorSubject can be useful when you want to share data within the same component, while using the @Input decorator is useful when sharing data between components.