Hello guys!
How know, what the issue there, I doing everything following guide, but input doesn’t see data from parent Component, I asked chatgpt, but it gave me same result, but if I declare value of this variable in component, that trying to input, everything is okay, and I can see a value.
//child html-code
<div class="div py-6 px-4 border rounded flex items-center flex-row mb-2">
<h1>This is child</h1>
<p>---{{childData}}---</p>
</div>
//child component
import { Component, Input } from '@angular/core';
import { Iproduct } from 'src/app/data-models/Iproduct';
@Component({
selector: 'app-product-component',
templateUrl: './product-component.component.html',
styleUrls: ['./product-component.component.scss']
})
export class ProductComponentComponent {
@Input() childData: string;
// @Input() childData: string = 'childData'; - this will set the value
}
//parent html code
<app-product-component>
[childData] = "parentData"
</app-product-component>
//parent component
import { Component } from '@angular/core';
import { Iproduct } from './data-models/Iproduct';
import { product as data } from './data/product';
@Component({
//setting the selector for index.html
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.scss']
})
export class AppComponent {
title = 'Anular Application';
products: Iproduct[] = data;
}>Solution :
Just change this
<app-product-component>
[childData] = "parentData"
</app-product-component>
To
<app-product-component [childData]="parentData">
</app-product-component>
And if you want to pass a string directly as an input
<app-product-component [childData]="'someValue'">
</app-product-component>