Template text disappears when trying string interpolation

Question

The minute I put {{ text }} after any text inside a <div> element, that element disappears from the browser. If I remove {{text}} from "is filled out" then the text "is filled out" is displayed.

Is Filled out {{isFilled ? 'Yes' : 'No'}}

Not sure what I am doing wrong.

import {Component} from "angular2/core";

@Component({
  selector: 'my-input',
  template: `
  <h2>Your details please</h2>
  <div>
    <label for="name">Your Name:</label>
    <Input type="text" id="name" [(ngModel)]="myself.name" (keyup)="onKeyup()">
  </div>
  <div>
    <label for="age">Your Age:</label>
    <Input type="text" id="age" [(ngModel)]="myself.age" (keyup)="onKeyup()">
  </div>
  <br>
  <div>Is Filled out {{isFilled ? 'Yes' : 'No'}}</div>
  <div>Is Valid </div>
  <br>
  <button [disabled]="!isValid">Submit</button>

  `
})

export class InputComponent {
  myself = {name: '', age: ''};
  isFilled = false;
  isValid = false;

  onKeyup() {
    if (this.myself.name != '' && this.myself.age != '') {
      this.isFilled = true;
    }
    else {
      this.isFilled = false;
    }
    if (this.myself.name != '' && /^\d+$/.test(this.myself.age)) {
      this.isValid = true;
    }
    else {
      this.isValid = false;
    }
    }

  }

Here is the CSS

body {
    padding: 32px;
    margin: 32px;
    font-family: "Roboto", Arial, sans-serif;
    font-size: 16px;
}

.container {
    padding: 16px;
    border: 1px solid #ccc;
    background: #eee;
    margin-bottom: 32px;
}

button {
    padding: 4px 8px;
    border: 1px solid #ccc;
    background-color: white;
    border-radius: 3px;
    cursor: default;

}

button:not([disabled]) {
    cursor: pointer;
}

button:not([disabled]): hover {
    background-color: salmon;
    color: white;
}

.highlight {
    font-weight: bold;
}

Answer 1

I am not sure what happened. But I typed everything again and it works. I assume something went awry somewhere that I just could not catch. Retyping all the code worked.