Two-Way Model Binding in Angular 2

One of the most important features of a client javascript framework are bindings between the models used and the user interface. Bindings go a long way, and always need to be trivially implemented to ensure a quick development process. They don't need any security or special treatment. Also don't use any form tags for your solution to keep it as simple as possible for quick reference. Bindings are meant to keep the model and the user interface, or any two entities up to par, so they always match. Find a mechanism in angular2 that supports this very important behavior for front-end development. Please provide a simple and easy to read explanation on how to perform the binding of both fronts: html and javascript. For simplicity please use a string as the data type, as it represents the most frequent data type used for bindings in front-end development. Optionally you might include links to interested readers to get more information about bindings and on how to use them correctly.
1 answer

Using the ngModel directive inside a 'banana' bracket

Simply put the code that is required on the html side:

< input [(ngModel)]="username">

The ngModule directive is inside an infamous 'banana' bracket

Code in i.e. Typescript:

username: string;

Read more about two-way bindings in angular2 here: