Angular 2 @Input - How to bind ID property of child component from parent component?
<p>In my parent component, I want to create a child component with a unique ID associated with it, and I want to pass that unique ID into the child component, so the child component can put that ID on its template.</p>

<p>Parent template:</p>

<pre><code>&lt;ckeditor [ckEditorInstanceID]="someUniqueID"&gt; &lt;/ckeditor&gt;
</code></pre>

<p>Here is the child component:</p>

<pre><code>import { Component, Input } from '@angular/core'

var loadScript = require('scriptjs');
declare var CKEDITOR;

@Component({
   selector: 'ckeditor',
   template: `&lt;div [id]="ckEditorInstanceID"&gt;This will be my editor&lt;/div&gt;`
})
export class CKEditor {

   @Input() ckEditorInstanceID: string;

   constructor() {
      console.log(this.ckEditorInstanceID)
   }

   ngOnInit() {

   }

   ngAfterViewInit() {
      loadScript('//cdn.ckeditor.com/4.5.11/standard/ckeditor.js', function() {
         CKEDITOR.replace(this.ckEditorInstanceID);
         console.info('CKEditor loaded async')
      });
   }
}
</code></pre>

<p>What am I missing? I can't seem to get the child component to receive the value of "someUniqueID". it is always undefined.</p>

<p><strong>UPDATE:</strong> I was able to get the child component to receive the value "someUniqueID. Code udpated above. However, I cannot reference the @Input property by calling <code>this.ckEditorInstanceID</code> because <code>this</code> is undefined.</p>

<p>How do I reference the property I brought in via @Input?</p>