0

Estoy empezando con Angular y debo hacer un input que tenga un botón para incrementar su valor y otro para disminuirlo algo como [-]10[+], este es el código que tengo de html.

<input type="number" value="0" class="in-con-number" id="numero" min="0" max="100" #numero>
<button class="btn-menos" value="" id="deincrement">-</button>
<button class="btn-mas" value="" id="increment" (click)="getInputValue(numero.value)" >+</button>

El TypeScript que tengo es este, con eso obtengo el número que quiero sumar pero no he encontrado en esta página algo parecido y en internet tampoco he encontrado algún documento para cambiar el texto del input, todos muestran información para optener el texto.

import { Component, OnInit ,Input } from '@angular/core';
import { elementAt } from 'rxjs';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'a-finsotienda';

  constructor(){
  }

  numero: number = 0;

  public getInputValue(inputValue:string){
    this.numero = parseInt(inputValue);     
  }
}

1 respuesta 1

1

Vale solo para que tengas un poco de contexto, Angular maneja la interpolación de strings, básicamente las variables que declares en tu archivo .TS de forma publica, se pueden visualizar en tu HTML y se pueden manipular a través de funciones o eventos en el mismo HTML.

Si vas a tu archivo TS ya tienes la variable "numero" del tipo "number"

numero: number = 0;

//Por detras Angular agrega por default el modificador de acceso "public"

//Algo así "public numero: number = 0;" si lo cambias a private no tendras acceso desde el HTML.

Bien vámonos a tu HTML:

Cambiaremos tu input porque no lo necesitamos, para ello usaremos los interpolation strings que siempre van entre 2 llaves y dentro de las llaves pones el nombre de tu variable que tienes en TS, ejemplo: {{ numero}}

Y en los botones solo quitaremos el atributo "id" ya que de momento no lo ocupamos, y tambien quitaras el atributo "value".

Y agregaremos la funcion de incremento y decremento a los botones, en general quedaría así:

TS

export class AppComponent {
  title = 'a-finsotienda';

  constructor(){}

  numero: number = 0; //Solo mantenemos esta variable
}

HTML:

<h1>{{ numero }}</h1>
<button class="btn-menos" (click)="numero=numero-1">-</button>
<button class="btn-mas"  (click)="numero=numero+1">+</button>

En tal caso debería de sumar y restar, pruebas:

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.