ngModel y two way binding en Angular

También puede ser útil para operaciones matemáticas en tiempo real.
multiplicando la variable por 1 le hacemos entender que trate a la variable como campo numérico

 <input type="text" placeholder="Numero"  [(ngModel)]="numero"  /> 
  <br/>
  Mi numero +1 es {{(numero*1)+1}} <!-- Casteo a numerico multipicando el numero por 1-->

Muy bueno el curso hasta ahora.
Gracias, saludos

Yesica Lizeth Cortés Pineda

Gracias a ti por tu aporte.

David Galisteo

Hola, no se para qué el casting, declara la variable como entera en TS y listo, ¿no?

Ignacio Emmanuel Mancilla Olivares

Buen día, para los que están teniendo problemas con el FormsModule aquí tengo una manera en la que yo pude solucionarlo.

Problema:
Leyendo en diferentes blogs resultó que en mi caso en especifico seguía con la versión 2.4.6 de Angular, traté de hacer update de mi proyecto pero me marcaba que Angular 4 ocupaba la versión más reciente de Zone JS. Traté de instalarlo via npm sobre el proyecto pero no resultó.

Solución:
Dentro de la documentación de Angular viene como hacer el update global de CLI desinstalando via npm el paquete de @angular/cli globalmente, limpiando cache y volviendo a instalar el lastest version. Después de eso mi proyecto ya pudo cargar la última version de Zone y FormsModule me funciono.

Conclución:
Hice upgrade de mi proyecto local de Angular pero no hice update de la parte global.

Documentación:

Espero les sea de ayuda. Ese fue mi caso en especifico.

Saludos.

Yesica Lizeth Cortés Pineda

@naxtyn, muchas gracias por compartir esta información.

Jherom Chacon

Excelente!

Sergio Zapata Donado

Aqui mi solución:
1 - Declarar a variable "Apellido"

2 - Añadimos el input, un {{’ '}} para dejar un espacio y luego el apellido

Y así es como se ve:

Nico Figueroa

Hola! , podrías quitar el {{’ '}} no es necesario y utilizarlo con html
Mi nombre es {{nombre}} {{apellido}}

Stuard Gerardo Carrillo Gonzalez

Prueba mejor de esta manera

Mi nombre es {{nombre + ' ' + apellido }}

Cristian Palta

buenas clases

Adriann Felipe Sanchez Sierra

Es muy mágico 😄

Alejo Gschwind

Mi Solución :

<div style="text-align:center">
  <h1>
    Bienvenidos a {{ title }}!
  </h1>
  <h2>
    {{a + b}}
  </h2>
  <hr/>
  <h3>{{msg + count}}</h3>
  <button type="button" name="button" [disabled]="!listo" (click)="handleClick()">Click Me!</button>
  <h5>Usted a clickeado {{click}} veces.</h5>
  <hr/>
  <form>
    <input type="text" name="name" placeholder="Tu Nombre..." [(ngModel)]="nombre">
    <br/>
    <input type="text" name="surname" placeholder="Tu Apellido..." [(ngModel)]="apellido">
  </form>
  <h3>Tu nombre es {{nombre +' '+apellido}}</h3>
</div>

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PlatziSquare'
  a = 2
  b = 8
  listo = false
  count = 3
  click = 0
  msg = 'Este boton se activará en '
  nombre = ""
  apellido = ""

  constructor(){
    let counter = setInterval(() => {
      this.count -= 1
    } ,1000)
    setTimeout(() =>{
      this.listo = true
      clearInterval(counter)
      this.count = ''
      this.msg = 'El boton se activó!'
    }, 3000)
  }

  handleClick() {
    this.click += 1
  }
}```

RENE HERRERA

HTML
<input type=“text” placeholder=“Name” [(ngModel)]= “name”>
<input type=“text” placeholder=“Last Name” [(ngModel)]= “lastName”>
My name is: {{name + " "+ lastName}}

TS
name:String = ‘’;
lastName: String = ‘’;

Jherom Chacon

Bueno lo primero fue agregar el código Html:

<section>
  <hr/>
  <input type="text"
    placeHolder="Primer nombre"
    [(ngModel)]="primerNombre"/>
  <input type="text"
    placeHolder="Segundo nombre"
    [(ngModel)]="segundoNombre"/>
  <input type="text"
    placeHolder="Primer apellido"
    [(ngModel)]="primerApellido"/>
  <input type="text"
    placeHolder="Segundo apellido"
    [(ngModel)]="segundoApellido"/>
  <hr/>
  <h2>
    {{nombreCompleto}}
  </h2>
</section>

Lo segundo ha sido modificar el TS de la clase:

export class AppComponent {
  title = 'PlatziSquare';
  listo=false;
  
  primerNombre:string="";
  segundoNombre:string="";
  primerApellido:string="";
  segundoApellido:string="";
  
  nombreCompleto:string="" 

  constructor(){
    setTimeout(() => {
      this.listo = true;
    },3000);
  }

  clickPressed(){
    alert("Has hecho clic!");
  }

  processName(){
    this.nombreCompleto = 
    this.primerNombre + " " +
    this.segundoNombre + " " +
    this.primerApellido + " " + 
    this.segundoApellido; 
  }
}

Una vez hecho esto hay que importar el FormsModule en app.module.ts ya que Visual Studio Code no lo hace de manera automática.

import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';

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

Si alguién sabe si es posible instalarle algun plugIn o AddOn a VSC para que pueda insertar codigo a manera de snippets para agregar referencias de Angular entonces por favor comente.

Jherom Chacon

muy importante anotar que tambien modifique el evento del clic para usar tambien el event data binding

<button [disabled]="!listo"
    (click)="processName()">
    Procesa el nombre
  </button>

Norberto Rojas Reyes

Hola, aqui estan un top de 10 plugins que puedes instalar en VS Code para Angular

Jaime Carballo Díaz Infante

Company_admin

Buen dia aqui dejo mi aporte, Nombre y Apodo
Html

<input type ="text" placeholder="Tu nombre" [(ngModel)] = "nombre" />
<input type ="text" placeholder="Tu apodo" [(ngModel)] = "apodo" />
<h1>Tu nombre es {{nombre}} y tu apodo es {{apodo}}</h1>

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

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

Resultado

Irvin Ulises Luna Balderas

<input type="text" placeholder="Nombre" [(ngModel)]='nombre'/>
  <input type="text" placeholder="Apellido" [(ngModel)]='apellido'/>
  <br> Primero  {{nombre}}
  <br> Segundo  {{apellido}}
  <br> Nombre completo  {{nombre}} {{apellido}}

Estefania Janet Rodriguez

Aqui va mi codigo!

<hr /> <input type="text" placeholder="Tu primer nombre" [(ngModel)]="nombre" /> <br /> <hr /> <input type="text" placeholder="Tu segundo nombre" [(ngModel)]="nombre1" /> <br /> Mis nombres son {{nombre}} {{nombre1}}

Saludos!

Alan Fermin

¿Cuál es el pluging de VS Code para que coloque la línea de importación del módulo por defecto?

Victor Juvenal Alejandro Varas Arquer

Lo unico que no me funciono es el two way data binding. Me aparece este error.

compiler.js:2175 Uncaught Error: Template parse errors: Can't bind to 'ngmodel' since it isn't a known property of 'input'. ("isto" (click)="hacerAlgo()">Click me!</button>

<hr/> <input type="text" placeholder="Tu nombre" [ERROR ->][(ngmodel)]="nombre" /> <br/> <p>Mi nombre es{{nombre}}</p> "): ng:///AppModule/AppComponent.html@11:45 at syntaxError (compiler.js:2175) at TemplateParser.parse (compiler.js:11188) at JitCompiler._parseTemplate (compiler.js:25721) at JitCompiler._compileTemplate (compiler.js:25709) at compiler.js:25653 at Set.forEach (<anonymous>) at JitCompiler._compileComponents (compiler.js:25653) at compiler.js:25566 at Object.then (compiler.js:2166) at JitCompiler._compileModuleAndComponents (compiler.js:25565)

Diego Forero

Team Platzi

es ngModel, tienes escrito ngmodel con la m minúscula.

Victor Juvenal Alejandro Varas Arquer

Si, me dio vergüenza cuando lo note jajajaj

Enrique Ortuno

Es una buena practica utilizar Two-Way Databinding cuando hay muchos elementos a actualizar en la UI? No es mejor usar programacion Reactiva? Esta duda se me viene porque en Angularjs NO ES recomendable usarlo, gracias!

Milciades Vargas Liz

hola buenos días, quisiera saber que ID estas manejando, yo estoy utilizando atom pero no me autocompleta instale algunos paquetes para typeScript y angular pero aun así no se autocompleta 😦

Neider Rafael Tapia Avila

yo uso Visual Studio Code, y funciona perfecto todo el tema de autocompletado.

Mon Avellaneda

Aquí va mi ejercicio :

Yonny Rivera Espinoza

David Alejandro Cruz Guerrero

<input type="text" placeholder="Tu nombre" [(ngModel)]="nombre">
  <input type="text" placeholder="Tus apellidos" [(ngModel)]="apellido">
  <br>
  <p>Nombre completo: <span>{{nombre}}</span><span>{{apellido}}</span> </p>

Yesica Lizeth Cortés Pineda

hey @pancrudo y esto como se ve?? muéstranos una captura pls, gracias por aportar, que tal te ha parecido el curso?

Víctor Manuel Sarmiento Cayuelas

HTML:

<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <p>{{ a+b }}</p>


  <hr />
  <button [disabled]="!listo" (click)="hacerAlgo()">Click me!!!</button>
  <hr />
  <input type="text" placeholder="Tu nombre" [(ngModel)]="nombre" />
  <input type="text" placeholder="Tu apellido" [(ngModel)]="apellido" />
  <br />
  Mi nombre es completo es {{ nombre +' '+apellido }}
</div>

TypeScript:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PlatziSquare';
  a = 5;
  b = 16;
  listo = false;
  nombre:string = '';
  apellido:string = '';

  constructor(){
      setTimeout(() =>{
          this.listo = true;
      }, 3000)
  }

  hacerAlgo(){
      alert('Haciendo algo');
  }
}

Roberto Adnier Nuñez Farfán

app.component.html

<input type="text" placeholder="write your name" [(ngModel)]="name" /> <br />
<input type="text" placeholder="write your surname" [(ngModel)]="surname" />
<br />
Your are <b>{{name}} {{surname}}</b>

Carlos Uriel de Jesus Sánchez González