Our 2nd Component

In this component, we will take a quick look into the two-way binding and ngModel directive We will create services to actually use API and translate the text in the later section.

GitHub Code for the component

create the new component using

ng g component translater 

translater.component.ts

export class TranslaterComponent {
  englishText: String = ""; //two-way binding with [(ngModel)] 
  shakespeareText: String = "";
   //this function runs with the button in the HTML template is clicked 
  clicked() {
    this.shakespeareText = this.englishText;
    // logic to translate the englist text we got with two-way binding.
  }
}

translater.component.html

<textarea [(ngModel)]="englishText" rows="6" cols="50"></textarea><br>
<button (click)='clicked()' class="btn btn-primary mybutt">Translateth</button>

Note: Add the following import in app.module.ts

import { FormsModule } from '@angular/forms';

and add FormsModule in the imports array to use [(ngModel)] with englishText variable.

To translate the english text first we have to make our component and HTML talk to each other.

For this, we use two-way binding, if we edit our "englishText" variable in the component file changes will reflect in the HTML file and vice versa.

We use Event Binding in the "Translateth" button. Whenever the button is clicked the clicked() function will trigger on the component.

In the clicked() function we're assigning shakespeareText = englishText to see if the function works.