How to pass data to the input in angular html component using property binding

Question

I have data that I need to pass to input parameter in html but it is in html. How can I do that? What is the correct syntax for that

HTML

<div  *ngIf="fruits$ | async as fruit">
  <div>
    <app-fruits [badFruits]={{ fruit.badFruit }}></app-fruits>  / This line is in error
  </div>

How can I pass badFruit to the input parameter in the html

Answer 1

Try Using: [badFruits]="fruit.badFruit"

<div  *ngIf="fruits$ | async as fruit">
  <div>
    <app-fruits [badFruits]="fruit.badFruit"></app-fruits>  / This line is in error
  </div>
</div>

Answer 2

try this <app-fruits [badFruits]="fruit.badFruit">

Answer 3

parent view:

<div  *ngIf="fruits$ | async as fruit">
 <div>
  <app-fruits [badFruit]={{ fruit.badFruit }}></app-fruits>
 </div>
</div>

child controller:

@Input() badFruit;

child view:

<input type='text' [(ngModel)]="badFruit">

From the parent component view you bind the data you want to pass, then form the child controller declare that data: important the assignation works from left variable means the variable on the child and the one in the right it's value that comes from the parent. Once you have declared with the @Input() decorator you can access it from the child view.

Dis this work for you?