Parent variable in Angular Type Script causing undefined error

Can anyone explain why I keep receiving an undefined error?

export abstract class BaseEditorComponent implements IPropertyEditor, OnDestroy {

  @Input()
  public element: BpmnJS.IRegistryElement; 

--more code here


export class CommonPropertiesEditorComponent extends BaseEditorComponent {

  constructor(
  ) {
    super();
  }

  public get elementId(): string {
    return this.element.id;
  } 

export class ExclusiveGatewayEditorComponent extends CommonPropertiesEditorComponent implements OnInit {

  public model: IUserTaskDef;
  public outGoing: Sequences[];

  constructor(
    private service: ExclusiveGatewayService
  ) {
    super();
    this.model = {} as any;
    this.outGoing = this.getOutGoingSequences();
  }

  public getOutGoingSequences(): Sequences[] {

    return this.service.getOutgoingSequences(this.elementId); //This is undefined.
  }

TypeError: Cannot read property 'id' of undefined at ExclusiveGatewayEditorComponent.get [as elementId] (common-properties-editor.component.ts:16) at ExclusiveGatewayEditorComponent.push../src/app/properties/editors/gateways/exclusive-gateway/exclusive-gateway-editor.component.ts.ExclusiveGatewayEditorComponent.getOutGoingSequences (exclusive-gateway-editor.component.ts:27) at new ExclusiveGatewayEditorComponent (exclusive-gateway-editor.component.ts:22) at createClass (core.js:21148) at createDirectiveInstance (core.js:21027) at createViewNodes (core.js:29387) at createRootView (core.js:29301) at callWithDebugContext (core.js:30309) at Object.debugCreateRootView [as createRootView] (core.js:29819) at ComponentFactory_.push../node_modules/@angular/core/fesm5/core.js.ComponentFactory_.create (core.js:20506)

When I input the same function into the HTML page, it works perfectly and displays the value of element.id

<input class="form-control" type="text" name="txtId" [(ngModel)]="elementId" readonly>
angulartypescript

Answer №1

Avoid accessing @Input() properties in the constructor as they are not available at that stage. It is recommended to do so inside the ngOnInit() method.

export class SpecialGatewayEditorComponent extends CustomPropertiesEditorComponent implements OnInit {

  // ...

  constructor(
    private service: SpecialGatewayService
  ) {
    super();
    this.model = {} as any;    
  }

  ngOnInit() {
    this.outBound = this.retrieveOutBoundSequences();
  }
}

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

Implementing delayed loading of Angular modules without relying on the route prefix

In my application, I am using lazy loading to load a module called lazy. The module is lazily loaded like this: { path:'lazy', loadChildren: './lazy/lazy.module#LazyModule' } Within the lazy module, there are several routes def ...

javascriptangulartypescript

Angular unable to send object to HTML page

Struggling with learning angular, encountering new challenges when working with objects in different components. In two separate instances, try to implement two different mechanisms (microservice or service component serving an object directly). This speci ...

javascriptangulartypescriptrxjs

Tips for detecting when multiple image sources have finished loading in an *ngFor loop

I have an array of image URLs that are displayed in a repetitive manner using the *ngFor directive in my HTML code. The technology stack used for this project includes Ionic 4 and Angular 10. <div *ngFor="let url of imagesToLoad; let i = index&quo ...

javascripthtmlangularionic4

What is the best way to use Immer to update Zustand state when incorporating objects that are added through a controlled form using React-Hook-

Having some trouble with integrating Zustand and Immer using React-Hook-Form. My goal is to capture a series of values from a form, store them in a list, and allow for the addition of new objects to that list. In this scenario, the user inputs data for a ...

javascriptreactjsarraystypescript

I have been working on building a login page for my node.js project, however, I have been facing challenges with retrieving the stored data from the database

Below is the snippet of code to add a new user into the database const User = require('../database/models/User') module.exports = (req, res) => { User.create(req.body, (error, user) => { if (error) { return res.redi ...

node.jsangularnpm

Why doesn't WebStorm display TypeScript inspection errors in real-time?

I'm currently utilizing WebStorm 2017.2.4 in conjunction with Angular 4.3 - I am facing an issue where TypeScript errors are not being displayed: https://i.sstatic.net/pcLQX.png Query How can I enable real-time inspections to occur immediately? (I ...

javascriptangulartypescriptwebstorm

Unit testing in Angular 2+ involves testing a directive that has been provided with an injected window object

Currently, I am faced with the challenge of creating a test for a directive that requires a window object to be passed into its constructor. This is the code snippet for the directive: import { Directive, ElementRef, Input, OnChanges, OnDestroy, OnInit ...

angulartypescripttestingangular2-directives

How can props be defined in Vue3 using Typescript?

When using Vue3's defineComponent function, it requires the first generic parameter to be Props. To provide props type using Typescript interface, you can do it like this: export default defineComponent<{ initial?: number }>({ setup(props) { ...

typescriptvue.jsvuejs3

Explore lengthy content within Angular 2 programming

I have a lengthy document consisting of 40000 words that I want to showcase in a visually appealing way, similar to HTML. I aim to include headers, paragraphs, and bold formatting for better readability. Currently, I am developing an Angular application. D ...

htmlangulartext

Display options based on the value selected in the preceding selection

How can I dynamically display select options in an Angular select based on a previously selected value? Take a look at the code snippet below. Here, I have implemented a conditional display of select options (Target 1/Target 2) based on the value selected ...

angulartypescriptvmware-clarity

Using Angular to prefill data in a few fields by using a Resolver, which will return an Observable within a subscriber

As I work on my Angular (8) application, I am looking to prepopulate certain fields from a service connected to the database. The use case involves prepopulating Address, Apartment, and other fields based on the zip code provided by another service. I att ...

angularrxjsobservablesubscriberesolver

Can you provide guidance on integrating TypeScript with React version 15.5?

I'm looking for the best approach to integrate TypeScript and React following the separation of PropTypes into a separate project with version 15.5. After upgrading from 15.4 to 15.5, everything seems to be running smoothly except for a warning in th ...

reactjstypescriptreact-proptypes

The TypeScript alternative to Axios request with native fetch functionality

I have a function that sends a JWT validation request: const sendValidateJWTRequestFetch = (url: string, token: string) => fetch(url, { method: 'GET', mode: 'cors', headers: { Authorization: token, 'Ac ...

typescriptaxiosfetch

No response data being displayed after Angular post request

After sending a POST request via Postman, I received the expected response with a status of 400. However, when I tried sending the same request using Angular's http.post in the browser, I only received a 400 error without any response data. https://i ...

javascriptnode.jsangulartypescriptdjango-rest-framework

What is the best way to customize a React component using TypeScript?

Let's say I have a functional component like this: function MyComp({a, b, c, d, e, f}: any) { ... } Is there a way to create a specialized version of this component where I provide values for "a" and "b," but allow other users to choose the r ...

reactjstypescript

Loop through the array while handling a promise internally and ensure completion before proceeding

I am currently working on populating a response array with Firestore snapshots and creating download links for stored files within each snapshot. Despite trying various solutions involving Promises, the response array consistently ended up being null. do ...

javascriptnode.jstypescriptfirebaseexpress

Unusual behavior exhibited by ng-if within a widget

Hey there, seeking some assistance here. I'm currently making edits to a widget and within the client HTML code, I've come across two ng-if statements (the first one was already there, I added the second). <li> <a ng-if="data.closed ...

htmlangularservicenow-client-scripts

Issue with Angular date field not displaying invalid input when form is submitted

I am encountering an issue with my simple form that contains only one date control. Whenever I input an invalid date like 30-Feb-2018, the control becomes invalid and my CSS style triggers a red border to indicate the error. The problem arises when the us ...

htmlangularformshtml-input

Encountered an Angular 2 error: NullInjectorError - Http provider not found

I've encountered an issue while trying to access a JSON GitHub service, receiving the error message NullInjectorError: No provider for Http! Although I've attempted to add providers throughout the code, my efforts have been unsuccessful. I' ...

angulartypescriptangular-providers

Steps for setting up tsconfig.json for Chrome extension development in order to utilize modules:

While working on a Chrome plugin in VS Code using TypeScript, I encountered an issue with the size of my primary .ts file. To address this, I decided to refactor some code into a separate module called common.ts. In common.ts, I moved over certain constan ...

typescriptgoogle-chrome-extension