An issue has occurred with the RxJs Subject where it is unable to access the 'subscribe' property due to it being

Within my service method that returns an Observable, I am attempting to notify the component using a Subject once an action is completed.

completed: Subject<boolean>

  constructor(private http: Http) {

  }

  loadItems(): Observable<FrontItemDto[]> {
    return this.http.get(`${ServiceSettings.ApiUrl}/front`)
      .map(res => {
        res.json();
        if (res.json()) {
          this.completed.next(true);
        }
      })
      .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
  }

This code snippet demonstrates how the component is set up to listen for updates from the Subject:

ngOnInit(): void {
    this.getItems();
    this.sub = this.dataService.completed.subscribe(completed => {
      if (completed) {
        this.show = false;
      }
      });
  }

Despite following these steps, an error message informs me that the Subject (completed) is undefined. Where might I be going wrong?

Answer №1

The initialization of the completed Subject is incorrect.

completed = new Subject<boolean>(); //make sure to include parenthesis at the end

View Demo created by @Ompurdy

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

Tips for getting TypeScript to flag improper string concatenation with different data types

Why does TypeScript not complain in strict mode about the following scenarios? function test(firstName: string, lastName?: string): string { return firstName + " " + lastName; } test('John'); Or this? const str: string = ''; ...

Change the content of an ion-card in Ionic2 dynamically

After fetching a list of books from the backend API provider, I am presented with sample data that looks like this: { "success":true, "books":[ { "id":1000, "book_code":"CC219102", "read_status":"completed", ...

Automate the process of triggering the "Organize Imports" command on a VSCode / Typescript project through code

Is there a way to automatically run VSCode's 'Organize Imports' quickfix on every file in a project, similar to how tslint can be run programatically over the entire project? tslint --project tsconfig.json --config tslint.json --fix I want ...

To collapse a div in an HTML Angular environment, the button must be clicked twice

A series of divs in my code are currently grouped together with expand and collapse functionality. It works well, except for the fact that I have to click a button twice in order to open another div. Initially, the first click only collapses the first div. ...

What could be the reason for the Angular application image not starting up locally with Docker?

I am a beginner with Docker and I'm experimenting with running the default Angular app locally on a Docker container. After creating the app using ng new, I included the following Dockerfile: FROM node:8 RUN mkdir /usr/src/app WORKDIR /usr/src/app C ...

There was an error reported by TypeScript stating that Nest.js is not considered a module

During the development of my project using Nest.js, I came across an error that I couldn't find a solution for. The issue arises when I try to export a function from one file and import it into a controller. Even though the function is exported correc ...

What is the best way to trigger a code block once an observable in Angular has completed all of its tasks?

I have an observable made from an array of form controls in Angular. I am using dropdowns and inputs to calculate the sum of all currencies in relation to one currency, and it works. However, my issue is that when I want to update the field itself, the v ...

Obtaining Data from a Database Using Angular

I have developed a front-end website using Angular as my framework, integrated with node.js. To interact with the database, I created a "server.ts" file and connected it successfully to my DB. Now, my goal is to fetch data from the database and display i ...

What is preventing me from connecting to dockerized npm from my host machine?

Issue - A server running inside a docker container is not responding when accessed from outside the container on an OSX host. web: image: my_web build: context: ./ dockerfile: web.docker container_name: my_web networks: ...

The attribute 'name' is not found within the data type 'never'. Error code: ts(2339)

Currently, I am utilizing the flight radar API to develop a straightforward application. The results of the API call are stored in state as shown below: const [airports, setAirports] = useState([]); The 'airports' variable is an array consisti ...

Tips for navigating through a nested JSON object with loops

Is it possible to access the value of the Address object within an interface in Angular using *ngFor? export interface User { id: number; name: string; username: string; email: string; address: Address; } export interface Address { st ...

Utilizing information from an observable in various functionalities

I've been working on an Angular4 application. Here is the BookingService I'm utilizing to fetch the data- export class BookingService { constructor(private http: HttpClient) {} getMemberBookings(memberID: number): Observable<any> { ...

Getting foreign key data from Django to display in Angular

Looking to fetch all columns of a table using a foreign key relationship and unsure of the process? Here's the code snippet: models.py class Athletes(models.Model): athlete_id = models.AutoField(db_column="AthleteID", primary_key="True") fir ...

What is the best way to transform my tuple so that it can be properly formatted for JSON in Python?

I have a Python code snippet that looks like this: @app.route('/getData', methods = ['GET']) def get_Data(): c.execute("SELECT abstract,category,date,url from Data") data = c.fetchall() resp = jsonify(data) resp.st ...

Strategies for troubleshooting unhandled (in promise) error: EmptyError triggered by router.navigate?

Struggling to incorporate a basic angular route const appRoutes: Routes = [ { path: '' ,redirectTo: '/recipes', pathMatch: 'full'}, { path: 'recipes' , component: RecipesComponent}, { pa ...

Encountering TS2304 error message while running TypeScript files indicates the inability to locate the name 'PropertyKey', in addition to another error - TS2339

I encountered an issue while attempting to execute a spec.ts file in the Jasmine Framework. After installing @types/core-js version 0.9.46 using the command npm i @types/core-js, I started receiving the following error messages: > ../../node_modules/ ...

Having trouble connecting to remote databases such as Supabase, MongoDB Atlas, or Neon DB using the Prisma ORM

I've encountered the same issue across all my projects. Everything runs smoothly when I work with local databases like postgres or mongodb (within a docker container on my machine). However, connecting to remote databases such as mongo db atlas, supab ...

Jasmine raised an issue stating that Jodit is not recognized during the unit testing process

I'm currently testing a custom Jodit editor in my app, but even the automatic 'should create' test is failing with an error message of 'Jodit is not defined'. jodit.component.ts import { Component, OnInit, AfterViewInit, OnDestro ...

Utilizing ngFor in Angular to Cycle Through Tables and Labels

I am in the process of creating multiple tables with unique label headings. Each label heading should correspond to the project's name. Under each project.name, there will be a table named material_projects containing the headings material_name, quant ...

Setting `throwIfNamespace=true` in the `.babelrc` file for a `create-react-app` project

Running into a bit of a snag here. I thought setting up a simple app would be smooth sailing, but it seems that's not the case. I created an app using the latest create-react-app and decided to add a <gcse:search> tag. However, I encountered the ...