Property Binding not working on some properties

Question

I am trying to make components that can be repuposed and configurable.

In this example I am using input fields and property binding some of its value along with some of my own custom configurations.

Template

   <div class="form-group {{this.bootstrapClass}} label-floating">
      <label for="{{this.inputid}}">{{this.label}} <span *ngIf="this.required === 'true'" class="required-error">*</span></label>
      <input (focus)="infocus($event)" (blur)="outfocus($event)" class="form-control" id="{{this.inputid}}" placeholder="{{this.placeholder}}" type="text" disabled="{{this.disabled}}" value="{{this.placeholder}}" required="{{this.required}}">
      <small class="required-error validate" *ngIf="this.valid ==='false'">{{this.errorMessage}}</small>
    </div>

.TS

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

@Component({
  selector: 'sti-string-input',
  templateUrl: './string-input.component.html',
  styleUrls: ['./string-input.component.scss']
})
export class StringInputComponent implements OnInit {
  valid = 'false';
  errorMessage = 'Error description goes here.';


  @ViewChild(StringInputComponent) child: StringInputComponent;

  @Input('inputid') inputid: string;
  @Input('label') label: string;
  @Input('bootstrapClass') bootstrapClass: string;
  @Input('placeholder') placeholder: string;
  @Input('disabled') disabled: boolean;
  @Input('required') required: boolean;

  constructor() { }

  ngOnInit() {
  }

  infocus(event) {
    event.target.parentNode.classList.add('is-focused');
  }
  outfocus(event) {
    event.target.parentNode.classList.remove('is-focused');
  }
}

The Problem

When I try to use @Input for property binding the input field type I get an error. Labels, placeholders works just fine, whats different about this property?