avoliva avoliva - 11 months ago 60
TypeScript Question

Issue communicating between two components in angular2 using @Input

EDIT: Figured it out, I just moved all the html in the body of

to the
template as index.html won't parse any of the template code.

My issue is that I have a ParentComponent which reads from a service, and posts the data to a sidebar. When you click an item in the sidebar it's supposed to post details about that parent in the main section of the page. I'm trying to use
to communicate between the two components but it doesn't seem to be triggering. I'm not quite sure why but I just need to knock this out because it seems like a relatively simple problem but I can't figure out a solution. Any help is appreciated.


<div class="content">This is a header</div>
<div class="container">
<div class="sidebar">
<div class="content">
<div class="main-content">
<div class="content">
<child-cmp [id]="selectedItem.id"></child-cmp>
<div class="clearfix"></div>


selector: 'child-cmp',
export class ChildComponent {
@Input() set id(n) {
getData(id: number): void {


moduleId: module.id,
selector: 'parent-items',
template: `<ul class="items">
<li *ngFor="let item of items"
(click)="selectedItem = item"
[class.selected]="item === selectedItem">{{item.name}}</li>
export class ItemsComponent implements OnInit {
items: Item[];
selectedItem: Item;
constructor(private itemService: ItemService) {};
getItems(): void {
.then(items => this.items = items);
ngOnInit(): void {

Answer Source

<child-cmp [id]="selectedItem.id"></child-cmp> must be in ItemsComponent's template.