import { Component , Input , ChangeDetectionStrategy , Output , ViewContainerRef , EventEmitter , OnInit } from "@angular/core" ; import { FormControl } from "@angular/forms" ; link example @ Component ( { selector : "sm-input" , template : `<div class="field" [ngClass]="{error: (!control.valid && control.dirty && isInsideForm) }">
  <label *ngIf="label && isInsideForm">{{label}}</label>
  <div class="ui input {{class}}" [ngClass]="{'icon': icon, 'error': (!control.valid && control.dirty &&!isInsideForm)}">
  <label *ngIf="label && !isInsideForm" class="ui label">{{label}}</label>
  <input [type]="type" [formControl]="control" (keyup)="modelChange.emit(input.value)" #input placeholder="{{placeholder}}">
  <i *ngIf="icon" class="{{icon}} icon"></i>
</div>
</div>` } ) export class SemanticInputComponent implements OnInit { @ Input ( ) label : string ; @ Input ( ) class : string ; @ Input ( ) icon : string ; @ Input ( ) type : string = "text" ; @ Input ( ) placeholder : string ; @ Input ( ) model : { } ; @ Input ( ) control : FormControl = new FormControl ( ) ; @ Output ( ) modelChange : EventEmitter < string | number > = new EventEmitter < string | number > ( ) ; private isInsideForm : boolean = false ; constructor ( public viewRef ) { } ngOnInit ( ) { if ( this . inForm ( this . viewRef . element . nativeElement , "form" ) ) { this . isInsideForm = true ; } } inForm ( el , classname ) { if ( el . parentNode ) { if ( el . parentNode . nodeName . toLowerCase ( ) === classname . toLowerCase ( ) ) { return ! ! el . parentNode ; } else { return this . inForm ( el . parentNode , classname ) ; } } else { return false ; } } } link @ Component ( { changeDetection : ChangeDetectionStrategy . OnPush , selector : "sm-checkbox" , template : `<div class="field" [ngClass]="{error: (!control.value && control?.validator) }">
    <div class="ui {{classType}} checkbox">
      <input type="checkbox" 
      [attr.value]="value"
      [attr.type]="inputType" tabindex="0" [attr.name]="name" [formControl]="control" [attr.disabled]="disabled">
      <label *ngIf="label">{{label}}</label>
    </div>
  </div>` } ) export class SemanticCheckboxComponent { @ Input ( ) control : FormControl = new FormControl ( ) ; @ Input ( ) label : string ; @ Input ( ) disabled : boolean ; @ Input ( ) value : string | number ; @ Input ( ) name : string ; @ Input ( "type" ) set type ( data ) { if ( data && data !== "checkbox" ) { this . classType = data ; if ( data === "radio" ) { this . inputType = data ; } } } private inputType : string = "checkbox" ; private classType = "checkbox" ; } link @ Component ( { changeDetection : ChangeDetectionStrategy . OnPush , selector : "sm-textarea" , template : `<div class="field" [ngClass]="{error: (!control.valid && control.dirty) }">
    <label *ngIf="label">{{label}}</label>
    <textarea rows="{{rows}}" [formControl]="control"></textarea>
  </div>` } ) export class SemanticTextareaComponent { @ Input ( ) control : FormControl = new FormControl ( ) ; @ Input ( ) label : string ; @ Input ( ) rows : string ; }