Subject in Angular

 What is a Subject?

Subject is a special type of Observable in RxJs Library in which we can send our data to other components or services. A Subject is like an Observable but can multicast to many observers which means subject is at the same time an Observable and an Observer.

To understand the subject we take the below example. In this example, we display user name and its status on home component and on click of user name we display user info in user component.

Step 1 : Create user.model.ts

export class User{

    userName : string = '';

    userStatus : string = '';

    constructor(userName : string , userStatus : string){

        this.userName = userName;

        this.userStatus = userStatus;

    }

}

Step 2 : Create user.service.ts

selectedUserEmitter : Subject that send User type into another component

userList : default user list

import { EventEmitter, Injectable } from "@angular/core";

import { Subject } from "rxjs";

import { User } from "../model/user.model";

@Injectable({

    providedIn: 'root'

})

export class UserService {

    selectedUserEmitter = new Subject<User>();

    userList: User[] = [{ userName: 'Mark', userStatus: 'Active' },

    { userName: 'Cris', userStatus: 'Inactive' }];

    getUserList(): User[] {

        return this.userList.slice();

    }

}

Step 3 : generate home and user component

ng g c home

ng g c user

Step 4 : home.component.html 

<div class="row" *ngFor="let user of this.userList">

    <div class="span6">

        <a (click)="onClick(user)"> <label for="UserName">User Name</label> {{user.userName}} </a>

    </div>

    <div class="span6">

        <a (click)="onClick(user)"> <label for="Status">Status</label> {{user.userStatus}} </a>

    </div>

    <hr />

</div>

home.component.ts

export class HomeComponent implements OnInit, OnDestroy {

  userList : User[] = [];

  constructor(private userService: UserService) { }

  ngOnDestroy(): void {

    this.userService.activatedEmitter.unsubscribe();

  }

  ngOnInit(): void {

  this.userList = this.userService.getUserList();

  }

  onClick(user : User){

    this.userService.selectedUserEmitter.next(user);

  }

}

Step 4 : user.component.html

<div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">

    <p>{{this.selectedUserName}}</p>

    <p>{{this.selectedUserStatus}}</p>

</div>

user.component.ts

export class UserComponent implements OnInit,OnDestroy {

  selectedUserName : string = '';

  selectedUserStatus : string = '';

  constructor(private userService: UserService) { }

  ngOnDestroy(): void {

    this.userService.selectedUserEmitter.unsubscribe();

  }

  ngOnInit(): void {

    this.userService.selectedUserEmitter.subscribe(item => {

      this.selectedUserName = item.userName;

      this.selectedUserStatus = item.userStatus;

    });

  }

}

Step 5 : app.component.html

<div class="container">

  <div class="row">

    <div class="col-xs-12 col-sm-10 col-md-8 col-sm-offset-1 col-md-offset-2">

      <div class="panel panel-default">

        <div class="panel panel-heading">

          Details

        </div>

        <div class="panel panel-body">

          <app-home></app-home>

        </div>

      </div>

    </div>

  </div>

  <div class="row">

    <app-user></app-user>

  </div>

</div>