Angular 8 Boot up (5), Template Reference Variable, Two Ways Binding

Angular 8 Boot up (5), Template Reference Variable, Two Ways Binding

https://github.com/jalbertomr/Angular8Bootup.git

Template Reference Variable

@Component({selector: '[app-mi-componente]',  template: `
      <div><h1> Template Reference Variable</h1><br>
          <textarea disabled><input #miInput type="text"></textarea><br>
          <input #miInput type="text"><br>
          <button (click)="logMessage(miInput)"><h3>button (click)="logMessage(miInput)"</h3></button>
          <h2>Valor Capturado = "{{miValorCapturado}}"</h2>
      </div>`,
  styles: []
})
export class MiComponenteComponent implements OnInit {
  public miValorCapturado = "";

  constructor() {
  }

  ngOnInit() {
  }

  logMessage(miInput: HTMLInputElement) {
    console.log(miInput);
    this.miValorCapturado = miInput.value;
  }

Two Ways Binding

app.modules.ts
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule} from "@angular/forms";

import { AppComponent } from './app.component';
import { MiComponenteComponent } from './mi-componente/mi-componente.component';

@NgModule({
  declarations: [
    AppComponent,
    MiComponenteComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

mi-componente.component.ts
@Component({selector: '[app-mi-componente]',
  template: `
      <div><h1> Two Way Binding</h1><br>
          <textarea disabled><input  [(ngModel)]="miValorCapturado" type="text"></textarea><br>
          <input  [(ngModel)]="miValorCapturado" type="text"><br>
          <h2>property miValorCapturado = "{{miValorCapturado}}"</h2>
      </div>`,
  styles: []
})
export class MiComponenteComponent implements OnInit {
  public miValorCapturado = "";

  constructor() {
  }

  ngOnInit() {
  }

eot