How to use the @angular/core.Input function in @angular/core

import { FormControl } from '@angular/forms';
import { SUB_FORM_COMPONENT_TOKEN } from './ngx-sub-form-tokens';

@Injectable()
export class NgxSubFormOptionsService {
  public register(ngxSubFormComponent: NgxSubFormComponent): void {
    ngxSubFormComponent.resetValueOnDestroy = false;
  }
}

@Directive({
  selector: '[ngxSubFormOptions]',
  providers: [NgxSubFormOptionsService],
})
export class SubFormOptionsDirective {
  @Input('ngxSubFormOptions') formControl: FormControl;

  constructor() {}

  // @todo should eventually clean up when directive is being destroyed
  // but this might be an issue, especially when there's 2 level of choices
  // if the form is patched and the main one changes, we don't want the nested ones to
  // delete anything
}

@Directive({
  selector: '[ngxSubFormOption]',
})
export class SubFormOptionDirective implements OnInit {
  constructor(
    private ngxSubFormOptionsService: NgxSubFormOptionsService,
    @Inject(SUB_FORM_COMPONENT_TOKEN) @Self() @Optional() private component: NgxSubFormComponent,

// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
//
// See doc/COPYRIGHT.rdoc for more details.
// ++

import {WorkPackageResource} from 'core-app/modules/hal/resources/work-package-resource';
import {Component, Input} from '@angular/core';

@Component({
  template: require('!!raw-loader!./wp-type-status.html'),
  selector: 'wp-type-status',
})
export class WorkPackageTypeStatusComponent {
  @Input('workPackage') workPackage:WorkPackageResource;
}

@HostBinding('attr.role')
  role = 'tabpanel';

  /**
   * Class property that identifies an aria hidden of a tab
   */
  @HostBinding('attr.aria-hidden')
  get ariaHidden(): string {
    return this.active ? 'false' : 'true';
  }

  private _disabled: boolean;
  /**
   * Disables this tab
   */
  @Input()
  set disabled(value: boolean) {
    this._disabled = value;

    if (!!value) {
      this.disableChange.emit(this.id);
    }
  }

  get disabled() {
    return this._disabled;
  }
  /**
   * Label of a specific tab
   */
  @Input() label: string;
  /**

private _isOpen: boolean = false;
  private _isPinned: boolean = false;
  private _isDocked: boolean = false;

  @Input()
  position: string;
  @Input()
  set isOpen(value: boolean) {
    this._isOpen = value;
  }
  @Input()
  set isPinned(value: boolean) {
    this._isPinned = value;
  }
  @Input()
  set isDocked(value: boolean) {
    this._isDocked = value;
  }

  get isOpen(): boolean {
    return this._sidebarService.isOpen(this.position);
  }
  get isPinned(): boolean {
    return this._sidebarService.isPinned(this.position);
  }
  get isDocked(): boolean {
    return this._sidebarService.isDocked(this.position);
  }

  @HostBinding('class.open')
  get openClass() {

} from '@angular/core';
import { Subscription } from 'rxjs';
import { Easing } from '@tweenjs/tween.js';

import { ScrollTabService } from './scroll-tab.service';
import { ScrollTabButtonComponent } from '../scroll-tab-button/scroll-tab-button.component';

@Component({
    selector: 'ui-scroll-tab',
    templateUrl: './scroll-tab.component.html',
    providers: [
        ScrollTabService
    ]
})
export class ScrollTabComponent implements AfterContentInit, OnDestroy {
    @Input()
    set index(value: number) {
        if (this.children) {
            this.autoUpdateStyle(value);
        }
        this._index = value;
    }

    get index() {
        return this._index;
    }

    @Output()
    change = new EventEmitter();

    @ContentChildren(ScrollTabButtonComponent)
    children: QueryList;

return this.sidenav.close();
    };
    tslib_1.__decorate([
        ViewChild(MatSidenav),
        tslib_1.__metadata("design:type", MatSidenav)
    ], TdLayoutNavListComponent.prototype, "sidenav", void 0);
    tslib_1.__decorate([
        Input('toolbarTitle'),
        tslib_1.__metadata("design:type", String)
    ], TdLayoutNavListComponent.prototype, "toolbarTitle", void 0);
    tslib_1.__decorate([
        Input('icon'),
        tslib_1.__metadata("design:type", String)
    ], TdLayoutNavListComponent.prototype, "icon", void 0);
    tslib_1.__decorate([
        Input('logo'),
        tslib_1.__metadata("design:type", String)
    ], TdLayoutNavListComponent.prototype, "logo", void 0);
    tslib_1.__decorate([
        Input('color'),
        tslib_1.__metadata("design:type", String)
    ], TdLayoutNavListComponent.prototype, "color", void 0);
    tslib_1.__decorate([
        Input('mode'),
        tslib_1.__metadata("design:type", String)
    ], TdLayoutNavListComponent.prototype, "mode", void 0);
    tslib_1.__decorate([
        Input('opened'),
        tslib_1.__metadata("design:type", Boolean)
    ], TdLayoutNavListComponent.prototype, "opened", void 0);
    tslib_1.__decorate([
        Input('sidenavWidth'),

host: { '(ejchange)': 'onChange($event.value)', '(change)': 'onChange($event.value)', '(focusOut)': 'onTouched()' },
	providers: [RadioButtonValueAccessor]
})
export class RadioButtonComponent extends EJComponents implements ControlValueAccessor
{
	@Input('checked') checked_input: any;
	@Input('cssClass') cssClass_input: any;
	@Input('enabled') enabled_input: any;
	@Input('enablePersistence') enablePersistence_input: any;
	@Input('enableRTL') enableRTL_input: any;
	@Input('htmlAttributes') htmlAttributes_input: any;
	@Input('id') id_input: any;
	@Input('idPrefix') idPrefix_input: any;
	@Input('name') name_input: any;
	@Input('size') size_input: any;
	@Input('text') text_input: any;
	@Input('validationMessage') validationMessage_input: any;
	@Input('validationRules') validationRules_input: any;
	@Input('value') value_input: any;
    @Input('options') options: any;


	@Output('beforeChange') beforeChange_output = new EventEmitter();
	@Output('change') change_output = new EventEmitter();
	@Output('ejchange') ejchange_output = new EventEmitter();
	@Output('create') create_output = new EventEmitter();
	@Output('destroy') destroy_output = new EventEmitter();

    constructor(public el: ElementRef, public cdRef: ChangeDetectorRef, private _ejIterableDiffers: IterableDiffers, private _ejkeyvaluediffers: KeyValueDiffers) {
        super('RadioButton', el, cdRef, [], _ejIterableDiffers, _ejkeyvaluediffers);
    }

public orphan: boolean;
  @Output()
  public viewModeChange = new EventEmitter();
  @Output()
  public vmChange = new EventEmitter();
  @Output()
  public accountsChanged = new EventEmitter();
  @Output()
  public orphanChanged = new EventEmitter();

  public viewMode: SecurityGroupViewMode;
  public selectedAccountIds: string[];
  public accountsFiltered: Account[] = [];
  public accountQuery = '';

  @Input()
  public set filters(filter: SecurityGroupFilter) {
    this.viewMode = filter.viewMode;
    this.selectedAccountIds = filter.selectedAccountIds;
    this.orphan = filter.selectOrphanSG;
  }

  public get SecurityGroupViewMode() {
    return SecurityGroupViewMode;
  }

  public ngOnChanges(changes: SimpleChanges) {
    const accounts = changes['accounts'];
    if (accounts) {
      this.onAccountQueryChanged(this.accountQuery);
    }
  }

providers: [PercentageTextboxValueAccessor]
})
export class PercentageTextboxComponent extends EJComponents implements ControlValueAccessor
{
	@Input('currencySymbol') currencySymbol_input: any;
	@Input('cssClass') cssClass_input: any;
	@Input('decimalPlaces') decimalPlaces_input: any;
	@Input('enabled') enabled_input: any;
	@Input('enablePersistence') enablePersistence_input: any;
	@Input('enableRTL') enableRTL_input: any;
	@Input('enableStrictMode') enableStrictMode_input: any;
	@Input('groupSize') groupSize_input: any;
	@Input('groupSeparator') groupSeparator_input: any;
	@Input('height') height_input: any;
	@Input('htmlAttributes') htmlAttributes_input: any;
	@Input('incrementStep') incrementStep_input: any;
	@Input('locale') locale_input: any;
	@Input('maxValue') maxValue_input: any;
	@Input('minValue') minValue_input: any;
	@Input('name') name_input: any;
	@Input('negativePattern') negativePattern_input: any;
	@Input('positivePattern') positivePattern_input: any;
	@Input('readOnly') readOnly_input: any;
	@Input('showRoundedCorner') showRoundedCorner_input: any;
	@Input('showSpinButton') showSpinButton_input: any;
	@Input('validateOnType') validateOnType_input: any;
	@Input('validationMessage') validationMessage_input: any;
	@Input('validationRules') validationRules_input: any;
	@Input('value') value_input: any;
	@Input('watermarkText') watermarkText_input: any;
	@Input('width') width_input: any;
    @Input('options') options: any;

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

@Component({
  selector: '[vclBusy]',
  templateUrl: 'busy.component.html',
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BusyComponent {
  @Input('vclBusy')
  @HostBinding('class.vclLoadingLayerContainer')
  busy = false;

  @Input()
  busyIndicatorType: 'straight' | 'circular' = 'circular';

  @Input()
  busyLabel: string | undefined;

  @Input()
  busyIconHeight = '3em';

  @Input()
  busyIconWidth = '3em';
}