Angular: Passing data from parent to child with input undefined

Question

I have created a popup box component with error information (if there is an error).

At the moment I have an interface.

status-message.ts

export interface Status {
  message: string;
}

login.component.ts (parent)

import { Status } from '../interfaces/status-message';

export class LoginComponent implements OnInit {
  statusFailed: boolean = false;
  status: Status;

  login() {
    this.authService.login(formData).subscribe(
      (res) => {
        if (res.status === 'sucsess') {
          console.log('success');
        } else if (res.status = 'failed') {
           this.statusFailed = true;
           this.status.message = res.message
        }
      }
    )
  }
}

login.component.html

<app-info-box *ngIf="statusFailed" [ngClass]="{ 'error-box': statusFailed}" [status]="status"></app-info-box>

info-box.component.ts (child)

import { Status } from '../interfaces/status-message';

export class InfoBoxComponent implements OnInit {
  @Input() status: Status;
}

info-box.component.html

<span> {{status}} </span>

Whenever I run this I am getting an error, core.js:6014 ERROR TypeError: Cannot set property 'message' of undefined and the child component shows no text, but shows the styling. How can I get this working? Thanks

Shumail · Accepted Answer · 2019-10-12 21:41:03Z

2

You are forgetting to initialize status so when you try to do this.status.message = res.message, it throws error because status is still undefined.

A quick fix is to initialize status like following in your login.component class:

status: Status = {
   message: ''
}

edited Oct 12, 2019 at 21:41

answered Oct 12, 2019 at 21:33

Shumail

3,1534 gold badges30 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular: Passing data from parent to child with input undefined

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related