Is it possible to subscribe to the @select() observable in my Angular Redux component and have the pattern automatically unsubscribe onDestroy?

In my Angular application with Redux, I am utilizing the @select() method to retrieve an object named 'sectionAll'. This object serves as the data source for a table that I am displaying, requiring me to pass it to the dataSource in the controller.

Within the constructor, I am subscribing to the 'sectionAll' observable.

My concern is whether using @select() in this manner will also handle the destruction of that subscription or if I am misunderstanding the usage of @select().

Edit:

I am leveraging @angular-redux/store with Angular 6.

Here is my constructor:

constructor(
    private adalService: AdalService,
    private service: DeliveriesService,
    private ngRedux: NgRedux<IAppState>
  ) {
    this.service.getSectionAll();
    this.sectionAll.subscribe(data => {
      (this.dataSource = new MatTableDataSource(data)),
        (this.dataSource.sort = this.sort);
    });
  }

Regarding the @select part:

  @select() sectionAll;

Answer №1

This particular library is not one I'm familiar with, but from what I understand, the select decorator is separate from the subscription process. Since you are manually subscribing to the data, it is your responsibility to unsubscribe when necessary.

It appears that the async pipe is the one responsible for handling the unsubscription process, rather than the select decorator.

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

My function executes smoothly when I pass a reference to an object, but it encounters an error when I include extra properties in the object and pass it as a value

In my coding project, there is a function called sayMyName that takes an argument of type User When I pass a user as reference, everything works perfectly: interface User{ firstName:string; lastName:string; } function sayMyName(user:User){ console. ...

Using Karma-Jasmine to Import Spy without anyImplicitAny

If I include the configuration setting noImplicitAny in the tsconfig.json file of my Angular 4+ project: "noImplicitAny": true, ...and then try to import and use Spy in a unit test: import { Spy } from "karma-jasmine"; I encounter this console error wh ...

Tips for retrieving the most recent UI updates after the container has been modified without the need to refresh the browser

Currently, I have developed a micro frontend application in Angular using module federation. This application is hosted in production with Docker containers. My main concern revolves around how to update the UI changes for the user without them needing to ...

Initialization error: ServiceIdentifier Symbol(LicencesService) not found in bindings

Encountering an error while compiling the code: Unable to find matching bindings for serviceIdentifier: Symbol(LicencesService) The issue seems to be in the constructor of the HTTP on server.ts file. How can I properly inject the LicencesService? Here is ...

Navigating through pages in your IONIC 3 application: A guide to routing

I have been working on an Ionic 3 project and currently using NavController for page navigation. For example: this.navCtrl.push(DetailsPage); However, I now need to switch to Angular routing. I came across a similar query regarding Ionic 2 in this link. ...

Testing Angular components with Jasmine and subscribing to EventEmitters

I am currently testing a specific component in Angular, focusing on the eventEmitter located in the userService. import { Component, OnInit, OnDestroy } from '@angular/core'; import { RegisterUser } from 'src/app/classes/register-user'; ...

Having trouble running npm install while using a public wifi network?

Recently, I purchased a new laptop with Windows 10 and successfully installed nodejs along with angular 10. However, I encountered a problem when attempting to run ng new myproject, as it took an incredibly long time to install dependencies and seemed to h ...

Tips on sorting through an array using Angular 11 and data

I'm working on a subpage that contains a large amount of detailed data in the form of thousands of records. I want to filter this data based on the "id" from my route, which is also included in the dataset. However, I've run into some difficultie ...

Choosing the most suitable stylesheet in Angular 8 when multiple CSS files are present

In my project, I have several CSS stylesheets for angular components. I am curious if there is a method to designate a preferred stylesheet when multiple sheets loaded by a component contain the same styles but with different values. ...

The data retrieved from an Angular observable subscription is inaccurate due to miscalculations

My observable delivers data structured like this: export interface expResults { user: User; results: { experiment: Experiment attempts: number passed: boolean }[]; } Now, I want to calculate the rate of experiments performed at least onc ...

Layout your Angular components with a column design using Flex Layout

Is there a way to adjust the width of a child component in an fxLayout set to column? Take this example for reference: https://stackblitz.com/edit/angular-fxlayout-custom-breakpoints?file=app%2Ftest.component.ts In the provided example, there are three f ...

The defaultValue of the Observable TextArea is blank space following the transmission of a sendMessage using SignalR in a Typescript

i am currently in the process of modifying a basic SignalR Chat feature. Here is the situation: when a user sends a message, the message gets sent successfully. However, the textarea from which it was sent remains filled with empty space (aside from the p ...

"Encountering issues with iterating over a Mongo cursor after upgrading to Angular2 rc5

I'm currently working on a meteor/angular2 application and recently upgraded to rc5. Unfortunately, I encountered an error while trying to display a list of messages based on a mongo cursor in my component. I've tried to simplify the code for bet ...

The Angular-slickgrid is encountering an issue where it is unable to access the property "hostView" as it

Hey there developers, I've been experimenting with the angular slickgrid library and attempting to incorporate the rowDetailView feature it offers. The issue I'm facing is that while I can expand the view by clicking on it, I'm unable to c ...

Angular-CLI: The Elusive Location of system-config.js

Upon initializing an Angular-cli project, one thing that stands out is the absence of a systemjs.config.ts file. Various angular plugins recommend adjusting the systemjs.config.ts. For instance: To do so, add these lines to systemjs.config.js: var ma ...

Is it possible to use square brackets in conjunction with the "this" keyword to access a class property using an expression?

export class AppComponent implements OnInit { userSubmitted = false; accountSubmitted = false; userForm!: FormGroup; ngOnInit(): void {} onSubmit(type: string): void { this[type + 'Submitted'] = true; if(this[type + 'For ...

Instructions on retrieving keyboard input values from Angular's Material Datepicker using Reactive Forms

Currently, I am using Angular along with material datepicker within Reactive Forms and moment's MomentDateModule. My concern lies in extracting the value that a user types into the form via keyboard input. If you wish to see an example of this scenar ...

` Detecting initialized properties of classes using Eslint rule`

When useDefineForClassFields:true is used, the code below becomes invalid when targeting es2022: Cannot read properties of undefined (reading 'array') class Bar { array = new Array(); } class Foo { foo = this.bar.array; // Property &apo ...

What is the best way to execute operations on two distinct datasets within a single function using RxJS?

Is there a way to perform operations on two separate data collections within a single function in RxJS, returning an observable instead of void? This function is located within a service and I intend to subscribe to it from my component. I believe some re ...

The child_process module in Typescript is unable to recognize execSync as a valid function and returns

Currently, I am attempting to utilize the execSync function from the child_process module. However, after importing the module: /// <reference path="../../../../GENERAL/d.ts/node/node.d.ts" /> var execSync = require("child_process").execSync; Upon ...