How to Use Subject and Behavior Subject in Angular-13

Hello viewer, today article I will teach you how to use subject and behavior subject use in angular. subject and behavior subject is part of rxjs library you also know that.

in this article I will guide you how to send data one component to other component in the help of subject. First step we create two component first one is comp1 and second one is comp2 you can change component name according your need. then we create input type text inside of both components. and make an update button. then we set template reference variable inside of input tag. the template reference variable get user input value. then we create a click function. inside of click function we pass update function and template reference variable name. and then we go to our typescript file. and work in update function.

What is a component in Angular | How to work Component

Component-1

<br/>
<div class="jumbotron">
    <br/>
    <div class="container">
    <h3>Hello, {{username}}</h3>
    <input type="text" class="form-control" #uname />
    <br/>
    <p><a class="btn btn-success btn-lg" href="#" role="button" (click)="update(uname)" >Update</a></p>
</div>
  </div>

Component-1.ts

import { Component, OnInit } from '@angular/core';
import { ShareService } from '../share.service';

@Component({
  selector: 'app-comp1',
  templateUrl: './comp1.component.html',
  styleUrls: ['./comp1.component.css']
})
export class Comp1Component implements OnInit {

  constructor( private _shareservice:ShareService) {
    this._shareservice.username.subscribe(uname=>{
      this.username = uname;
    })
   }

  ngOnInit(): void {
  }
  username:any;

  update(uname:any){
    //this.username = uname.value;
    this._shareservice.username.next(uname.value);
  }
  
}

Component-2

<br/>
<div class="jumbotron">
    <br/>
    <div class="container">
    <h3>Hello, {{username}}</h3>
    <input type="text" class="form-control" #uname>
    <br/>
    <p><a class="btn btn-success btn-lg" href="#" role="button"  (click)="update(uname)">Update</a></p>
</div>
  </div>

Component-2.ts

import { Component, OnInit } from '@angular/core';
import { ShareService } from '../share.service';


@Component({
  selector: 'app-com2',
  templateUrl: './com2.component.html',
  styleUrls: ['./com2.component.css']
})
export class Com2Component implements OnInit {

  constructor( private _shareservice:ShareService) {
    this._shareservice.username.subscribe(uname=>{
      this.username = uname;
    })
   }

  ngOnInit(): void {
  }
  username:any;
  update(uname:any){
    //this.username = uname.value;
    this._shareservice.username.next(uname.value);
  }

}

then we create a service. that service file we declare username variable into subject type. you can see on below code.

Angular filter by multiple properties | Search Filter Angular Tutorial | Simple Search Filter

Share.service.ts

import { Injectable } from '@angular/core';
import { BehaviorSubject, Subject } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class ShareService {

  constructor() { }

  //username = new Subject<any>();
  username = new BehaviorSubject<any>('manoj');
  
}

if you have any problem to understand this code then you please watch video tutorial also

Leave a Reply

Your email address will not be published. Required fields are marked *