custom-input.component.ts

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; 
  
  private _disabled : boolean;
  private _placeholder : string; 
  private _label : string;
  private _state : string; 
  private _alert : string;
  
  @Input()
  get disabled(): boolean{ return this._disabled; }
  set disabled(v){ this._disabled = v; }
    
  @Input()
  get _placeholder(): string{ return this._placeholder; }
  set _placeholder(v){ this._placeholder = v; }

  @Input()
  get label(): string{ return this._label; }
  set label(v){ this._label = v; }
  
  @Input()
  get state(): string{ return this._state; }
  set state(v){ 
    if( v === 'success'){
      this.classes = 'green';
    }  else if ( v === 'failure') {
      this.classes = 'red';
    } else {
      this.classes = '';
    }
  }
  
  @Input()
  get alert(): boolean{ return this._alert; }
  set alert(v){ this._alert = v; }
  
  constructor( ){ }
  
}