title: Angular Component Constructor Called Twice
body: <p>I am new to Angular and am running into an issue with the constructor on a child component being called twice, and the second time it is called it is clearing the properties set the first time.</p>
  
  <p>This is the parent component:</p>
  
  <pre><code>@Component({
      selector: 'parent-item',
      templateUrl: '...',
      providers: [ItemService]
  })
  export class ParentItemComponent {
      public parentItemId;
      public model: ParentItem;
  
      constructor(itemService: ItemService, elm: ElementRef) {
          this.parentItemId = elm.nativeElement.getAttribute('parentItemId'); 
          itemService.getParentItem(this.parentItemId).subscribe(data =&gt; this.model = data);
      }
  }
  </code></pre>
  
  <p>And in the template the child component is referenced:</p>
  
  <pre><code>&lt;child-items [parentItemId]="parentItemId"&gt;Loading...&lt;/&lt;child-items&gt;
  </code></pre>
  
  <p>This is the child component:</p>
  
  <pre><code>@Component({
      selector: 'child-items',
      templateUrl: '...',
      providers: [ItemService]
  })
  export class ChildItemsComponent {
      @Input() public parentItemId: number;
      public items: Observable&lt;ChildItem[]&gt;;
  
      constructor(private itemService: ItemService) {
          console.log("constructor");
      }
  
      ngOnInit() {
          if (this.parentItemId) {
              this.items = this.itemService.getChildItems(this.parentItemId);
          }  
          else {
              console.log("Parent Id not set!");
          }
      }
  }
  </code></pre>
  
  <p>And finally the child component template:</p>
  
  <pre><code>&lt;tr *ngFor="let item of items | async"&gt;
      &lt;td&gt;...&lt;/td&gt;
  &lt;/tr&gt;
  </code></pre>
  
  <p>The child components constructor is being called twice, and the second time it is called the parentItemId is set to null and the items property is cleared. If I hardcode the parentId instead of using the input the data is being properly received and displayed in the template, but using the input value the template shows no results.</p>
  
  <p>I have created a plunker which shows the same behavior here: <a href="http://embed.plnkr.co/xaJtfNgbWCUPap2RCJUA/" rel="noreferrer">http://embed.plnkr.co/xaJtfNgbWCUPap2RCJUA/</a></p>