Platzi
Platzi

¡Invierte en ti y celebremos! Adquiere un plan Expert o Expert+ a precio especial.

Antes: $349
$259
Currency
Antes: $349
Ahorras: $90
COMIENZA AHORA
Termina en: 13D : 5H : 18M : 1S

Debes iniciar sesión

Para ver esta clase crea una cuenta sin costo o inicia sesión

Curso de Angular 4

Curso de Angular 4

Eduardo Ibarra

Eduardo Ibarra

Two Way Data Binding13/80

Two Way Data Binding engloba a los otros tipos de bindeo, es decir me permite hacer comunicación en dos vías.

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

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:
https://github.com/angular/angular-cli#updating-angular-cli

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

Saludos.

Aqui mi solución:
1 - Declarar a variable "Apellido"
Captura de pantalla 2017-10-21 a la(s) 11.34.47 a.m..png
2 - Añadimos el input, un {{’ '}} para dejar un espacio y luego el apellido
Captura de pantalla 2017-10-21 a la(s) 11.39.50 a.m..png
Y así es como se ve:
Captura de pantalla 2017-10-21 a la(s) 11.34.00 a.m..png

buenas clases

Es muy mágico 😄

Mi Solución :
Untitled.png

<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
  }
}```


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 = ‘’;

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.

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>

TS

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

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!

Aquí va mi ejercicio : Captura de pantalla 2017-09-13 a las 20.29.21.pngCaptura de pantalla 2017-09-13 a las 20.31.21.png

2.PNG
<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>

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');
  }
}

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> 

muy interesante

Captura2.PNG
A si lo relsovi

Captura1.PNG
Captura2.PNG
<hr />
<input type="text" placeholder="Primer nombre" [(ngModel)]="nombre" />
<input type="text" placeholder="Segundo nombre" [(ngModel)]="nombre2" />
<br />
Mi nombre es {{nombre + ' ' +nombre2}}
</div>```




Mi solución

<hr />
 <input type="text" placeholder="Tu nombre" [(ngModel)]="nombre" />
 <br />
 <hr />
 <input type="text" placeholder="Tu apellido" [(ngModel)]="apellido" />
 <br />

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

Las variables se definieron en app.component.ts

nombre=''; //modo javascript
  //nombre:string=''; //Modo tyscript
  apellido:string='';```

app.component.html

<div id="f" style="text-align:center">
  <h1>
    Bienvenidos a {{ title }}!
  </h1>
  <h2>
    {{a + b}}
  </h2>
  <img width="400"  alt="NeedZaio Logo" src="http://gdurl.com/J5lT">
  <hr />
  <button [disabled]="! listo">Click me!</button>
  <button (click)="hacerAlgo()">Alert</button>
  <hr />
  <input type="text" placeholder="Tu nombre" [(ngModel)]= "nombre" />
  <input type="text" placeholder="Tu apellido" [(ngModel)]= "apellido" />
  <br />
  <span>Mis nombres y apellidos son {{ nombre + ' ' +  apellido }}</span>
</div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PlatziSquare Project';
  a = 3;
  b = 5;
  listo = false;
  nombre = '';                  //  Puedo escribir nombre: string = ''; queda TS
  apellido = '';                //  nombre & appellido declared to make two way data binding with [(ngModel)]

  constructor() {               //  Funcion que se ejecuta al cargarse la clase
    setTimeout(() => {
      this.listo = true;        //  Data binding properity [disabled], change 'listo' to true bolean value
    }, 3000);                   //  in 3000ms
  }

  hacerAlgo() {                 // data binding event when (click)
    alert('Haciendo algo!');
  }
}
<input type="text" placeholder="Tu nombre" [(ngModel)]="nombre">
<br />
<input type="text" placeholder="Tu nombre" [(ngModel)]="nombre2">

Mi nombre es {{nombre}} {{nombre2}}```
twoway1.PNG
twoway.PNG
//En app.component.html
<input type="text" placeholder="Primer nombre" [(ngModel)]="primerNombre">
<br>
<input type="text" placeholder="Segundo nombre" [(ngModel)]="segundoNombre">
<br>
//trim(), elimina los espacios al principio y fin de la cadena 
Hola, Mi nombre es {{primerNombre.trim() + ' ' +segundoNombre.trim()}}
//En app.components
export class AppComponent { 
	primerNombre:string = '';
	segundoNombre:string = '';
}

Existe otra manera de concatenar string?
O algo similar a un "StringBuilder"
Saludos 😃

Probé con los siguiente, algo muy sencillo

export class AppComponent {
  title = 'PlatzySquare';
  a = 3;
  b = 5;
  listo = false;
  nombre = '';
  apellido = '';

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

  hacerAlgo(){
    alert("El usuario " + this.nombre + " " + this.apellido + " ha sido registrado");
  }
}

Integre cada los temas vistos en este video, además tome en cuenta la observación de pockajnicolas y el resultado es interesante.

<input type="text" placeholder="Nombres" [(ngModel)]="nombre" /> <br>
  <input type="text" placeholder="Apellidos" [(ngModel)]="apellido" /> <br>
  <input type="text" placeholder="Teléfono" [(ngModel)]="telefono" /> <br>
  <input type="text" placeholder="Año de nacimiento" [(ngModel)]="numero" />

  <br />
  Mi nombre es {{nombre}} {{apellido}} <br> Mi telefono es {{telefono}} <br><br>
  Tu edad es: {{(numero) - ano}}```
<input type="text" placeholder="Nombre" [(ngModel)]="nombre" />
  <br/>
  <input type="text" placeholder="Apellido Paterno" [(ngModel)]="apellidoPaterno" />
  <br/>
  <input type="text" placeholder="Apellido Materno" [(ngModel)]="apellidoMaterno" />
  <h3>Mi nombre completo es {{nombre}} {{apellidoPaterno}} {{apellidoMaterno}} </h3>

Yo no quise andar haciendo más variables, así que hice una función y ahí concatené los dos nombres

processName(){	
	alert(`${this.nombre} ${this.segundoNombre}`)
}

y al final sólo invoqué a la función en el buttom así

<button [disabled]="!listo" (click)="processName()"> Touch me xd </button>

Un saludo!

Solución al desafió:
Sin título.png

Hay alguna manera de usar con string interpolation el string template de es2016 de la siguiente manera:

{{ `${ nombre1 } ${ nombre2 }` }}

porque lo intente y no funciono y con vuejs si es posible

Two way data binding

Inserción del two way data binding

Mezclando el Twoway databinding con String interpolation

Mezclando el Twoway databinding con String interpolation

Conectando con TS

Uso de tipos en TS

El error por ausencia de FormModule

Importando FormModule

Yo agregue el nombre y el apellido

app.component.html

<div style="text-align:center">
  <h1>
    Bienvenidos a {{ title }}!
  </h1>
  <h2>{{a+b}}</h2>
  <hr/>
  <button [disabled]="!listo" (click)="hacerAlgo()">Click me</button>
  <hr/>
  <input type="text" placeholder="Nombre" [(ngModel)]="nombre" />
  <br/>
  <input type="text" placeholder="Apellido" [(ngModel)]="apellido" />
  <br />
  <p>Mi nombre es {{nombre}} {{apellido}}</p>
</div>

app.component.ts

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 = 3;
  listo = false;
  nombre:string = "";
  apellido:string= "";

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

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

Captura de pantalla de 2018-08-31 18-53-37.png

Mi solución:
Reto2A4.JPG
Reto2.2A4.JPG

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 😦

Mi solucion es la siguiente, del lado de html

  <input type="text" placeholder="Tu Apellido" [(ngModel)]="apellido"/>
  <br/>
  Mi nombre es {{nombre}} {{apellido}}

y del lado del .ts

  apellido:string = '';

Agregué otro nombre de esta manera:

<input type="text" placeholder="Tu nombre 1" [(ngModel)]="primerNombre" />
  <input type="text" placeholder="Tu nombre 2" [(ngModel)]="segundoNombre" />
  <br />
  Mi nombre es {{primerNombre }} {{segundoNombre}}

Que genial, antes se me había dificultado demasiado este tipo de acciones pero explicadas de esta manera es muy sencillo.

<input type=“text” placeholder=“Tu nombre 2” [(ngModel)]=“nombre2”>
<br>
Dos nombres son {{nombre+" "+nombre2}}

Eso es en component.html

y en component.ts
solo declaré nombre2

<input type="text" name="" value="" placeholder="Tu nombre" [(ngModel)]="nombre"/>
<input type="text" name="" value="" placeholder="Tu apellido" [(ngModel)]="apellido"/>
<br>
Mi nombre es {{nombre + ' ' + apellido}}```

Para el reto agregué esto en el app.component.html:

<input type="text" placeholder="Primer nombre" [(ngModel)]="nombre"/>

<input type="text" placeholder="Segundo nombre" [(ngModel)]="nombre1"/>

<br/>

Mi nombre es {{nombre}} + {{nombre1}}
</div>

y en el app.components.ts:

export class AppComponent {
  title = 'PlatziSquare';
  a=3;
  b=10;
  listo= false;
 
 nombre:string='';
 nombre1='';

En el navegador se coloca un nombre al lado del otro a medida que lo voy escribiendo.

  <input type="text" placeholder="tu nombre" [(ngModel)]="nombre">
  <hr>
  <input type="text" placeholder="Apellido" [(ngModel)]="Apellido">
  <hr>
  Mi nombre es {{nombre}} {{Apellido}}```

Mi solución:
En el archivo .ts se declara la variable para el segundo nombre Varible2.PNG

En el archivo html se coloca la caja de texto para el segundo nombre con la etiqueta input: html.PNG

Y el resultado que obtuve fue:
nombreCompleto.PNG

Captura.PNG
<div>
  <hr>
  <input type="text" placeholder="Tu Nombre" [(ngModel)]="nombre">
  <br>
  Mi nombre es {{nombre}}
</div>

<div>
    <hr>
    <input type="text" placeholder="Tu primer apellido" [(ngModel)]="apellido1">
    <br>
    <input type="text" placeholder="Tu segundo apellido" [(ngModel)]="apellido2">
    <br>
    Mis apellidos son {{apellido1}} {{apellido2}}
    <br>
    <h1>Mi nombre completo es: {{nombre}} {{apellido1}} {{apellido2}}</h1>
  </div>

HTML

<div style="text-align:center">
  <h2>Two way data binding</h2>
  <input type="text" placeholder="Escribe tu nombre" [(ngModel)]="name" />
  <input type="text" placeholder="Escribe tu Apellido" [(ngModel)]="lastName" />
  <br />
  Mi nombre es {{name}} {{lastName}}
</div>

TypeScript

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

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

app.component.html

  <input type = "text" placeholder="Nombre" [(ngModel)] = "nombre" /> &nbsp;
  <input type = "text" placeholder="Apellido" [(ngModel)] = "apellido" />
  <br>
  Mi nombre es: {{nombre}} {{apellido}}

Agregar la propiedad fuera del constructor:

 apellido:string = '';
appinicial.png
appComponent.png

Me da error en el import
adjunto imagen

cuando me pongo encima del error me sale lo siguiente
TSLint ‘should be’ (quotemark)
me podeis ayudar??

como se mete una imagen??

Le realize una para nombre y apellidos, es muy interesante.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align: center">
  <h1>
    Bienvenido a {{ title }}!

  </h1>

  <hr />
  <button [disabled]="!listo" (click)="hacerAlgo()" >Click me !</button>
  <hr />
  <label>Nombres</label>
  <input type="text" placeholder="Nombre 1" [(ngModel)]="nombres"/>
  <label>Apellidos</label>
  <input type="text" placeholder="Nombre 2" [(ngModel)]="apellidos"/>
  <br />
  Mi nombre completo es: {{nombres+' '+apellidos}}


</div>

Interesante mi solución al ingresar nombre y apellidos.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align: center">
  <h1>
    Bienvenido a {{ title }}!

  </h1>

  <hr />
  <button [disabled]="!listo" (click)="hacerAlgo()" >Click me !</button>
  <hr />
  <label>Nombres</label>
  <input type="text" placeholder="Nombre 1" [(ngModel)]="nombres"/>
  <label>Apellidos</label>
  <input type="text" placeholder="Nombre 2" [(ngModel)]="apellidos"/>
  <br />
  Mi nombre completo es: {{nombres+' '+apellidos}}


</div>
<div class="container">
  <button class="btn btn-primary" [disabled]="!listo" (click)="hacerClick()" >boton</button>
  <hr>
  <input type="text" name="" id="nombre" placeholder="Nombre"  [(ngModel)]="nombre">
  <br>
  <input type="text" name="" id="apellido" placeholder="Apellido"  [(ngModel)]="apellido">
  <br>
  <p>Mi nombre es {{ nombre }} <strong>{{apellido}}</strong></p>
</div>```
 
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <h2>{{a+b}} </h2>
  <hr />
  <button [disabled]= "!listo" (click)="hacerAlgo()">CLICK¡¡¡</button>
  <hr />
  <input type="text" placeholder="Tu nombre" [(ngModel)]="nombre" />
  <input type="text" placeholder="apellido" [(ngModel)]="apellido" />
  Mi nombre es {{nombre}}
  Y mi apellido es {{apellido}}
</div>

Lo realizado
DataBiding2.JPG

DataBiding.JPG

mi código

<hr>
<input type=“text” placeholder=“Apellido” [(ngModel)]=“Apellido” >
<br>
<i>Me presento soy </i> <b>{{Nombre}} {{Apellido}} </b>

TS

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PlatziSquare';
  a = 3;
  b = 5;
  listo = false;
  nombre:string = "";
  nombreMascota:string = "";
  constructor(){
      setTimeout(() =>{
      this.listo = true;

      },3000 );
  }
  hacerAlgo(){
    alert('Haciendo Algo');
  }
}

Html

<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
<h2>
  {{a+b}}
</h2>
<hr />
<button [disabled] = "!listo" (click)= "hacerAlgo()" >Clic Me</button>
<hr />

<input type="text" placeholder="Tu nombre" [(ngModel)] = "nombre" />
<input type="text" placeholder="Nombre Mascota" [(ngModel)] = "nombreMascota" />

<br>
Tu nombre es {{nombre}} Y el nombre de tu mascota es {{nombreMascota}}
</div>

Primero cree mis parámetros o variables y después agregue unas validaciones al evento del click en el componente del typescript:

import { Component } from “@angular/core”;

@Component({
selector: “app-root”,
templateUrl: “./app.component.html”,
styleUrls: ["./app.component.css"],
})
export class AppComponent {
title = “PlatziSquare”;
enable = true;
name: string = “”;
firstname: string = “”;
secondname: string = “”;
surname: string = “”;
age: number = 0;
ageenter: number = 0;

constructor() {
setTimeout(() => {
this.enable = false;
}, 3000);
}

check() {
if (this.firstname) {
if (this.secondname) {
if (this.surname) {
if (this.age != 0) {
this.name = this.firstname + " " + this.secondname + " " + this.surname;
this.ageenter = this.age;
} else {
alert(“Debe ingresar un valor mayor a 0”);
}
} else {
alert(“Debe ingresar los apellidos”);
}
} else {
alert(“Debe Ingresar el segundo nombre”);
}
} else {
alert(“Debe ingresar el primer nombre”);
}
}
}

Después ajuste le html:
<!–The content below is only a placeholder and can be replaced.–>
<div class=“content” style=“text-align:center”>
<img width=“300” alt=“logo” src=“https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Mario_Series_Logo.svg/1280px-Mario_Series_Logo.svg.png”>
<hr />
<h2>Ingrese los nombres</h2>
<input class=“formname” placeholder=“Primer Nombre” type=“text” [(ngModel)]=“firstname” />
<br />
<input class=“formname” placeholder=“Segundo Nombre” type=“text” [(ngModel)]=“secondname” />
<br />
<br />
<h2>Ingrese los apellidos</h2>
<input class=“formname” placeholder=“Apellidos” type=“text” [(ngModel)]=“surname” />
<br />
<br />
<h2>Ingrese la edad</h2>
<input class=“formname” placeholder=“años” type=“number” [(ngModel)]=“age” />
<br />
<span>Mi nombres es: {{ name }}</span>
<br />
<span>Mi edad es: {{ ageenter !=0 ? ageenter : “” }}</span>
<hr />
<button class=“formbutton” [disabled]=“enable” (click)=“check()”>Click Me!</button>
</div>
<router-outlet></router-outlet>

<h2>Data-Binding-Two Way Data Binding</h2>
<input type="text" placeholder="Tu usuario" [(ngModel)]="NombreUsuario">
<input type="text" placeholder="Tu Apellido" [(ngModel)]="ApellidoUsuario">
<br>
<h3>Mi nombre es: {{NombreUsuario}} {{ApellidoUsuario}}</h3>

Hola! Aqui mi ejercicio: En “src\app\app.component.ts” puse esto:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title:string = 'OCR-PlatziSquare';
  subtitle:string = 'Mi primer Angular App';
  listo:boolean = false;
  timeout:number = 3; // segundos
  nombre:string = '';
  apellido:string = '';
  constructor() {
    setTimeout(() => {
      this.listo = true;
    }, this.timeout*1000);
  }
  hacerAlgo() {
    alert('Ponte a Hacer Algo');
  }
  capitalizar(str_in) {
    // google: js capitalize
    // Capitalize words in string
    // https://stackoverflow.com/questions/2332811/capitalize-words-in-string
    return str_in.replace(/\b\w/g, l => l.toUpperCase());
  }
}

Luego en “src\app\app.component.html” puse esto:

<input type="text" placeholder="Mi nombre" [(ngModel)]="nombre"/>
<br />
<input type="text" placeholder="Mi apellido" [(ngModel)]="apellido"/>
<br />
Mi nombre es {{capitalizar(nombre)}} {{capitalizar(apellido)}}

El resultado es que el nombre y el apellido aparece con la primera letra en mayúscula, gracias al método capitalizar() creado en En “src\app\app.component.ts”.

Saludos!

Siguiendo las instrucciones del video, en el archivo app.component.html agregue otra caja de texto para introducir el apellido!

Screenshot_4.png

Y luego agregue la variable apellido en el archivo app.component.ts

Screenshot_5.png

Aquí mi solución agregando un select como segundo input en el que uso TwoWayDataBinding y EventBinding:

<input type="text" placeholder="Nombre" [(ngModel)]="usuario">
<br>
<select id="" [(ngModel)]="option" (change)="selectDomain();">
  <option value="">Seleccionar</option>
  <option value="@hotmail.com">Outlook</option>
  <option value="@gmail.com">Google</option>
  <option value="@company.com">MyCompany</option>
</select>
<br><br>
<strong>e-mail: {{usuario}}{{dominio}}</strong> 
<router-outlet></router-outlet>

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

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

  /** TwoWayDataBinding */
  option:string = '';
  usuario:string = '';
  dominio:string = '';

  /** Property DataBinding */
  constructor() {
    setTimeout(() => {
      this.enabled = true;
    }, 3000);
  }

  /** Event DataBinding */
  doSomething() {
    alert('Angular.JS');
  }

  selectDomain() {
    this.dominio = this.option;
  }
}

Seria excelente que en uno de los ejemplos usaras algo por ejemplo.

<input [(ngModel)]='text' />
<button (click)='igual()'> Click me!</button> 
<div *ngIf='platzi''> Usted es platzi user</div>

.ts
igual=false;
platzi='false';

click(){
if (text=='platzi'){
	this.platzi=true;
}
else{ 
this.platzi='false';
}
}

Unicamente valida con una funcion un poco innecesaria que el string sea platzi, de ser verdad el deberia de mostrar el div podria usarse ngOnChanges pero es un poco mas adelante!

Excelente clase, el ejercicio es bastante simple. Aqui esta mi versión:

<code>
<input type="text" placeholder="Tu nombre" [(ngModel)]="nombreDeUsuario"/>
    <input type="text" placeholder="Tu apellido" [(ngModel)]="apellidoDeUsuario"/>
    <p>Mi nombre es: {{nombreDeUsuario + " " + apellidoDeUsuario }}</p>

component.ts

class Person {
    firstName: string;
    lastName: string;
    constructor(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName  = lastName;
    }
    greet() {
        return `Hola ${this.firstName} ${this.lastName}`;
    }
}

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

  person: Person = new Person('Eduardo', 'Denis')

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

  doSomething(){
    alert(this.person.greet());
  }

component.html

  <div>
    <!-- Property Binding [] -->
    <!-- Event Binding ()  -->
    <button [disabled]="!ready" (click)="doSomething()">
      Click me!
    </button>
  </div>
  <div>
    <!-- Two Ways Data Binding  -->
    <input type="text" [(ngModel)]="person.firstName">
    <input type="text" [(ngModel)]="person.lastName">

    <!-- String Interpolation {{}}  -->
    <p> {{ person.greet() }} </p>
  </div>

En app.component.ts -> AppComponent{ miApellido:string=’’;}
En app.component.html -> <input type=“text” placeholder=“Tu apellido” [(ngModel)]=“miApellido”/>
Hola, {{miNombre}} {{miApellido}}

Esta es la solución para el ejercicio

<<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>

  <hr />

  <button [disabled]="!cambiatValor()" (click)="mostrarMensaje()"> Dar click </button>

  <hr />

   <input type="text" placeholder="Nombre de paciente"     [(ngModel)]="nombre"/>
   <input type="text" placeholder="Apellido de paciente"   [(ngModel)]="apellido"/>
   <hr />
   mi nombre es {{nombre+apellido}}
</div>
<router-outlet>

</router-outlet>>
<import { Component } from '@angular/core';

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

  constructor() {

  }

  cambiatValor() {
    setTimeout(() => {
      this.listo = true;

    }, 3000);
    return this.listo;
  }

  mostrarMensaje() {
    alert('Haciendo proceso');
  }
}
>

Aquí sería para agregar nombre<espacio>apellido

<div style="text-align:center">
  <h1>
    Bienvenidos a {{ title }}!
  </h1>
  <hr/>
  <input type="text" placeholder="Nombre" [(ngModel)]="nombre" />
  <br/>
  <input type="text" placeholder="Apellido" [(ngModel)]="apellido" />
  <br />
  <p>Mi nombre es {{ nombre }} &nbsp; {{ apellido }}</p>
</div>

TS

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 = 3;
  nombre:string = "";
  apellido:string = "";

  listo = false;

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

  hacerAlgo(){
    alert("Hola");
  }
}

HTML

<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <h2>
    {{ a + b }}
  </h2>
  <hr>  
  <button [disabled]="!listo" (click)="hacerAlgo()">Click me!</button>
  <hr>
  <input type="text" placeholder="Nombre" [(ngModel)]="nombre">  
  <br>  
  <input type="text" placeholder="Apellido" [(ngModel)]="apellido">  
  <br>
  Mi nombre es {{nombre}} {{apellido}}
</div>

Los cuadros de texto

<input type="text" placeholder="Mi nombre" [(ngModel)]="nombre" />
<input type="text" placeholder="Mi apellido" [(ngModel)]="apellido" />

Primea forma

 <br/> Mi nombre completo es {{nombre + " " + apellido}}

Segunda forma

 <br/> Mi nombre completo es {{nombre}} {{apellido}}

Mi clase

export class AppComponent {
  title = 'PlatziSquare';
  listo = false;
  nombre = '';
  apellido = '';

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

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

Muy buenas funcionalidades las que nos brinda Angular 😂

Captura de pantalla (20).png

Solución:

<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <h2>
    {{a+b}}
  </h2>
  <hr/>
  <button [disabled]="!listo" (click)="hacerAlgo()">Click me!</button>
  <hr/>
  <input type="text" placeholder="Tu nombre" [(ngModel)]="nombre">
  <input type="text" placeholder="Tu nombre" [(ngModel)]="apellido">
  <br>
  Mi nombre es: {{nombre}} {{apellido}}
</div>
export class AppComponent {
  title = 'PlatziSquare';
  a = 3;
  b = 5;
  listo = false;
  nombre:string = '';
  apellido:string = '';

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

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

HTML:

<p>
    <input type="text" placeholder="Type your name.." [(ngModel)]="name" />
  </p>
  <p>
    <input
      type="text"
      placeholder="Type your last name..."
      [(ngModel)]="lastName"
    />
  </p>
  <br />
  <h3>Your name is: {{ name }} {{ lastName }}</h3>```

**TypeScript:**



name: String = ; lastName: String =;


Note que si esta tienes activado el google translate no funciona ngModel
pude evitarlo agregando una etiqueta meta en el html

<meta name="google" content="notranslate" />

Alguien me puede dar una solucion mas efectiva, ya que en algún momento el usuario puede usar google translate

la solucion es aumentando un par de lineas en app.compnent.html
<input type=“text” placeholder=“Tus Apellidos” [(ngModel)] = “apellidos” />
<br />
Mis Nombres son {{nombre}} {{apellidos}}

y en el archivo app.component.ts
 crear las variables apellidos 

Aqui va mi aporte para el 2 Data Binding:

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <h4>{{a + b}}</h4>
  <hr />
    <button [disabled] = "!listo" (click)="hacerAlgo()">Click</button>
  <hr/>
  <input type="text" placeholder="Tu Primer Nombre" [(ngModel)]="nombre1" />
  <br/>
  <input type="text" placeholder="Tu Segundo NOmbre" [(ngModel)]="nombre2" />
  <br/>
  Mi nombre es {{nombre1+' '+nombre2}}
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>


<router-outlet></router-outlet>```

app.component.ts:



import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
title = ‘PlatziSquare’;
a = 3;
b = 5;
listo=false;
nombre1 = ‘’;
nombre2 = ‘’;

constructor(){
setTimeout(() => {
this.listo = true;
},3000)
}
hacerAlgo(){
alert(‘Haciiendo algo’);
}
}

Tambien puse los nombres por separado {{Nombre1}} y {{Nombre2}}
<h1>Two way binding</h1>
Primer nombre: <input type="text" [(ngModel)]="nombre1">
<br>
Segundo nombre: <input type="text" [(ngModel)]="nombre2">
<br>
Tu nombre es: {{nombre1}} {{nombre2}}```

Yo lo hice de esta manera…

app.component.html ::

  <button [disabled]="!listo" (click)="hacerAlgo()">Click me!</button>
  <hr />
  <input type="text" placeholder="Tu nombre" [(ngModel)]="nombre" />
  <br />
  <input type="text" placeholder="Tu apellido" [(ngModel)]="apellido" />
  <br />
  <input type="text" placeholder="Tu fecha de nacimiento" [(ngModel)]="nacimiento" />
  <br />
  <br />
  Tu nombre es {{nombre}}, tu apellido es {{apellido}}, y seguramente tu edad este año, será {{hoy-nacimiento}}!
</div>

app.component.ts ::

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'SERGIOxelmundo';
  listo = false;
  nombre = '';
  apellido = '';
  nacimiento = '';
  hoy = 2019;

  constructor(){
  	setTimeout(() => {
  		this.listo = true;
  	}, 3000)
  }
  hacerAlgo(){
  	alert('Haciendo algo..!')
  }
}

Saludos,

Sergio
@SERGIOxelmundo

reto2twowaybinding_code.PNG

Aquí esta mi solución

<input type="text" placeholder="Tu Nombre" [(ngModel)]="nombre">
<br>
<input type="text" placeholder="Tu Apellido" [(ngModel)]="apellido">
<h2>Mi nombre completo es {{nombre}} {{apellido}}</h2>```

Nota: No me funcionó con la ruta de @angular/core… tuve que cambiar la ruta a @angular/forms.

<input type="text" placeholder="Tu nombre" [(ngModel)]="nombre" />
  <input type="text" placeholder="Tu apellido" [(ngModel)]="apellido">
  <br />
  Mi nombre es {{nombre}} {{apellido}}```

<div style=“text-align:center”>
<h1>
Bienvenido a {{ title }}!
</h1>
<h2>

</h2>
<hr />
<button [disabled]="!listo" (click)=“haceralgo()”>Click me!</button>
<hr />
<input type=“text” placeholder=“Tu nombre” [(ngModel)]=“nombre”/>
<br />
Mi nombre es {{nombre}}
<hr />
<input type=“text” placeholder=“Tu Apellido” [(ngModel)]=“apellido”/>
<br />
Mi apellido es {{apellido}}
</div>

Aquí pongo mi ejemplo

<div>
  Nombre:
  <input type="text" placeholder="Tú Nombre..." [(ngModel)]="nombre">
</div>
<div>
  Apellido:
  <input type="text" placeholder="Tú Apellido..." [(ngModel)]="apellido">
</div>
<div>
  Tú nombre completo es {{ nombre }} {{ apellido }}
</div>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Ejemplo de Platzi';
  nombre : string = '';
  apellido : string = '';
<hr>
Mi Nombre es
<input type="text" placeholder="Tu Nombre" [(ngModel)]="nombre">
<br>
{{ nombre }}
<br>
Mi Apellido es
<input type="text" placeholder="Tu Apellido" [(ngModel)]="apellido">
<br>
{{ apellido }}
<br>```

export class AppComponent {
  title = 'Platzi Square';
  nombre = '';
  apellido = '';

Simplemente duplique el Codigo para ingresar otra caja de texto como ingresar el nombre completo y la sume en interpolationString y creando por supuesto la variable apellido

<input type=“text” placeholder=“Tu Nombre” [(ngModel)]=“nombre” />
<input type=“text” placeholder=“Tu Apellido” [(ngModel)]=“apellido” />
<br />
Tu nombre completo es: {{nombre + apellido}}

Juntando Nombre y Apellido

    <input type="text" placeholder="Tu nombre"  [(ngModel)]="nombre"/>
    <hr />
    <input type="text" placeholder="Tu apellido" [(ngModel)]="apellido"/>
    <br />
    Mi nombre es {{nombre}} {{apellido}}```

nombre:string = ‘’;
apellido:string = ‘’;```

<input type=“text” [(ngModel)]=“nombre” />
<br/>
Mi nombre es {{nombre}}

 <input type="text" placeholder="Tu nombre" [(ngModel)]="nombre" />
  <input type="text" placeholder="Tu Apellido" [(ngModel)]="apellido" />
  <br>
  Mi nombre completo es {{nombre+" "+apellido}}
<input type="text" [(ngModel)]="user" placeholder="usuario">
<input type="text" [(ngModel)]="user2" placeholder="apellido">

<h1>{{user}} {{user2}}</h1>
  <input type="text" placeholder="Tu nombre 1" [(ngModel)]="nombreOne">
  <input type="text" placeholder="Tu nombre 2" [(ngModel)]="nombreTwo">
  <br>
  {{nombreOne}} {{nombreTwo}}
 <hr />
  <input type="text" placeholder="Tu nombre" [(ngModel)]="nombre"/>
  <br/>

  <input type="text" placeholder="Tu apellido" [(ngModel)]="apellido"/>
  <br/>

y cambiamos el TS appComponent

  apellido:string = '';

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

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:
https://github.com/angular/angular-cli#updating-angular-cli

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

Saludos.

Aqui mi solución:
1 - Declarar a variable "Apellido"
Captura de pantalla 2017-10-21 a la(s) 11.34.47 a.m..png
2 - Añadimos el input, un {{’ '}} para dejar un espacio y luego el apellido
Captura de pantalla 2017-10-21 a la(s) 11.39.50 a.m..png
Y así es como se ve:
Captura de pantalla 2017-10-21 a la(s) 11.34.00 a.m..png

buenas clases

Es muy mágico 😄

Mi Solución :
Untitled.png

<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
  }
}```


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 = ‘’;

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.

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>

TS

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

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!

Aquí va mi ejercicio : Captura de pantalla 2017-09-13 a las 20.29.21.pngCaptura de pantalla 2017-09-13 a las 20.31.21.png

2.PNG
<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>

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');
  }
}

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> 

muy interesante

Captura2.PNG
A si lo relsovi

Captura1.PNG
Captura2.PNG
<hr />
<input type="text" placeholder="Primer nombre" [(ngModel)]="nombre" />
<input type="text" placeholder="Segundo nombre" [(ngModel)]="nombre2" />
<br />
Mi nombre es {{nombre + ' ' +nombre2}}
</div>```




Mi solución

<hr />
 <input type="text" placeholder="Tu nombre" [(ngModel)]="nombre" />
 <br />
 <hr />
 <input type="text" placeholder="Tu apellido" [(ngModel)]="apellido" />
 <br />

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

Las variables se definieron en app.component.ts

nombre=''; //modo javascript
  //nombre:string=''; //Modo tyscript
  apellido:string='';```

app.component.html

<div id="f" style="text-align:center">
  <h1>
    Bienvenidos a {{ title }}!
  </h1>
  <h2>
    {{a + b}}
  </h2>
  <img width="400"  alt="NeedZaio Logo" src="http://gdurl.com/J5lT">
  <hr />
  <button [disabled]="! listo">Click me!</button>
  <button (click)="hacerAlgo()">Alert</button>
  <hr />
  <input type="text" placeholder="Tu nombre" [(ngModel)]= "nombre" />
  <input type="text" placeholder="Tu apellido" [(ngModel)]= "apellido" />
  <br />
  <span>Mis nombres y apellidos son {{ nombre + ' ' +  apellido }}</span>
</div>

app.component.ts

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PlatziSquare Project';
  a = 3;
  b = 5;
  listo = false;
  nombre = '';                  //  Puedo escribir nombre: string = ''; queda TS
  apellido = '';                //  nombre & appellido declared to make two way data binding with [(ngModel)]

  constructor() {               //  Funcion que se ejecuta al cargarse la clase
    setTimeout(() => {
      this.listo = true;        //  Data binding properity [disabled], change 'listo' to true bolean value
    }, 3000);                   //  in 3000ms
  }

  hacerAlgo() {                 // data binding event when (click)
    alert('Haciendo algo!');
  }
}
<input type="text" placeholder="Tu nombre" [(ngModel)]="nombre">
<br />
<input type="text" placeholder="Tu nombre" [(ngModel)]="nombre2">

Mi nombre es {{nombre}} {{nombre2}}```
twoway1.PNG
twoway.PNG
//En app.component.html
<input type="text" placeholder="Primer nombre" [(ngModel)]="primerNombre">
<br>
<input type="text" placeholder="Segundo nombre" [(ngModel)]="segundoNombre">
<br>
//trim(), elimina los espacios al principio y fin de la cadena 
Hola, Mi nombre es {{primerNombre.trim() + ' ' +segundoNombre.trim()}}
//En app.components
export class AppComponent { 
	primerNombre:string = '';
	segundoNombre:string = '';
}

Existe otra manera de concatenar string?
O algo similar a un "StringBuilder"
Saludos 😃

Probé con los siguiente, algo muy sencillo

export class AppComponent {
  title = 'PlatzySquare';
  a = 3;
  b = 5;
  listo = false;
  nombre = '';
  apellido = '';

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

  hacerAlgo(){
    alert("El usuario " + this.nombre + " " + this.apellido + " ha sido registrado");
  }
}

Integre cada los temas vistos en este video, además tome en cuenta la observación de pockajnicolas y el resultado es interesante.

<input type="text" placeholder="Nombres" [(ngModel)]="nombre" /> <br>
  <input type="text" placeholder="Apellidos" [(ngModel)]="apellido" /> <br>
  <input type="text" placeholder="Teléfono" [(ngModel)]="telefono" /> <br>
  <input type="text" placeholder="Año de nacimiento" [(ngModel)]="numero" />

  <br />
  Mi nombre es {{nombre}} {{apellido}} <br> Mi telefono es {{telefono}} <br><br>
  Tu edad es: {{(numero) - ano}}```
<input type="text" placeholder="Nombre" [(ngModel)]="nombre" />
  <br/>
  <input type="text" placeholder="Apellido Paterno" [(ngModel)]="apellidoPaterno" />
  <br/>
  <input type="text" placeholder="Apellido Materno" [(ngModel)]="apellidoMaterno" />
  <h3>Mi nombre completo es {{nombre}} {{apellidoPaterno}} {{apellidoMaterno}} </h3>

Yo no quise andar haciendo más variables, así que hice una función y ahí concatené los dos nombres

processName(){	
	alert(`${this.nombre} ${this.segundoNombre}`)
}

y al final sólo invoqué a la función en el buttom así

<button [disabled]="!listo" (click)="processName()"> Touch me xd </button>

Un saludo!

Solución al desafió:
Sin título.png

Hay alguna manera de usar con string interpolation el string template de es2016 de la siguiente manera:

{{ `${ nombre1 } ${ nombre2 }` }}

porque lo intente y no funciono y con vuejs si es posible

Two way data binding

Inserción del two way data binding

Mezclando el Twoway databinding con String interpolation

Mezclando el Twoway databinding con String interpolation

Conectando con TS

Uso de tipos en TS

El error por ausencia de FormModule

Importando FormModule

Yo agregue el nombre y el apellido

app.component.html

<div style="text-align:center">
  <h1>
    Bienvenidos a {{ title }}!
  </h1>
  <h2>{{a+b}}</h2>
  <hr/>
  <button [disabled]="!listo" (click)="hacerAlgo()">Click me</button>
  <hr/>
  <input type="text" placeholder="Nombre" [(ngModel)]="nombre" />
  <br/>
  <input type="text" placeholder="Apellido" [(ngModel)]="apellido" />
  <br />
  <p>Mi nombre es {{nombre}} {{apellido}}</p>
</div>

app.component.ts

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 = 3;
  listo = false;
  nombre:string = "";
  apellido:string= "";

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

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

Captura de pantalla de 2018-08-31 18-53-37.png

Mi solución:
Reto2A4.JPG
Reto2.2A4.JPG

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 😦

Mi solucion es la siguiente, del lado de html

  <input type="text" placeholder="Tu Apellido" [(ngModel)]="apellido"/>
  <br/>
  Mi nombre es {{nombre}} {{apellido}}

y del lado del .ts

  apellido:string = '';

Agregué otro nombre de esta manera:

<input type="text" placeholder="Tu nombre 1" [(ngModel)]="primerNombre" />
  <input type="text" placeholder="Tu nombre 2" [(ngModel)]="segundoNombre" />
  <br />
  Mi nombre es {{primerNombre }} {{segundoNombre}}

Que genial, antes se me había dificultado demasiado este tipo de acciones pero explicadas de esta manera es muy sencillo.

<input type=“text” placeholder=“Tu nombre 2” [(ngModel)]=“nombre2”>
<br>
Dos nombres son {{nombre+" "+nombre2}}

Eso es en component.html

y en component.ts
solo declaré nombre2

<input type="text" name="" value="" placeholder="Tu nombre" [(ngModel)]="nombre"/>
<input type="text" name="" value="" placeholder="Tu apellido" [(ngModel)]="apellido"/>
<br>
Mi nombre es {{nombre + ' ' + apellido}}```

Para el reto agregué esto en el app.component.html:

<input type="text" placeholder="Primer nombre" [(ngModel)]="nombre"/>

<input type="text" placeholder="Segundo nombre" [(ngModel)]="nombre1"/>

<br/>

Mi nombre es {{nombre}} + {{nombre1}}
</div>

y en el app.components.ts:

export class AppComponent {
  title = 'PlatziSquare';
  a=3;
  b=10;
  listo= false;
 
 nombre:string='';
 nombre1='';

En el navegador se coloca un nombre al lado del otro a medida que lo voy escribiendo.

  <input type="text" placeholder="tu nombre" [(ngModel)]="nombre">
  <hr>
  <input type="text" placeholder="Apellido" [(ngModel)]="Apellido">
  <hr>
  Mi nombre es {{nombre}} {{Apellido}}```

Mi solución:
En el archivo .ts se declara la variable para el segundo nombre Varible2.PNG

En el archivo html se coloca la caja de texto para el segundo nombre con la etiqueta input: html.PNG

Y el resultado que obtuve fue:
nombreCompleto.PNG

Captura.PNG
<div>
  <hr>
  <input type="text" placeholder="Tu Nombre" [(ngModel)]="nombre">
  <br>
  Mi nombre es {{nombre}}
</div>

<div>
    <hr>
    <input type="text" placeholder="Tu primer apellido" [(ngModel)]="apellido1">
    <br>
    <input type="text" placeholder="Tu segundo apellido" [(ngModel)]="apellido2">
    <br>
    Mis apellidos son {{apellido1}} {{apellido2}}
    <br>
    <h1>Mi nombre completo es: {{nombre}} {{apellido1}} {{apellido2}}</h1>
  </div>

HTML

<div style="text-align:center">
  <h2>Two way data binding</h2>
  <input type="text" placeholder="Escribe tu nombre" [(ngModel)]="name" />
  <input type="text" placeholder="Escribe tu Apellido" [(ngModel)]="lastName" />
  <br />
  Mi nombre es {{name}} {{lastName}}
</div>

TypeScript

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

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

app.component.html

  <input type = "text" placeholder="Nombre" [(ngModel)] = "nombre" /> &nbsp;
  <input type = "text" placeholder="Apellido" [(ngModel)] = "apellido" />
  <br>
  Mi nombre es: {{nombre}} {{apellido}}

Agregar la propiedad fuera del constructor:

 apellido:string = '';
appinicial.png
appComponent.png

Me da error en el import
adjunto imagen

cuando me pongo encima del error me sale lo siguiente
TSLint ‘should be’ (quotemark)
me podeis ayudar??

como se mete una imagen??

Le realize una para nombre y apellidos, es muy interesante.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align: center">
  <h1>
    Bienvenido a {{ title }}!

  </h1>

  <hr />
  <button [disabled]="!listo" (click)="hacerAlgo()" >Click me !</button>
  <hr />
  <label>Nombres</label>
  <input type="text" placeholder="Nombre 1" [(ngModel)]="nombres"/>
  <label>Apellidos</label>
  <input type="text" placeholder="Nombre 2" [(ngModel)]="apellidos"/>
  <br />
  Mi nombre completo es: {{nombres+' '+apellidos}}


</div>

Interesante mi solución al ingresar nombre y apellidos.

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align: center">
  <h1>
    Bienvenido a {{ title }}!

  </h1>

  <hr />
  <button [disabled]="!listo" (click)="hacerAlgo()" >Click me !</button>
  <hr />
  <label>Nombres</label>
  <input type="text" placeholder="Nombre 1" [(ngModel)]="nombres"/>
  <label>Apellidos</label>
  <input type="text" placeholder="Nombre 2" [(ngModel)]="apellidos"/>
  <br />
  Mi nombre completo es: {{nombres+' '+apellidos}}


</div>
<div class="container">
  <button class="btn btn-primary" [disabled]="!listo" (click)="hacerClick()" >boton</button>
  <hr>
  <input type="text" name="" id="nombre" placeholder="Nombre"  [(ngModel)]="nombre">
  <br>
  <input type="text" name="" id="apellido" placeholder="Apellido"  [(ngModel)]="apellido">
  <br>
  <p>Mi nombre es {{ nombre }} <strong>{{apellido}}</strong></p>
</div>```
 
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>
  <h2>{{a+b}} </h2>
  <hr />
  <button [disabled]= "!listo" (click)="hacerAlgo()">CLICK¡¡¡</button>
  <hr />
  <input type="text" placeholder="Tu nombre" [(ngModel)]="nombre" />
  <input type="text" placeholder="apellido" [(ngModel)]="apellido" />
  Mi nombre es {{nombre}}
  Y mi apellido es {{apellido}}
</div>

Lo realizado
DataBiding2.JPG

DataBiding.JPG

mi código

<hr>
<input type=“text” placeholder=“Apellido” [(ngModel)]=“Apellido” >
<br>
<i>Me presento soy </i> <b>{{Nombre}} {{Apellido}} </b>

TS

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'PlatziSquare';
  a = 3;
  b = 5;
  listo = false;
  nombre:string = "";
  nombreMascota:string = "";
  constructor(){
      setTimeout(() =>{
      this.listo = true;

      },3000 );
  }
  hacerAlgo(){
    alert('Haciendo Algo');
  }
}

Html

<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
<h2>
  {{a+b}}
</h2>
<hr />
<button [disabled] = "!listo" (click)= "hacerAlgo()" >Clic Me</button>
<hr />

<input type="text" placeholder="Tu nombre" [(ngModel)] = "nombre" />
<input type="text" placeholder="Nombre Mascota" [(ngModel)] = "nombreMascota" />

<br>
Tu nombre es {{nombre}} Y el nombre de tu mascota es {{nombreMascota}}
</div>

Primero cree mis parámetros o variables y después agregue unas validaciones al evento del click en el componente del typescript:

import { Component } from “@angular/core”;

@Component({
selector: “app-root”,
templateUrl: “./app.component.html”,
styleUrls: ["./app.component.css"],
})
export class AppComponent {
title = “PlatziSquare”;
enable = true;
name: string = “”;
firstname: string = “”;
secondname: string = “”;
surname: string = “”;
age: number = 0;
ageenter: number = 0;

constructor() {
setTimeout(() => {
this.enable = false;
}, 3000);
}

check() {
if (this.firstname) {
if (this.secondname) {
if (this.surname) {
if (this.age != 0) {
this.name = this.firstname + " " + this.secondname + " " + this.surname;
this.ageenter = this.age;
} else {
alert(“Debe ingresar un valor mayor a 0”);
}
} else {
alert(“Debe ingresar los apellidos”);
}
} else {
alert(“Debe Ingresar el segundo nombre”);
}
} else {
alert(“Debe ingresar el primer nombre”);
}
}
}

Después ajuste le html:
<!–The content below is only a placeholder and can be replaced.–>
<div class=“content” style=“text-align:center”>
<img width=“300” alt=“logo” src=“https://upload.wikimedia.org/wikipedia/commons/thumb/0/05/Mario_Series_Logo.svg/1280px-Mario_Series_Logo.svg.png”>
<hr />
<h2>Ingrese los nombres</h2>
<input class=“formname” placeholder=“Primer Nombre” type=“text” [(ngModel)]=“firstname” />
<br />
<input class=“formname” placeholder=“Segundo Nombre” type=“text” [(ngModel)]=“secondname” />
<br />
<br />
<h2>Ingrese los apellidos</h2>
<input class=“formname” placeholder=“Apellidos” type=“text” [(ngModel)]=“surname” />
<br />
<br />
<h2>Ingrese la edad</h2>
<input class=“formname” placeholder=“años” type=“number” [(ngModel)]=“age” />
<br />
<span>Mi nombres es: {{ name }}</span>
<br />
<span>Mi edad es: {{ ageenter !=0 ? ageenter : “” }}</span>
<hr />
<button class=“formbutton” [disabled]=“enable” (click)=“check()”>Click Me!</button>
</div>
<router-outlet></router-outlet>

<h2>Data-Binding-Two Way Data Binding</h2>
<input type="text" placeholder="Tu usuario" [(ngModel)]="NombreUsuario">
<input type="text" placeholder="Tu Apellido" [(ngModel)]="ApellidoUsuario">
<br>
<h3>Mi nombre es: {{NombreUsuario}} {{ApellidoUsuario}}</h3>

Hola! Aqui mi ejercicio: En “src\app\app.component.ts” puse esto:

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title:string = 'OCR-PlatziSquare';
  subtitle:string = 'Mi primer Angular App';
  listo:boolean = false;
  timeout:number = 3; // segundos
  nombre:string = '';
  apellido:string = '';
  constructor() {
    setTimeout(() => {
      this.listo = true;
    }, this.timeout*1000);
  }
  hacerAlgo() {
    alert('Ponte a Hacer Algo');
  }
  capitalizar(str_in) {
    // google: js capitalize
    // Capitalize words in string
    // https://stackoverflow.com/questions/2332811/capitalize-words-in-string
    return str_in.replace(/\b\w/g, l => l.toUpperCase());
  }
}

Luego en “src\app\app.component.html” puse esto:

<input type="text" placeholder="Mi nombre" [(ngModel)]="nombre"/>
<br />
<input type="text" placeholder="Mi apellido" [(ngModel)]="apellido"/>
<br />
Mi nombre es {{capitalizar(nombre)}} {{capitalizar(apellido)}}

El resultado es que el nombre y el apellido aparece con la primera letra en mayúscula, gracias al método capitalizar() creado en En “src\app\app.component.ts”.

Saludos!

Siguiendo las instrucciones del video, en el archivo app.component.html agregue otra caja de texto para introducir el apellido!

Screenshot_4.png

Y luego agregue la variable apellido en el archivo app.component.ts

Screenshot_5.png

Aquí mi solución agregando un select como segundo input en el que uso TwoWayDataBinding y EventBinding:

<input type="text" placeholder="Nombre" [(ngModel)]="usuario">
<br>
<select id="" [(ngModel)]="option" (change)="selectDomain();">
  <option value="">Seleccionar</option>
  <option value="@hotmail.com">Outlook</option>
  <option value="@gmail.com">Google</option>
  <option value="@company.com">MyCompany</option>
</select>
<br><br>
<strong>e-mail: {{usuario}}{{dominio}}</strong> 
<router-outlet></router-outlet>

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

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

  /** TwoWayDataBinding */
  option:string = '';
  usuario:string = '';
  dominio:string = '';

  /** Property DataBinding */
  constructor() {
    setTimeout(() => {
      this.enabled = true;
    }, 3000);
  }

  /** Event DataBinding */
  doSomething() {
    alert('Angular.JS');
  }

  selectDomain() {
    this.dominio = this.option;
  }
}

Seria excelente que en uno de los ejemplos usaras algo por ejemplo.

<input [(ngModel)]='text' />
<button (click)='igual()'> Click me!</button> 
<div *ngIf='platzi''> Usted es platzi user</div>

.ts
igual=false;
platzi='false';

click(){
if (text=='platzi'){
	this.platzi=true;
}
else{ 
this.platzi='false';
}
}

Unicamente valida con una funcion un poco innecesaria que el string sea platzi, de ser verdad el deberia de mostrar el div podria usarse ngOnChanges pero es un poco mas adelante!

Excelente clase, el ejercicio es bastante simple. Aqui esta mi versión:

<code>
<input type="text" placeholder="Tu nombre" [(ngModel)]="nombreDeUsuario"/>
    <input type="text" placeholder="Tu apellido" [(ngModel)]="apellidoDeUsuario"/>
    <p>Mi nombre es: {{nombreDeUsuario + " " + apellidoDeUsuario }}</p>

component.ts

class Person {
    firstName: string;
    lastName: string;
    constructor(firstName: string, lastName: string) {
        this.firstName = firstName;
        this.lastName  = lastName;
    }
    greet() {
        return `Hola ${this.firstName} ${this.lastName}`;
    }
}

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

  person: Person = new Person('Eduardo', 'Denis')

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

  doSomething(){
    alert(this.person.greet());
  }

component.html

  <div>
    <!-- Property Binding [] -->
    <!-- Event Binding ()  -->
    <button [disabled]="!ready" (click)="doSomething()">
      Click me!
    </button>
  </div>
  <div>
    <!-- Two Ways Data Binding  -->
    <input type="text" [(ngModel)]="person.firstName">
    <input type="text" [(ngModel)]="person.lastName">

    <!-- String Interpolation {{}}  -->
    <p> {{ person.greet() }} </p>
  </div>

En app.component.ts -> AppComponent{ miApellido:string=’’;}
En app.component.html -> <input type=“text” placeholder=“Tu apellido” [(ngModel)]=“miApellido”/>
Hola, {{miNombre}} {{miApellido}}

Esta es la solución para el ejercicio

<<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Welcome to {{ title }}!
  </h1>

  <hr />

  <button [disabled]="!cambiatValor()" (click)="mostrarMensaje()"> Dar click </button>

  <hr />

   <input type="text" placeholder="Nombre de paciente"     [(ngModel)]="nombre"/>
   <input type="text" placeholder="Apellido de paciente"   [(ngModel)]="apellido"/>
   <hr />
   mi nombre es {{nombre+apellido}}
</div>
<router-outlet>

</router-outlet>>
<import { Component } from '@angular/core';

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

  constructor() {

  }

  cambiatValor() {
    setTimeout(() => {
      this.listo = true;

    }, 3000);
    return this.listo;
  }

  mostrarMensaje() {
    alert('Haciendo proceso');
  }
}
>

Aquí sería para agregar nombre<espacio>apellido

<div style="text-align:center">
  <h1>
    Bienvenidos a {{ title }}!
  </h1>
  <hr/>
  <input type="text" placeholder="Nombre" [(ngModel)]="nombre" />
  <br/>
  <input type="text" placeholder="Apellido" [(ngModel)]="apellido" />
  <br />
  <p>Mi nombre es {{ nombre }} &nbsp; {{ apellido }}</p>
</div>

TS

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 = 3;
  nombre:string = "";
  apellido:string = "";

  listo = false;

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

  hacerAlgo(){
    alert("Hola");
  }
}

HTML

<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <h2>
    {{ a + b }}
  </h2>
  <hr>  
  <button [disabled]="!listo" (click)="hacerAlgo()">Click me!</button>
  <hr>
  <input type="text" placeholder="Nombre" [(ngModel)]="nombre">  
  <br>  
  <input type="text" placeholder="Apellido" [(ngModel)]="apellido">  
  <br>
  Mi nombre es {{nombre}} {{apellido}}
</div>

Los cuadros de texto

<input type="text" placeholder="Mi nombre" [(ngModel)]="nombre" />
<input type="text" placeholder="Mi apellido" [(ngModel)]="apellido" />

Primea forma

 <br/> Mi nombre completo es {{nombre + " " + apellido}}

Segunda forma

 <br/> Mi nombre completo es {{nombre}} {{apellido}}

Mi clase

export class AppComponent {
  title = 'PlatziSquare';
  listo = false;
  nombre = '';
  apellido = '';

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

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

Muy buenas funcionalidades las que nos brinda Angular 😂

Captura de pantalla (20).png

Solución:

<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <h2>
    {{a+b}}
  </h2>
  <hr/>
  <button [disabled]="!listo" (click)="hacerAlgo()">Click me!</button>
  <hr/>
  <input type="text" placeholder="Tu nombre" [(ngModel)]="nombre">
  <input type="text" placeholder="Tu nombre" [(ngModel)]="apellido">
  <br>
  Mi nombre es: {{nombre}} {{apellido}}
</div>
export class AppComponent {
  title = 'PlatziSquare';
  a = 3;
  b = 5;
  listo = false;
  nombre:string = '';
  apellido:string = '';

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

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

HTML:

<p>
    <input type="text" placeholder="Type your name.." [(ngModel)]="name" />
  </p>
  <p>
    <input
      type="text"
      placeholder="Type your last name..."
      [(ngModel)]="lastName"
    />
  </p>
  <br />
  <h3>Your name is: {{ name }} {{ lastName }}</h3>```

**TypeScript:**



name: String = ; lastName: String =;


Note que si esta tienes activado el google translate no funciona ngModel
pude evitarlo agregando una etiqueta meta en el html

<meta name="google" content="notranslate" />

Alguien me puede dar una solucion mas efectiva, ya que en algún momento el usuario puede usar google translate

la solucion es aumentando un par de lineas en app.compnent.html
<input type=“text” placeholder=“Tus Apellidos” [(ngModel)] = “apellidos” />
<br />
Mis Nombres son {{nombre}} {{apellidos}}

y en el archivo app.component.ts
 crear las variables apellidos 

Aqui va mi aporte para el 2 Data Binding:

app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <h4>{{a + b}}</h4>
  <hr />
    <button [disabled] = "!listo" (click)="hacerAlgo()">Click</button>
  <hr/>
  <input type="text" placeholder="Tu Primer Nombre" [(ngModel)]="nombre1" />
  <br/>
  <input type="text" placeholder="Tu Segundo NOmbre" [(ngModel)]="nombre2" />
  <br/>
  Mi nombre es {{nombre1+' '+nombre2}}
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
</div>


<router-outlet></router-outlet>```

app.component.ts:



import { Component } from ‘@angular/core’;

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
title = ‘PlatziSquare’;
a = 3;
b = 5;
listo=false;
nombre1 = ‘’;
nombre2 = ‘’;

constructor(){
setTimeout(() => {
this.listo = true;
},3000)
}
hacerAlgo(){
alert(‘Haciiendo algo’);
}
}

Tambien puse los nombres por separado {{Nombre1}} y {{Nombre2}}
<h1>Two way binding</h1>
Primer nombre: <input type="text" [(ngModel)]="nombre1">
<br>
Segundo nombre: <input type="text" [(ngModel)]="nombre2">
<br>
Tu nombre es: {{nombre1}} {{nombre2}}```

Yo lo hice de esta manera…

app.component.html ::

  <button [disabled]="!listo" (click)="hacerAlgo()">Click me!</button>
  <hr />
  <input type="text" placeholder="Tu nombre" [(ngModel)]="nombre" />
  <br />
  <input type="text" placeholder="Tu apellido" [(ngModel)]="apellido" />
  <br />
  <input type="text" placeholder="Tu fecha de nacimiento" [(ngModel)]="nacimiento" />
  <br />
  <br />
  Tu nombre es {{nombre}}, tu apellido es {{apellido}}, y seguramente tu edad este año, será {{hoy-nacimiento}}!
</div>

app.component.ts ::

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'SERGIOxelmundo';
  listo = false;
  nombre = '';
  apellido = '';
  nacimiento = '';
  hoy = 2019;

  constructor(){
  	setTimeout(() => {
  		this.listo = true;
  	}, 3000)
  }
  hacerAlgo(){
  	alert('Haciendo algo..!')
  }
}

Saludos,

Sergio
@SERGIOxelmundo

reto2twowaybinding_code.PNG

Aquí esta mi solución

<input type="text" placeholder="Tu Nombre" [(ngModel)]="nombre">
<br>
<input type="text" placeholder="Tu Apellido" [(ngModel)]="apellido">
<h2>Mi nombre completo es {{nombre}} {{apellido}}</h2>```

Nota: No me funcionó con la ruta de @angular/core… tuve que cambiar la ruta a @angular/forms.

<input type="text" placeholder="Tu nombre" [(ngModel)]="nombre" />
  <input type="text" placeholder="Tu apellido" [(ngModel)]="apellido">
  <br />
  Mi nombre es {{nombre}} {{apellido}}```

<div style=“text-align:center”>
<h1>
Bienvenido a {{ title }}!
</h1>
<h2>

</h2>
<hr />
<button [disabled]="!listo" (click)=“haceralgo()”>Click me!</button>
<hr />
<input type=“text” placeholder=“Tu nombre” [(ngModel)]=“nombre”/>
<br />
Mi nombre es {{nombre}}
<hr />
<input type=“text” placeholder=“Tu Apellido” [(ngModel)]=“apellido”/>
<br />
Mi apellido es {{apellido}}
</div>

Aquí pongo mi ejemplo

<div>
  Nombre:
  <input type="text" placeholder="Tú Nombre..." [(ngModel)]="nombre">
</div>
<div>
  Apellido:
  <input type="text" placeholder="Tú Apellido..." [(ngModel)]="apellido">
</div>
<div>
  Tú nombre completo es {{ nombre }} {{ apellido }}
</div>
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  title = 'Ejemplo de Platzi';
  nombre : string = '';
  apellido : string = '';
<hr>
Mi Nombre es
<input type="text" placeholder="Tu Nombre" [(ngModel)]="nombre">
<br>
{{ nombre }}
<br>
Mi Apellido es
<input type="text" placeholder="Tu Apellido" [(ngModel)]="apellido">
<br>
{{ apellido }}
<br>```

export class AppComponent {
  title = 'Platzi Square';
  nombre = '';
  apellido = '';

Simplemente duplique el Codigo para ingresar otra caja de texto como ingresar el nombre completo y la sume en interpolationString y creando por supuesto la variable apellido

<input type=“text” placeholder=“Tu Nombre” [(ngModel)]=“nombre” />
<input type=“text” placeholder=“Tu Apellido” [(ngModel)]=“apellido” />
<br />
Tu nombre completo es: {{nombre + apellido}}

Juntando Nombre y Apellido

    <input type="text" placeholder="Tu nombre"  [(ngModel)]="nombre"/>
    <hr />
    <input type="text" placeholder="Tu apellido" [(ngModel)]="apellido"/>
    <br />
    Mi nombre es {{nombre}} {{apellido}}```

nombre:string = ‘’;
apellido:string = ‘’;```

<input type=“text” [(ngModel)]=“nombre” />
<br/>
Mi nombre es {{nombre}}

 <input type="text" placeholder="Tu nombre" [(ngModel)]="nombre" />
  <input type="text" placeholder="Tu Apellido" [(ngModel)]="apellido" />
  <br>
  Mi nombre completo es {{nombre+" "+apellido}}
<input type="text" [(ngModel)]="user" placeholder="usuario">
<input type="text" [(ngModel)]="user2" placeholder="apellido">

<h1>{{user}} {{user2}}</h1>
  <input type="text" placeholder="Tu nombre 1" [(ngModel)]="nombreOne">
  <input type="text" placeholder="Tu nombre 2" [(ngModel)]="nombreTwo">
  <br>
  {{nombreOne}} {{nombreTwo}}
 <hr />
  <input type="text" placeholder="Tu nombre" [(ngModel)]="nombre"/>
  <br/>

  <input type="text" placeholder="Tu apellido" [(ngModel)]="apellido"/>
  <br/>

y cambiamos el TS appComponent

  apellido:string = '';