How to use BehaviorSubject in Angular

 BehaviorSubject in Angular

What is BehaviorSubject ?

• A stream of data that we can subscribe to like the observable returned from HTTP requests in Angular
• It will always return a value, even if no data has been emitted from its stream yet
• When you subscribe to it, it will immediately return the last value that was emitted immediately (or the initial value if no data has been emitted yet)

Why BehaviorSubject ?

• Just load data once, or only when we need to
• Ensure that some valid value is always supplied to whatever is using it (even if a load has not finished yet)
• Instantly notify anything that is subscribed to the BehaviorSubject when the data changes
• Access the data without worrying about timing, because we know that we will always receive a valid value (even if it is just the initial value)
• Keep data updated automatically across the application
• Remove unnecessary requests to load data just for the sake of ensuring that the data is in fact loaded

Example

In order to understand it more clear, We will solve below problem

• I have a student registration form.
• I want to show all the filled by the end-user as an overview in the same screen but a different component

---

Solution

Step 1 : We will create a registration form

STUDENT REGISTRATION FORM

FIRST NAME
LAST NAME
DATE OF BIRTH
EMAIL ID
MOBILE NUMBER
GENDER	Male Female
ADDRESS

Step 2 : We will create a new component overview form

STUDENT OVERVIEW FORM

FIRST NAME	{{student.firstName}}
LAST NAME	{{student.lastName}}
DATE OF BIRTH	{{student.dob}}
EMAIL ID	{{student.emailID}}
MOBILE NUMBER	{{student.mobileNo}}
GENDER	{{student.gender}}
ADDRESS	{{student.Address}}

• OverViewComponent.component.ts

  export class OverViewComponent implements OnInit {
    student: Student;
    constructor(private commonService: CommonService) {
  
     }
  
    ngOnInit(): void {
      this.commonService.$behaviourSubject.subscribe((student: Student) =>{
       this.student = student;
      });
    }
  
  }
  
  

Step 3 : Create 2 files name StudentModel.ts and a service( ng g s common) ( I have used service name common)

• StudentModel.ts

  export class Student {
    firstName: string;
    lastName: string;
    dob: string;
    emailID: string;
    mobileNo: string;
    gender: string;
    Address: string;
  }
  
  

• CommonService.ts

  import { Student } from './model/studentModel';
  import { Injectable } from '@angular/core';
  import { BehaviorSubject } from 'rxjs';
  
  @Injectable({
    providedIn: 'root'
  })
  export class CommonService {
    student: Student = new Student();
    $behaviourSubject = new BehaviorSubject(this.student);
  
    constructor() { }
  
    multicast(student: Student) {
      console.log(student);
      this.$behaviourSubject.next(student);
    }
  
  }
  
  

• Registrationform.component.ts

  export class Registrationform implements OnInit {
    title = 'Core Micro Services -BehaviorSubject';
    student = new Student();
    constructor(private commonService: CommonService) {
  
    }
    ngOnInit(): void {
  
    }
  
    multiCast() {
      this.commonService.multicast(this.student);
    }
  }
  
  

• You are ready to get your result

• Git hub link.

  https://github.com/coremicroservices/behaviour-subject
  

• Facebook

  https://www.facebook.com/coremicroservices
  

• Youtube

  https://www.youtube.com/watch?v=pkHUEcij36I