I'm encountering difficulties in establishing communication between two components within Angular. Despite my efforts, I can't pinpoint where I am going wrong.
Specifically, I have a table component and I aim to open a modal window (which is a separate component) displaying the details of the row clicked on within the table. While I’ve successfully set up the modal to open upon clicking, no data is being displayed.
export class TableComponent implements OnInit {
posts: Post[];
selected: any;
selectRow(post) {
this.selected = post;
document.getElementById('modalActivator').click();
}
private setPosts(posts) {
this.posts = posts;
}
constructor(
private restCallService: RestCallService
) {}
ngOnInit() {
this.restCallService.getPosts().then(posts => this.setPosts(posts))
}
}
Table HTML:
<table>
<tbody>
<tr *ngFor="let post of posts;"
(click)="selectRow(post)">
<td>{{post.userId}}</td>
<td>{{post.id}}</td>
<td>{{post.title}}</td>
</tr>
</tbody>
</table>
<app-table-row-expanded> [postFromParent]="selected"</app-table-row-expanded>
The modal opens, but could the lack of data communication be the issue here?
export class TableRowExpandedComponent implements OnInit {
@Input() postFromParent: Post
constructor() {}
ngOnInit() {}
}
I won’t delve into the entire modal HTML. Here’s what resides in the modal body:
<p>{{postFromParent?.body}}</p>
Any assistance would be greatly appreciated.
PS, I am utilizing Angular CLI with Eclipse and have encountered some peculiar bugs (such as code not compiling unless I close and reopen the file), though it seems unrelated to this issue.