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

Aprende a obtener el valor de un input en el fichero HTML desde el fichero de TypeScript de la forma más fácil y rápida

12.02.2022 a las 17:52

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.

Explicació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);
  }
}

Hasta luego 👋

Servicios

Software

IoT

Digitalización

Aplicaciones móviles

Consultoría

fjmduran.com v0.1.2