将变量从父组件传递给子组件

Question

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;

Answer 1

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