afirdousi

@Component({
  selector: 'my-custom-input',
  templateUrl: 'src/my-custom-input.component.html',
  styleUrls:['src/my-custom-input.component.css'],
  encapsulation: ViewEncapsulation.Emulated
})
export class MyCustomInput implements AfterContentInit {

  @Input() label;
  

afirdousi

ngAfterContentInit(){
    
    console.log('injectedInput:', this.injectedInput);
    if(!this.injectInput){
     console.error('my-custom-input: no proper initialization: pass in a <input> element between <my-custom-input></my-custom-input> in your application');
    }
    
}

afirdousi

// This is test gist used in anasfirdousi.com's live template

afirdousi

import { Component, Input } from '@angular/core';

@Component({
  selector: 'custom-input',
  template:` 
    <div class="custom-input">
      {{ label }}
      <input type="text" />
    </div>
  `

afirdousi

<form>
  <custom-input [label]="'Name:'"></custom-input>
  <custom-range [label]="'IQ Level:'"></custom-range>
  <input type="checkbox" /> Interested in Angular?
</form>

afirdousi

import { Component, NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { ReactiveFormsModule } from '@angular/forms';

<!-- Skipping other code for brevity here -->

@NgModule({
  imports: [ BrowserModule, ReactiveFormsModule ],
  declarations: [ App, CustomInput, CustomRange ],
  bootstrap: [ App ]

afirdousi

import { Component } from '@angular/core'
import { FormControl, FormGroup } from '@angular/forms';

@Component({
  selector: 'my-app',
  template: `
    <div>
      <h2>{{name}}</h2>
        <form [formGroup]="basicForm">
          <custom-input [label]="'Name:'" formControlName="name"></custom-input>

afirdousi

interface ControlValueAccessor { 
  writeValue(obj: any): void
  registerOnChange(fn: any): void
  registerOnTouched(fn: any): void
  setDisabledState(isDisabled: boolean): void
}

afirdousi

registerOnChange(fn) {
    console.log(fn);
}

afirdousi

import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';

const customValueProvider = {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => CustomInput),
    multi: true
};

@Component({
 <!-- Skipping other stuff for brevity -->