{"id":8014,"date":"2024-11-29T05:00:40","date_gmt":"2024-11-29T05:00:40","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=8014"},"modified":"2024-11-29T05:16:02","modified_gmt":"2024-11-29T05:16:02","slug":"explain-observer-pattern-in-angularjs","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/explain-observer-pattern-in-angularjs\/","title":{"rendered":"Explain Observer Pattern in AngularJS"},"content":{"rendered":"

The Observer Pattern is a behavioral design pattern widely used in software development<\/a> to establish a one-to-many dependency between objects. In the context of Angular<\/a> and AngularJS, this pattern plays a crucial role in facilitating communication between components, allowing them to react to changes in state or data.<\/p>\n

Overview of the Observer Pattern:<\/strong> In the Observer Pattern, there are two main roles: the Subject and the Observer. The Subject is the object that holds the state or data of interest, and the Observer is the object that wants to be notified of any changes in the Subject.<\/p>\n

Key Components:<\/strong><\/p>\n

    \n
  1. Subject:<\/strong> The entity that maintains a list of observers, provides methods to attach and detach observers, and notifies them of state changes.<\/li>\n
  2. Observer:<\/strong> The object that is interested in the state changes of the Subject. It registers itself with the Subject, and when a change occurs, it is notified through a specific method.<\/li>\n<\/ol>\n

    Example in Angular\/AngularJS:<\/strong>
    \nLet’s consider a simple scenario where we have a counter component, and we want another component to be notified whenever the counter value changes.<\/p>\n

    Subject - CounterService:
    \nimport { Injectable } from '@angular\/core';
    \nimport { Subject } from 'rxjs';
    \n@Injectable({
    \nprovidedIn: 'root',
    \n})
    \nexport class CounterService {
    \nprivate counterSubject = new Subject();
    \ngetCounterObservable() {
    \nreturn this.counterSubject.asObservable();
    \n}
    \nupdateCounter(value: number) {
    \nthis.counterSubject.next(value);
    \n}
    \n}<\/code><\/p>\n

    Observer – DisplayComponent:<\/strong><\/p>\n

    import { Component, OnInit } from '@angular\/core';
    \nimport { CounterService } from '..\/services\/counter.service';
    \n@Component({
    \nselector: 'app-display',
    \ntemplate: '
    \nCurrent Counter Value: {{ counterValue }}
    \n',
    \n})
    \nexport class DisplayComponent implements OnInit {
    \ncounterValue: number = 0;
    \nconstructor(private counterService: CounterService) {}
    \nngOnInit() {
    \nthis.counterService.getCounterObservable().subscribe((value) => {
    \nthis.counterValue = value;
    \n});
    \n}
    \n}
    \n<\/code>
    \nUsage in Another Component:<\/strong><\/p>\n

    import { Component } from '@angular\/core';
    \nimport { CounterService } from '..\/services\/counter.service';
    \n@Component({
    \nselector: 'app-counter',
    \ntemplate: `
    \n