{"id":8443,"date":"2025-10-01T06:02:56","date_gmt":"2025-10-01T06:02:56","guid":{"rendered":"https:\/\/studysection.com\/blog\/?p=8443"},"modified":"2025-10-01T06:03:11","modified_gmt":"2025-10-01T06:03:11","slug":"understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples","status":"publish","type":"post","link":"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/","title":{"rendered":"Understanding the Observer Pattern in Angular\/AngularJS with Simple Examples."},"content":{"rendered":"

Introduction:<\/strong> 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 and AngularJS<\/a>, 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:\r\nimport { Injectable } from '@angular\/core';\r\nimport { Subject } from 'rxjs';\r\n@Injectable({\r\n  providedIn: 'root',\r\n})\r\nexport class CounterService {\r\n  private counterSubject = new Subject();\r\n  getCounterObservable() {\r\n\treturn this.counterSubject.asObservable();\r\n  }\r\n  updateCounter(value: number) {\r\n\tthis.counterSubject.next(value);\r\n  }\r\n}<\/code><\/pre>\n
    Observer – DisplayComponent:<\/strong><\/p>\n
    \r\nimport { Component, OnInit } from '@angular\/core';\r\nimport { CounterService } from '..\/services\/counter.service';\r\n\r\n@Component({\r\n  selector: 'app-display',\r\n  template: '<p>Current Counter Value: {{ counterValue }}<\/p>',\r\n})\r\nexport class DisplayComponent implements OnInit {\r\n  counterValue: number = 0;\r\n\r\n  constructor(private counterService: CounterService) {}\r\n\r\n  ngOnInit() {\r\n    this.counterService.getCounterObservable().subscribe((value) => {\r\n      this.counterValue = value;\r\n    });\r\n  }\r\n}\r\n<\/code><\/pre>\n
    Usage in Another Component:<\/strong><\/p>\n
    \r\nimport { Component } from '@angular\/core';\r\nimport { CounterService } from '..\/services\/counter.service';\r\n\r\n@Component({\r\n  selector: 'app-counter',\r\n  template: `\r\n    <button (click)=\"incrementCounter()\">Increment Counter<\/button>\r\n    <button (click)=\"decrementCounter()\">Decrement Counter<\/button>\r\n  `,\r\n})\r\nexport class CounterComponent {\r\n  constructor(private counterService: CounterService) {}\r\n\r\n  incrementCounter() {\r\n    \/\/ Logic to increment the counter\r\n    this.counterService.updateCounter(\/* updated counter value *\/);\r\n  }\r\n\r\n  decrementCounter() {\r\n    \/\/ Logic to decrement the counter\r\n    this.counterService.updateCounter(\/* updated counter value *\/);\r\n  }\r\n}\r\n<\/code><\/pre>\n
    Conclusion:<\/strong> In this post, we explored the Observer Pattern in the context of Angular\/AngularJS using a simple example. The CounterService acts as the Subject, holding the counter value, while the DisplayComponent acts as the Observer, reacting to changes in the counter value. This pattern promotes loose coupling and enhances the maintainability and scalability of Angular applications.<\/p>\n","protected":false},"excerpt":{"rendered":"
    Introduction: The Observer Pattern is a behavioral design pattern widely used in software development to establish a one-to-many dependency between<\/p>\n","protected":false},"author":1,"featured_media":8444,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[6],"tags":[],"acf":[],"yoast_head":"\nObserver Pattern in Angular\/AngularJS<\/title>\n<meta name=\"description\" content=\"The Observer Pattern is a behavioral design pattern widely used in software development to establish a one-to-many dependency between objects.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Observer Pattern in Angular\/AngularJS\" \/>\n<meta property=\"og:description\" content=\"The Observer Pattern is a behavioral design pattern widely used in software development to establish a one-to-many dependency between objects.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog Posts on famous people, innovations and educational topics\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/studysection\" \/>\n<meta property=\"article:published_time\" content=\"2025-10-01T06:02:56+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-10-01T06:03:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2025\/10\/Understanding-the-Observer-Pattern-in-AngularAngularJS-with-Simple-Examples.png\" \/>\n\t<meta property=\"og:image:width\" content=\"940\" \/>\n\t<meta property=\"og:image:height\" content=\"788\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"admin-studysection-blog\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@studysection\" \/>\n<meta name=\"twitter:site\" content=\"@studysection\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"admin-studysection-blog\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/\"},\"author\":{\"name\":\"admin-studysection-blog\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\"},\"headline\":\"Understanding the Observer Pattern in Angular\/AngularJS with Simple Examples.\",\"datePublished\":\"2025-10-01T06:02:56+00:00\",\"dateModified\":\"2025-10-01T06:03:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/\"},\"wordCount\":255,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"articleSection\":[\"Learn and Grow\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/\",\"url\":\"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/\",\"name\":\"Observer Pattern in Angular\/AngularJS\",\"isPartOf\":{\"@id\":\"https:\/\/studysection.com\/blog\/#website\"},\"datePublished\":\"2025-10-01T06:02:56+00:00\",\"dateModified\":\"2025-10-01T06:03:11+00:00\",\"description\":\"The Observer Pattern is a behavioral design pattern widely used in software development to establish a one-to-many dependency between objects.\",\"breadcrumb\":{\"@id\":\"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/studysection.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Understanding the Observer Pattern in Angular\/AngularJS with Simple Examples.\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/studysection.com\/blog\/#website\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"name\":\"Blog Posts on famous people, innovations and educational topics\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/studysection.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/studysection.com\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/studysection.com\/blog\/#organization\",\"name\":\"StudySection\",\"url\":\"https:\/\/studysection.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"contentUrl\":\"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png\",\"width\":920,\"height\":440,\"caption\":\"StudySection\"},\"image\":{\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/studysection\",\"https:\/\/twitter.com\/studysection\",\"https:\/\/www.instagram.com\/study.section\/\",\"https:\/\/www.linkedin.com\/company\/studysection\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402\",\"name\":\"admin-studysection-blog\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g\",\"caption\":\"admin-studysection-blog\"},\"url\":\"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Observer Pattern in Angular\/AngularJS","description":"The Observer Pattern is a behavioral design pattern widely used in software development to establish a one-to-many dependency between objects.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/","og_locale":"en_US","og_type":"article","og_title":"Observer Pattern in Angular\/AngularJS","og_description":"The Observer Pattern is a behavioral design pattern widely used in software development to establish a one-to-many dependency between objects.","og_url":"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/","og_site_name":"Blog Posts on famous people, innovations and educational topics","article_publisher":"https:\/\/www.facebook.com\/studysection","article_published_time":"2025-10-01T06:02:56+00:00","article_modified_time":"2025-10-01T06:03:11+00:00","og_image":[{"width":940,"height":788,"url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2025\/10\/Understanding-the-Observer-Pattern-in-AngularAngularJS-with-Simple-Examples.png","type":"image\/png"}],"author":"admin-studysection-blog","twitter_card":"summary_large_image","twitter_creator":"@studysection","twitter_site":"@studysection","twitter_misc":{"Written by":"admin-studysection-blog","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/#article","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/"},"author":{"name":"admin-studysection-blog","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402"},"headline":"Understanding the Observer Pattern in Angular\/AngularJS with Simple Examples.","datePublished":"2025-10-01T06:02:56+00:00","dateModified":"2025-10-01T06:03:11+00:00","mainEntityOfPage":{"@id":"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/"},"wordCount":255,"commentCount":0,"publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"articleSection":["Learn and Grow"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/","url":"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/","name":"Observer Pattern in Angular\/AngularJS","isPartOf":{"@id":"https:\/\/studysection.com\/blog\/#website"},"datePublished":"2025-10-01T06:02:56+00:00","dateModified":"2025-10-01T06:03:11+00:00","description":"The Observer Pattern is a behavioral design pattern widely used in software development to establish a one-to-many dependency between objects.","breadcrumb":{"@id":"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/studysection.com\/blog\/understanding-the-observer-pattern-in-angular-angularjs-with-simple-examples\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/studysection.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Understanding the Observer Pattern in Angular\/AngularJS with Simple Examples."}]},{"@type":"WebSite","@id":"https:\/\/studysection.com\/blog\/#website","url":"https:\/\/studysection.com\/blog\/","name":"Blog Posts on famous people, innovations and educational topics","description":"","publisher":{"@id":"https:\/\/studysection.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/studysection.com\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/studysection.com\/blog\/#organization","name":"StudySection","url":"https:\/\/studysection.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","contentUrl":"https:\/\/studysection.com\/blog\/wp-content\/uploads\/2021\/10\/studySection-logo.png","width":920,"height":440,"caption":"StudySection"},"image":{"@id":"https:\/\/studysection.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/studysection","https:\/\/twitter.com\/studysection","https:\/\/www.instagram.com\/study.section\/","https:\/\/www.linkedin.com\/company\/studysection"]},{"@type":"Person","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/db367e2c29a12d1808fb1979edb3d402","name":"admin-studysection-blog","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/studysection.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/054ac87a6874df1932004239cd8eab36?s=96&d=mm&r=g","caption":"admin-studysection-blog"},"url":"https:\/\/studysection.com\/blog\/author\/admin-studysection-blog\/"}]}},"views":64,"_links":{"self":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/8443"}],"collection":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/comments?post=8443"}],"version-history":[{"count":1,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/8443\/revisions"}],"predecessor-version":[{"id":8445,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/posts\/8443\/revisions\/8445"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media\/8444"}],"wp:attachment":[{"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/media?parent=8443"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/categories?post=8443"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/studysection.com\/blog\/wp-json\/wp\/v2\/tags?post=8443"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}