Angular 2 - formControlName inside component
<p>I want to create a custom input component that I can use with the FormBuilder API. How do I add <code>formControlName</code> inside a component?</p>

<p>Template:   </p>

<pre class="lang-html prettyprint-override"><code>&lt;label class="custom-input__label"
          *ngIf="label"&gt;
        {{ label }}
&lt;/label&gt;
&lt;input class="custom-input__input" 
       placeholder="{{ placeholder }}"
       name="title" /&gt;
&lt;span class="custom-input__message" 
      *ngIf="message"&gt;
        {{ message }}
&lt;/span&gt;
</code></pre>

<p>Component:</p>

<pre class="lang-ts prettyprint-override"><code>import {
    Component,
    Input,
    ViewEncapsulation
} from '@angular/core';

@Component({
    moduleId: module.id,
    selector: 'custom-input',
    host: {
        '[class.custom-input]': 'true'
    },
    templateUrl: 'input.component.html',
    styleUrls: ['input.component.css'],
    encapsulation: ViewEncapsulation.None,
})
export class InputComponent {
    @Input() label: string;
    @Input() message: string;
    @Input() placeholder: string;
}
</code></pre>

<p>Usage:</p>

<pre class="lang-html prettyprint-override"><code>&lt;custom-input label="Title" 
           formControlName="title" // Pass this to input inside the component&gt;
&lt;/custom-input&gt;
</code></pre>