I'm puzzled by how my observable seems to be activating on its own without

Sorry if this is a silly question.

I am looking at the following code snippet:

  ngOnInit(): void {


    let data$ = new Observable((observer: Observer<string>) => {
      observer.next('message 1');
    });
      
    data$.subscribe(s => console.log(s));
  }

I can see that 'message 1' is being displayed in the console output. I am confused about when and how observer.next is being called.

I have declared the variable data$ which holds an Observable object. But I am not sure why the observer.next method is being triggered automatically.

Answer №1

When you subscribe to your observable, the observer function is triggered. This can be seen when multiple subscriptions are made with varying results, as shown below:

import {Observable} from 'rxjs';

const source$ = new Observable(observer => observer.next(Math.random()));

source$.subscribe(console.log); // Displays a random number
source$.subscribe(console.log); // Shows a different random number each time

This phenomenon is known as a cold observable. For more information on the differences between hot and cold observables, check out this informative article. You can also view the example on Stackblitz.

Answer №2

Your Observable operates in this way

let stream$ = new Observable((observer: Observer<string>) => { observer.next('message 1') });

Is a powerful tool, but to activate it you must use .subscribe(...)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Troubleshooting: JavaScript code not functioning properly with variable input instead of fixed value

I have encountered an issue with a JS function that I'm using. The function is shown below: // A simple array where we keep track of things that are filed. filed = []; function fileIt(thing) { // Dynamically call the file method of whatever ' ...

How to Maintain Spacing Between Two Elements While Ensuring the Right Element Stays to the Right Even if the First One is Hidden in CSS

Presently, I have two icons being displayed with a space between them using the flex-box property justify-content and value space-between. The issue arises when only one icon is displayed, as I need the V-icon to always remain on the left and the urgent-ic ...

The information in Vuex Store and Vue Component is not aligning and syncing properly

I am encountering an issue with a specific component in my Quasar project. I am currently utilizing a Q-table to display data pulled from a data field, which is supposed to sync automatically with the Vuex store. However, I am noticing that the data does ...

PhpStorm does not currently support types in JavaScript

Currently, I am using PhpStorm for a Vue 2 / TypeScript project. However, whenever I attempt to add return types to functions, I encounter the error message "Types are not supported by current JavaScript version": https://i.sstatic.net/ct3gu.png In the " ...

Empowering user accessibility through intricate custom elements

In the world of web accessibility guidelines, labels are typically associated with form controls like <input> or <textarea>. But what happens when dealing with complex Angular / React / ... components that function as form controls? Picture a ...

Switching templates based on elementRef width adjustments

I am facing an issue where I am trying to load some data in ngInit and set the width of a div equal to the received data. However, when I try to set some style options in ngAfterViewInit using ViewChild and ElementRef, my elementRef ends up being undefined ...

Top method for changing Enum to Set in TypeScript

Take a look at the enum below: enum Animes { OnePiece = 'One Piece', Naruto = 'Naruto', Bleach = 'Bleach' } How can we efficiently transform this enum into a Set? ...

Tips for compressing HTML templates using angular2 and webpack?

I have implemented the webpack starter found at this link: https://github.com/AngularClass/angular2-webpack-starter Within the webpack config, I came across the following code snippet (I included minify options myself) new HtmlWebpackPlugin({ template: ...

Having issues with Angular Material, specifically with mat-list-item and routerLinkActive not functioning as expected

Currently, I am working with a navigation view that utilizes the MatSidenavModule. The issue I am encountering is on mobile screens. When I click a mat-list-item, the mat-sidenav closes as expected. However, upon opening the mat-sidenav again, Material alw ...

Transform Observable RxJS into practical results

In a straightforward scenario, I have an upload action on the page that looks like this: onUpload$: Subject<SomeUpload> = new Subject<SomeUpload>(); uploadAction$: Observable<Action> = this.onUpload$.map(entity => this.someActionServi ...

Tips for showing data from an hour ago in Angular

Here is the code snippet provided: data = [ { 'name' : 'sample' 'date' : '2020-02-18 13:50:01' }, { 'name' : 'sample' 'date' : '2020-02- ...

Is hard coding permissions in the frontend considered an effective approach?

I'm in the process of creating an inventory management system that allows admin users to adjust permissions for other employees. Some permissions rely on others to function properly, and I need to display different names for certain permissions on the ...

What is the correct way to define an abstract method within a class to ensure that an IDE detects and notifies if the abstract method is not implemented

Is there a way to properly define an abstract method in an abstract class and have the IDE notify us if we forget to implement it? I attempted the following approach, but it did not work: export abstract class MyAbstractClass { /** * @abstract ...

Nest is unable to resolve the dependencies of the ItemsService. Ensure that the required argument at index [0] is present within the AppModule context

After following the Nest JS Crash tutorial from a Youtube Link, I encountered an error when importing an interface in the service. Nest seems unable to resolve dependencies of the ItemsService. It's important to ensure that the argument at index [0 ...

Is it recommended to employ cluster connection within my Redis client when utilizing Azure Redis Cluster?

It seems that the Azure documentation on clustering can be a bit confusing. According to the docs: Will my client application need any modifications to support clustering? Once clustering is activated, only database 0 will be accessible. If your client ...

Persistent Ionic tabs after user logs out - keeping tabs active post-logout

My Ionic app features tabs and authentication. While the authentication process works perfectly, I am facing an issue with the tabs still displaying after logging out. Below is my login method: this.authProvider.loginUser(email, password).then( auth ...

Implementing the click event in angular2-openlayers will display the information for the selected marker

Exploring Angular and Openlayers (3) is a new endeavor for me. Recently, I stumbled upon this open source library that conveniently wraps Openlayers within Angular. A straightforward question has come to mind: How can I detect when a user clicks on a gene ...

export keyword in TypeScript disassociates the interface implementation from a class

Currently, I am facing an issue with my files. I have a .ts file that contains a class declaration, and a .d.ts file that contains an interface declaration. An example from the .ts file: class A { constructor() { this.name = "Jo"; } } A ...

Get rid of the TypeScript error in the specified function

I am currently working on implementing a "Clear" button for a select element that will reset the value to its default state. Here is a snippet of my code: const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => { onChange( ...

Interface constructor concept

Trying to figure out how to dynamically add different types of components to a game object in TypeScript. After consulting the TypeScript documentation on interfaces, I discovered a unique approach for dealing with constructors in interfaces, which led me ...