Envía el valor de un input al fichero de TypeScript

En varias ocasiones necesito enviar de una forma rápida cualquier valor desde el HTML al TypeScript, y casi siempre tengo que recurrir a mi GitHub para consultar mi Gist en cuestión.

Me resulta más rápido tenerlo en un artículo y buscarlo desde Google que tener que loguearme en GitHub y buscar el snippet.

Usando una función

1. Marcamos el input con el símbolo de numeral (#) y el nombre que querramos darle que equivale a asignarle un id. En el ejemplo de abajo le he dado el nombre de identificador

2. Asignamos al botón la función que hayamos definido en el fichero de TypeScript y le pasamos como parámetro identificador.value

HTML

<input
  #identificador    
  type="text"
  placeholder="Para testear"          
  autocomplete="off"    
/>
<button  
  type="button"  
  (click)="getInputValue(identificador.value)"
>
TEST
</button>
  

Fichero TS (Typescript)

import { Component } from '@angular/core';

@Component({
  selector: 'app-test',
  templateUrl: './test.component.html',
  styles: [
  ]
})
export class TestComponent {

  constructor() {}

  public getInputValue(inputValue:string){
    console.log(inputValue);
  }
}

Usando [(ngModel)]

Con [(ngModel)] combinaremos un Event Biding con una Property Biding.

Si utilizamos ngModel de esta manera el binding será bidireccional, es decir, Two-way Binding y la combinación de un evento junto a una propiedad nos otorga mucho potencial.

HTML

<h1>Hola {{nombre}}</h1>
<input
type="text"
[(ngModel)]="nombre"
placeholder="Escribe tu nombre"          
autocomplete="off"    
/>

Fichero TS (Typescript)

import { Component } from '@angular/core';

@Component({
selector: 'app-test',
templateUrl: './test.component.html',
styles: [
]
})
export class TestComponent {

  nombre = 'Francisco';

constructor() {}

}

Un truquito para recordar la sintáxis del ngModel es pensar en una caja con dos plátanos [()] 😉

Hasta luego 🖖