An error is being thrown when trying to access a property of an initialized complex object in ngOnInit

Question

An error is being thrown when trying to access a property of an initialized complex object in ngOnInit

Passing a parameter to a child component in the parent component:

<app-conf-name
    [inputName]='person.name'
    (updatedNameEvent)='updateName($event)'>
</app-conf-name>

Implemented within the TypeScript file of the component

@Input() inputName: Names;
@Output() updatedNameEvent: EventEmitter<Names> = new EventEmitter();
constructor() { }
editName: Names = new Names();

ngOnInit() {
  this.editName = this.inputName;
}

The Names class in the code sets default values for various fields like correctPerson.

export class Names {
  indivId: number;
  firstName: string;
  prefName: string;
  lastName: string;
  suffix: string;
  updated: boolean = false;
  correctPerson: boolean = false;
  correctAsIs: boolean = false;
  correctionDate: Date;
  addedDate: Date;
}

Encountering an error message:

ERROR TypeError: Cannot read property 'correctPerson' of undefined
    at Object.View_ConfNameComponent_0._co [as updateDirectives] (ConfNameComponent.html:9)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13056)
    at checkAndUpdateView (core.es5.js:12236)
    at callViewAction (core.es5.js:12601)
    at execComponentViewsAction (core.es5.js:12533)
    at checkAndUpdateView (core.es5.js:12242)
    at callViewAction (core.es5.js:12601)
    at execComponentViewsAction (core.es5.js:12533)
    at checkAndUpdateView (core.es5.js:12242)
    at callViewAction (core.es5.js:12601)

The object person is initialized through a service called in the parent component.

Parent Component

person: Person = new Person();
constructor(private peopleService: PeopleService) { }
state: string = 'one';
ngOnInit() {
    this.peopleService.getPersonById(this.Id).subscribe((data)=>{
      this.person = data;
      console.log(this.person);
      this.person.name.correctPerson = false;
      this.person.name.correctAsIs = false;
      this.person.email.correctAsIs = false;
      this.person.phone.correctAsIs = false;
      this.person.address.correctAsIs = false;
    });
}

Note that I've re-initialized the property causing the error with a new assignment.

The original code for the child component used the input variable as the working variable.

Despite multiple attempts to resolve issues and debug, the final child component remains problematic even after adding ngIf statements for validation.

For further details, refer to the complete GitHub Repository

angular typescript

Answer 1

Answer №1

It's recommended not to access @Input() parameters in the OnInit lifecycle hook, but rather in the OnChanges hook. Since it is an Observable, there is no guarantee that it will be resolved by the time OnInit is triggered.

For more information, you can refer to this link: Angular 2/4 @Input only moves intrinsics - not lists or objects

Answer 2

It's recommended not to access @Input() parameters in the OnInit lifecycle hook, but rather in the OnChanges hook. Since it is an Observable, there is no guarantee that it will be resolved by the time OnInit is triggered.

For more information, you can refer to this link: Angular 2/4 @Input only moves intrinsics - not lists or objects

Answer 3

Answer №2

Here, you are engaging in lazy loading of data and initializing that data within the parent component's ngOnInit lifecycle hook. Consequently, it is necessary to consider the possibility of the child component's @Input() binding being undefined.

The reason for this potential scenario lies in the timing of property assignments with @ViewChild occurring before ngOnInit, while @ContentChild properties are set post initial rendering. As a result, the parent component's template is processed prior to the data being fully loaded, potentially resulting in passing undefined values to the child's @Input() binding.

Please note: I may need my morning coffee to verify the accuracy of the above explanation.

In any case, it is advisable to always handle cases of missing bindings within components.

@Input() inputName: Names;
@Output() updatedNameEvent: EventEmitter<Names> = new EventEmitter();
constructor() { }
editName: Names;

ngOnInit() {
  this.updateEditName();
}

ngOnChanges(changes: SimpleChanges) {
   if('inputName' in changes) {
       this.updateEditName();
   }
}

private updateEditName() {
      this.editName = this.inputName || new Names();
}

Answer 4

Here, you are engaging in lazy loading of data and initializing that data within the parent component's ngOnInit lifecycle hook. Consequently, it is necessary to consider the possibility of the child component's @Input() binding being undefined.

The reason for this potential scenario lies in the timing of property assignments with @ViewChild occurring before ngOnInit, while @ContentChild properties are set post initial rendering. As a result, the parent component's template is processed prior to the data being fully loaded, potentially resulting in passing undefined values to the child's @Input() binding.

Please note: I may need my morning coffee to verify the accuracy of the above explanation.

In any case, it is advisable to always handle cases of missing bindings within components.

@Input() inputName: Names;
@Output() updatedNameEvent: EventEmitter<Names> = new EventEmitter();
constructor() { }
editName: Names;

ngOnInit() {
  this.updateEditName();
}

ngOnChanges(changes: SimpleChanges) {
   if('inputName' in changes) {
       this.updateEditName();
   }
}

private updateEditName() {
      this.editName = this.inputName || new Names();
}

Answer 5

Answer №3

One issue with the code above is that the server call is conducted asynchronously. This signifies that when the child component is initialized, the name may not yet be defined.

The data flow unfolds in the following manner:

The parent component is first created with an empty People object (thus preventing any issues with calling people.name since people is never undefined).
During initialization, the parent component initiates the asynchronous call.
Following initialization, the child component is instantiated without waiting for the asynchronous call to complete.
Subsequently, the child component encounters an error because the parent object's name property (people) is still undefined (most likely accessed within the child component's HTML).

To address this problem, there are two potential solutions. The first involves adding an ngIf directive to the child component tag as shown below:

<app-conf-name 
    *ngIf='person.name' [inputName]='person.name'
    (updatedNameEvent)='updateName($event)'>
</app-conf-name>

The second solution entails utilizing a resolve guard, which resolves the data from the service before the parent component is initialized.

In the route definition:

{
  path: 'your-path', component: YourParentComponent,
  resolve: {
    person: PersonResolveGuard
  }
}

Your resolve guard will resemble this:

@Injectable()
export class BlockingResolveGuard implements Resolve<Person> {

    constructor(private peopleService: PeopleService) {}

    resolve(route: ActivatedRouteSnapshot):Observable<Person> {
       // Call to service
    }
}

Within your parent component, inject the current ActivatedRoute:

constructor(private route:ActivatedRoute, private peopleService: PeopleService) { }

In the ngOnInit() method:

ngOnInit() {
    this.route.data.resolve((data:{person:Person}) => {
       this.person = data.person;
    }
}

This Angular documentation provides a detailed explanation on how resolve guards and other guards function https://angular.io/guide/router#resolve-guard

It is important to note that with the second solution, you must resolve the ID of the person for whom you are retrieving data from the route parameters using ActivatedRouteSnapshot in the resolve guard.

Answer 6

One issue with the code above is that the server call is conducted asynchronously. This signifies that when the child component is initialized, the name may not yet be defined.

The data flow unfolds in the following manner:

The parent component is first created with an empty People object (thus preventing any issues with calling people.name since people is never undefined).
During initialization, the parent component initiates the asynchronous call.
Following initialization, the child component is instantiated without waiting for the asynchronous call to complete.
Subsequently, the child component encounters an error because the parent object's name property (people) is still undefined (most likely accessed within the child component's HTML).

To address this problem, there are two potential solutions. The first involves adding an ngIf directive to the child component tag as shown below:

<app-conf-name 
    *ngIf='person.name' [inputName]='person.name'
    (updatedNameEvent)='updateName($event)'>
</app-conf-name>

The second solution entails utilizing a resolve guard, which resolves the data from the service before the parent component is initialized.

In the route definition:

{
  path: 'your-path', component: YourParentComponent,
  resolve: {
    person: PersonResolveGuard
  }
}

Your resolve guard will resemble this:

@Injectable()
export class BlockingResolveGuard implements Resolve<Person> {

    constructor(private peopleService: PeopleService) {}

    resolve(route: ActivatedRouteSnapshot):Observable<Person> {
       // Call to service
    }
}

Within your parent component, inject the current ActivatedRoute:

constructor(private route:ActivatedRoute, private peopleService: PeopleService) { }

In the ngOnInit() method:

ngOnInit() {
    this.route.data.resolve((data:{person:Person}) => {
       this.person = data.person;
    }
}

This Angular documentation provides a detailed explanation on how resolve guards and other guards function https://angular.io/guide/router#resolve-guard

It is important to note that with the second solution, you must resolve the ID of the person for whom you are retrieving data from the route parameters using ActivatedRouteSnapshot in the resolve guard.

An error is being thrown when trying to access a property of an initialized complex object in ngOnInit

Answer №1

Answer №2

Answer №3

Similar questions

What is the method for declaring personalized environment variables in Angular?

There was an issue retrieving the metadata for the bootstrap package using the git+ssh protocol

The Angular project was functioning properly when tested locally, but encountered an error in the Quill Editor during the building process

Troubleshooting the issue of having multiple menu items in Material UI

Enhance the window.top functionality with TypeScript, enhance Visual Studio Code suggestions

Steps for executing a single test across multiple URLs using Playwright

Should I call `complete()` on the takeUntil Subject within the ngOnDestroy method?

Angular encountering issues with loading external JavaScript files due to the error: ENOENT - indicating that the specified file or directory does

Tips for enhancing functionality with dependencies in Angular 2

The Angular compiler encounters an error when working with jsonwebtoken

Struggling to successfully pass a function as an argument to the setTimeout method within an array in node.js using TypeScript

Issue: The specified entry point "@angular/flex-layout" is lacking necessary dependencies

Modifying elements in an array using iteration in typescript

Encountering issues with 'ng test' command following the update to @Angular/cli version 1.1.0

How can I simulate a callback function that was not tested?

Is there a way in Angular 13 to incorporate specific conditions for including HTTP_INTERCEPTORS depending on the location of the HTTP call being made?

What exactly is the meaning of `react-text`?

I'm interested in utilizing Angular 2 to parse a CSV file and showcase the data in a table

Alert: TypeScript Linter Warning

TS - The 'new' keyword can only be used with a void function