afirdousi

input {
  border:1px solid #0080ff;
  background-color:#fff;
  color:#0080ff;
}

input:disabled,
input[disabled]{
  border:1px solid #d3d3d3;
  background-color:#fafafa;

afirdousi

input {
  cursor:pointer;
  padding:10px;
}

input:disabled,
input[disabled]{
  cursor:auto;
}

afirdousi

input {
  cursor:pointer;
  padding:10px;
  border:1px solid 	#0080ff;
  background-color:#fff;
  color:#0080ff;
}

input:disabled,
input[disabled]{

afirdousi

<div class="cell" [ngClass]="classes">
    <label class="label">
        <span [innerHTML]="label"></span>
    </label>
    <input type="text"
           class="input"
           [disabled]="disabled"
           [placeholder]="placeholder">
    <div class="alert"> {{ alert }} </div>
</div>

afirdousi

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

@Component({
    selector: 'custom-button',
    templateUrl: 'src/custom-button.component.html',
    styleUrls: ['src/custom-button.component.css']
})
export class CustomButton {
  
  classes: string; 

afirdousi

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

@Component({
    selector: 'custom-input',
    templateUrl: 'src/custom-input.component.html',
    styleUrls: ['src/custom-input.component.css']
})
export class CustomInput {
  
  classes: string; 

afirdousi

export class CustomRange extends AbstractValueAccessor<number> {
  
  @Input() label: string;
  
}

afirdousi

export class CustomInput extends AbstractValueAccessor<string> { 
  
  @Input() label: string;
  
}

afirdousi

export abstract class AbstractValueAccessor<T> implements ControlValueAccessor {

    _value: T = '';
    get value(): T { return this._value; };
    set value(v: T) {
      if (v !== this._value) {
        this._value = v;
        this.onChange(v);
      }
    }

afirdousi

export function MakeProvider(type : any){
  return {
    provide: NG_VALUE_ACCESSOR,
    useExisting: forwardRef(() => type),
    multi: true
  };
}