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

Publicado el 12.02.2022 a las 17:52

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

  1. Usando una función

  2. Usando el ngModel (recomendado)

Logo de fjmduran

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.

Envía el valor de un input de HTML al fichero typescript de Angular 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);
  }
}

Envía el valor de un input de HTML al fichero typescript de Angular usando el [(ngModel)] (Recomendado)

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 🖖

¿Te gusta mi contenido? Apóyame

Imagen de buy me a coffee

Puede que te interesen los siguientes artículos 👇