Pass variable from parent component to child component

Issue

I don't really know what I'm doing wrong here.

I'm trying to pass the error title and message from LoginComponent to ErrorComponent.

LoginComponent :

export class LoginComponent  {
  @Input() public  ErrorTitle: string;
  @Input() public   ErrorMessage: string;
  title: 'Incorrect credentials';
  message: 'This password do not match any credentials'

<app-error *ngIf="isError == true" [ErrorTitle]="title" [ErrorMessage]="message"></app-error>

ErrorComponent :

<p class="text-sm font-medium text-red-700">{{ title }}</p>
<p class="mt-1 text-sm text-gray-500">{{ message }}</p>

It shows me this error :

Property 'title' does not exist on type 'ErrorComponent'

So if I declare them without giving them a value, it doesn't show the error, but it's blank.

 title: string;
 message: string;

Solution

There are few errors in your code.

LoginComponent

1. The ErrorTitle and ErrorMessage should be placed in ErrorComponent but not LoginComponent. With existing code, you are expecting that your LoginComponent to received the mentioned parameters as:

<app-login [ErrorTitle]="/* title */" [ErrorMessage]="/* message */"></app-login>

2. Assign value to title and message variables should use = operator, : is for specifying the type.

export class LoginComponent  {
  title = 'Incorrect credentials';
  message = 'This password do not match any credentials';
}

ErrorComponent

1. Add **ErrorTitle and ErrorMessage input parameter.

export class ErrorComponent implements OnInit {

  @Input() ErrorTitle: string;
  @Input() ErrorMessage: string;
}

The HTML template for ErrorComponent should be:

<p class="text-sm font-medium text-red-700">{{ ErrorTitle }}</p>
<p class="mt-1 text-sm text-gray-500">{{ ErrorMessage }}</p>

Sample StackBlitz Demo

Answered By - Yong Shun