The state is accurate despite receiving null as the return value

I'm feeling a bit lost here. I have a main component that is subscribing to and fetching data (I'm using the redux dev tools to monitor it and it's updating the state as needed). In component A, I am doing:

public FDC$ = this.store.pipe(select(fromRoot.getFDC));

Then in the template for the parent component, I'm passing FDC$ to a child component like this:

<app-order-list [fdc]="(FDC$ | async)"></app-order-list>

In the child component, I have fdc as an input.

When I try to console.log the fdc, it returns null but in the redux dev tools, it shows the correct state. It seems like the data isn't being sent from parent to child.

Edit: Adding selector

Root:

export const getCurrent= (state: State) => state.current;

export const getFDC= createSelector(current, state => state.FDC);

(In the root index, I call current so I can just use fromRoot.getFDC)

Answer №1

I made a foolish error by not updating the state before NgOnInit of the child component, causing the value to return null. I corrected this by implementing NgOnChange and now everything is working smoothly. Grateful for all your assistance!

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

Utilizing Nested ControlGroups in Angular2 rc1: A Comprehensive Guide

Seeking assistance with understanding the functionality of a control group. Attempting to implement something similar to this: app.component.ts: import { Component, OnInit } from "@angular/core"; import { FORM_DIRECTIVES, FormBuilder, ControlGroup } from ...

What is the purpose of the Angular Material dashboard schematic boilerplate code?

After utilizing an Angular schematic, specifically ng generate @angular/material:dashboard, the generated code in the component.ts file looks like this: cards = this.breakpointObserver.observe(Breakpoints.Handset).pipe( map(({ matches }) => { if (mat ...

The Vue3 module does not have any exported members available

I am seeking assistance with a Vue component. I have encountered an error message that states: Failed to compile. src/components/Btn/Btn.vue:11:14 TS2305: Module '"../../typings/button-type"' has no exported member 'ButtonType&apo ...

Has the object been altered to become undefined?

product.service.ts: import { Injectable } from '@angular/core'; import { Http, Response } from '@angular/http'; import { Observable } from "rxjs/Observable"; import 'rxjs/add/operator/map' @Injectable() export class ProductSe ...

What could be causing the React text input to constantly lose focus with every keystroke?

In my React project using Material-UI library, I have a component called GuestSignup with various input fields. const GuestSignup = (props: GuestSignupProps) => { // Component code goes here } The component receives input props defined by an ...

Is there a way to use router.navigate conditionally when navigating?

I am currently dealing with a scenario where I have a table of entities. Upon clicking a row, the user is directed to another page which represents the entity (view page). The implementation utilizes router.navigate. The issue arises when an entity is del ...

Angular: utilizing a setter method for input manipulation

After diving into the angular docs, a particular sentence caught my attention: REF "evaluation of a template expression should have no visible side effects..." If I correctly grasp the concept, it's because during a "single detection cycle", the " ...

Instantiate an object of the ng.IQService type without using injection

Is it possible to define a local variable in the controller of type ng.IQService ( private _q: ng.IQService;) without requiring injection? My technology stack includes typescript and angular. The reason for this requirement is due to existing legacy code ...

What is the best way to verify a field against a set of string values using Typescript in a NestJS application

I currently have an Enum containing various timezones listed below export enum Timezones { 'Europe/Andorra', 'Asia/Dubai', 'Asia/Kabul', 'America/Antigua' } In the DTO file, I am attempting to valid ...

Saving many-to-many relationships with entities that are already saved in TypeORM

As a beginner in Typeorm, I have been working on a web page with Angular + Typeorm for the past few weeks. Despite my efforts to resolve this issue by myself and researching previously asked questions here on Stackoverflow, I have unfortunately been unable ...

Building an Angular 4 universal application using @angular/cli and integrating third-party libraries/components for compilation

While attempting to incorporate server side rendering using angular universal, I referenced a post on implementing an angular-4-universal-app-with-angular-cli and also looked at the cli-universal-demo project. However, I ran into the following issue: Upon ...

ng-zorro cascader lazy loading of data, the nzLoadData function returned as undefined

I am having trouble implementing lazy loading for a cascader. When I try to load the data, I get an error saying that 'this' is undefined in the load function. Interestingly, other functions within the component are working fine. Any help would b ...

Angular material tree with nested branches broken and in disarray

I'm facing a challenge with the UI issue of expanding trees on the last node, as it always creates excessive lines from the nodes, similar to the image below. I attempted to adjust the left border height but saw no change at all. Does anyone have any ...

AfterViewInit is not being impacted by property binding in the view

I'm currently integrating Mapbox into my Angular project and I am facing a challenge in displaying information from my component.ts file in the corresponding component.html. My approach involves using mat-vertical-stepper, where each step represents ...

operating efficiently even when producing an incorrect output type

Exploring Typescript for the first time on Codepen.io has left me puzzled. I'm unsure why, despite defining the function signature and return type with an interface, I am able to return a different type without encountering any errors. Is there somet ...

Guide on how to showcase the template by leveraging the roomList information with ngTemplateOutlet in Angular

TS roomList = [{ name: 'Room2' }] HTML <div class="Layout-body"> <ng-container *ngFor="let dt of roomList; index as i" [ngTemplateOutlet]="Room1" [ngTemplateOutletContext]="{ data: dt, i: i }&qu ...

Issue with utilizing Material Button Icon in the header of a datatable in Angular 7

I'm currently facing an issue with incorporating a refresh button into a Material Data Table on Angular 7. Strangely, instead of displaying the icon, refresh, it appears in italicized text. Below is the snippet of code causing the problem: <table ...

What is the method for defining a monkey patched class in a TypeScript declarations file?

Let's say there is a class called X: class X { constructor(); performAction(): void; } Now, we have another class named Y where we want to include an object of class X as a property: class Y { xProperty: X; } How do we go about defining ...

To initiate the development environment, execute the following command: `cross-env NODE_ENV=

[email protected] start /Users/ssurisettii/Documents/il-17g5-app cross-env NODE_ENV=development npm run webpack-development sh: cross-env: command not found npm ERR! code ELIFECYCLE npm ERR! syscall spawn npm ERR! file sh npm ERR! errno ENOENT npm ER ...

Show specific elements on the navbar in Angular 2 based on user login status

Currently, I am working on my initial project in Angular 2 which involves user authentication and its related features. The process has been smooth and the documentation/examples have proved to be very helpful thus far. My current focus is on incorporatin ...