Here's a detailed comparison of Subject vs BehaviorSubject in Angular with practical examples:

 

Subject vs BehaviorSubject in Angular (RxJS)

1. Basic Characteristics

Feature	Subject	BehaviorSubject
Initial Value	No initial value required	Requires initial value
Last Value	Doesn't retain last value	Retains and emits last value
New Subscribers	Only get future emissions	Get last emitted value + future
Common Use Cases	Event buses, one-time events	Application state, user session

---

2. Subject Example - Event Bus

typescript

// Event Service
@Injectable({ providedIn: 'root' })
export class EventBusService {
  private messageSubject = new Subject<string>();
  
  // Public observable (prevent external `next()`)
  messages$ = this.messageSubject.asObservable();

  sendMessage(message: string) {
    this.messageSubject.next(message);
  }
}

// Component A (Sender)
@Component({ /* ... */ })
export class SenderComponent {
  constructor(private eventBus: EventBusService) {}
  
  send() {
    this.eventBus.sendMessage('Hello from Sender!');
  }
}

// Component B (Receiver)
@Component({ /* ... */ })
export class ReceiverComponent implements OnInit {
  message = '';

  constructor(private eventBus: EventBusService) {}

  ngOnInit() {
    this.eventBus.messages$.subscribe(msg => {
      this.message = msg; // Only gets messages sent AFTER subscription
    });
  }
}

---

3. BehaviorSubject Example - User Session

typescript

// Auth Service
@Injectable({ providedIn: 'root' })
export class AuthService {
  private currentUserSubject = new BehaviorSubject<User | null>(null);
  
  // Public observable
  currentUser$ = this.currentUserSubject.asObservable();

  get currentUser() {
    return this.currentUserSubject.value;
  }

  login(user: User) {
    this.currentUserSubject.next(user);
  }

  logout() {
    this.currentUserSubject.next(null);
  }
}

// Header Component (always shows current user)
@Component({ /* ... */ })
export class HeaderComponent implements OnInit {
  currentUser: User | null = null;

  constructor(private auth: AuthService) {}

  ngOnInit() {
    this.auth.currentUser$.subscribe(user => {
      this.currentUser = user; // Immediately gets current user on subscription
    });
  }
}