I am having trouble passing the FailedProductId from Component1 to Component2 using @Input. Below is the code snippet:
export class Component1 implements OnInit {
public FailedProductId="produt";
constructor(private employeeService: ProductService) {}
}
The .html file of Component1:
<div>
<app-device-list [parentData]="FailedProductId"></app-device-list>
<table>
<th>Id</th><th>Active</th><th>Name</th><th>Platform</th><th>ManagedBy</th>
<th>Compliant</th> <th>InProgress</th><th>Failed</th>
<tr *ngFor="let lst of products.Products; let i = index" border="1">
<td>{{lst.GroupName}}</td>
<td (click)="devicesClicked()">{{lst.Compliant}}</td>
<td>{{lst.InProgress}}</td>
<td><a routerLink="/devicelist/{{lst.ID.Value}}">{{lst.Failed}}</a></td>
</tr>
</table>
</div>
Component2.ts file content:
@Component({
selector: 'app-device-list',
template: '<h2>{{"Hello "+ parentData}}</h2>'
})
export class Component2 implements OnInit {
@Input() public parentData;
}
The line
'<h2>{{"Hello "+ parentData}}</h2>'Hello undefined.