Two Way Data Binding

buenas clases

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

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!

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

Mi nombre es {{nombre}} {{nombre2}}```

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ó:

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

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

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

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 = '';

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

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!

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

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 😂

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

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 = '';

/platzisquare/src/app/app.component.html

...
  <input type="text" placeholder="Tu primer nombre" [(ngModel)]="nombre1" />
  <input type="text" placeholder="Tu segundo nombre" [(ngModel)]="nombre2" />
  <br>
  Mi nombre es {{ nombre1 }} {{ nombre2 }}
...

/platzisquare/src/app/app.component.ts

export class AppComponent {
  ...
  nombre1:string = '';
  nombre2:string = '';
  ...
}

Primero cambiamos un poco las lineas en el archivo app.component.html

<hr />
  <input type="text" placeholder="Nombre 1" [(ngModel)]="nombre" />
  <br>
  <input type="text" placeholder="Nombre 2" [(ngModel)]="nombre2" />
  <br />
  El nombre combinado es {{nombre + nombre2}}

y por ultimo agregamos una variable mas al archivo app.component.ts

  nombre:string = '';
  nombre2:string = '';

Esta es mi solucion

<input type=“text” style=“text-align:center” placeholder=“Nombre” [(ngModel)]=“nombre”/>
<input type=“text” style=“text-align:center” placeholder=“apellido” [(ngModel)]=“apellido”/>
<br />
Mi nombre es {{nombre }} {{apellido}}

![](

El app.component.html

<!--The content below is only a placeholder and can be replaced.-->
<div style="text-align:center">
  <h1>
    Bienvenido a {{ title }}!
  </h1>
  <img width="300" alt="Angular Logo" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNTAgMjUwIj4KICAgIDxwYXRoIGZpbGw9IiNERDAwMzEiIGQ9Ik0xMjUgMzBMMzEuOSA2My4ybDE0LjIgMTIzLjFMMTI1IDIzMGw3OC45LTQzLjcgMTQuMi0xMjMuMXoiIC8+CiAgICA8cGF0aCBmaWxsPSIjQzMwMDJGIiBkPSJNMTI1IDMwdjIyLjItLjFWMjMwbDc4LjktNDMuNyAxNC4yLTEyMy4xTDEyNSAzMHoiIC8+CiAgICA8cGF0aCAgZmlsbD0iI0ZGRkZGRiIgZD0iTTEyNSA1Mi4xTDY2LjggMTgyLjZoMjEuN2wxMS43LTI5LjJoNDkuNGwxMS43IDI5LjJIMTgzTDEyNSA1Mi4xem0xNyA4My4zaC0zNGwxNy00MC45IDE3IDQwLjl6IiAvPgogIDwvc3ZnPg==">
  <div class="name">
    <input type="text" [(ngModel)]="nombre" placeholder="Tu nombre"/> |
    <input type="text" [(ngModel)]="apellido" placeholder="Tu apellido">
    <p>Tu nombre completo es {{nombre + ' ' + apellido}}</p>
  </div>
</div>

Y el 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';
  nombre:string = '';
  apellido:string = '';
}

app,component.html

<input type="text" placeholder="tu nombre..." [(ngModel)]="nombre">
<input type="text" placeholder="tu apellido..." [(ngModel)]="apellido">
<br>
Mi nombre es: {{nombre + ' ' + apellido}}

app,component.ts

  nombre:string = '';
  apellido:string = '';

Hola. Para usar Two Way Data Binding es necesario importar FormsModule en app.module.ts, al menos en Angular 8

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

Y agregarlo en el array de imports

@NgModule({
  declarations: [...],
  imports: [...FormsModule],
  providers: [],
  bootstrap: [...]

No se si lo menciono el profesor, pero yo lo olvide y muestra un error. Por si alguien mas lo olvido o no se menciono 😃

Yo utilice un event binding en cada input para llamar una funcion que agregue ese input

.html

<input
    type="text"
    placeholder="Name"
    [(ngModel)]="name"
    (keypress)="addName()"
  />
  <input
    type="text"
    placeholder="Lastname"
    [(ngModel)]="lastname"
    (keypress)="addLastname()"
  />
  <br />
  <p *ngIf="fullname">My name is {{ fullname }}</p>

.ts

addName() {
    setTimeout(() => {
      this.fullname = this.name;
    }, 200);
  }

  addLastname() {
    setTimeout(() => {
      this.fullname = this.name + ' ' + this.lastname;
    }, 200);
  }

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

Esta es mi solución.

app.component.ts

app.component.html

Resultado

html

<!--The content below is only a placeholder and can be replaced.-->
<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">
  <br />
  <input type="text" placeholder="Tu apuellido" [(ngModel)]="apellido">
  <br />
  Mi Apellido es {{apellido}}
  <br />
  Tu nombre completo es : {{nombre + ' ' + apellido}}
</div>

TS

nombre:string = '';
 apellido:string = '';

app.component.html

app.component.ts

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

export class AppComponent {
  nombre = '';
  apellido = '';
}

Solución para mostrar el nombre completo:
app.component.html

app.component.ts

Resultado

mi solucion
app.component.ts

app.component.html

Resultado

<input type="text" placeholder="Nombre" [(ngModel)]="Nombre" />
<br />
<input type="text" placeholder="Apellido" [(ngModel)]="Apellido" />
<br />
Bienvenido {{Nombre}} {{Apellido}} 

Nombre:string=''; 
Apellido:string=''; 

<code>
<div style="text-align:center">
  <h1>
    <span>{{ title }} app is running!</span>
  </h1>
  <h2>
    {{a+b}}
  </h2>
  <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/>
  <h1>
    Mi Nombre es {{nombre}} <strong>{{apellido}}</strong>
  </h1>

</div>

Es normal que funcione aun sin haber declarado la variable nombre?, si es así, ¿Porque sucede esto ?

<!-- Resources -->
<h2>Resources</h2>
<hr/>
<button [disabled]="!listo"> click me!</button>
<hr/>
<button [disabled]="!listo1" (click)=“hacerAlgo()”> click me!</button>
<hr/>
<input type=“text” placeholder=“tu nombre” [(ngModel)]=“nombre” />
<input type=“text” placeholder=“tu nombre1” [(ngModel)]=“nombre1” />

<hr/>
Mi nombre es {{nombre + ’ y ’ + nombre1}}

/////////////////////////////////////

export class AppComponent {
title = ’ Hola Platzisquare’;
a=2;
b=4;
listo=false;
listo1=false;
nombre:string =’’;
nombre1:string =’’;
constructor(){
setTimeout(() => {
this.listo=true;
this.listo1=true;
},3000)
}
hacerAlgo(){
alert(‘Haciendo algo’);
}
}

<!-- app.component.html -->
<div style = “text-align: center”>
<h1> Bienvenido a {{title}} </h1>
<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 {{nombre}} {{apellido}}
</div>

//app.component.html
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(){
setTimeout(() => {
this.listo = true
},3000)
}
hacerAlgo(){
alert(‘Haciendo algo’)
}
}

<div style="text-align: center"> <h1>Bienvenido a {{ title }}</h1> <h2>Tenemos a {{ a }} + {{ b }} = {{ a + b}}</h2> <button [disabled]="!listo" (click) = "HacerAlgo()">Haz click en mi</button> <hr/> <input type="text" placeholder="Nombre ej Andrea" [(ngModel)]="nombre"> <input type="text" placeholder="Apellido ej Lamon" [(ngModel)]="apellido"> <hr/> <p>Mi nombre es {{ nombre }} {{apellido}}</p> </div>

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

@Component({
selector: ‘app-root’,
templateUrl: ‘./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
title = ‘platzi Square App’;
a = 3;
b = 5;
listo = false;
nombre = ‘’;
apellido = ‘’;
constructor(){
setTimeout(() => {
this.listo = true;
},3000)
}
hacerAlgo(){
alert(‘Haciendo algo’);
}
}`

<input type="text" placeholder="Tu nombre" [(ngModel)]="nombre">
  <br>
  <input type="text" placeholder="Tu nombre 2" [(ngModel)]="nombre2">
  <br>
  Nombre 1 es igual {{nombre}}
  <br>
  Nombre 2 es igual {{nombre2}}```

Mi solucion 😄

<!-- Two way Data Bindig y string interpoletion -->
      <input type="text" placeholder="Tu nombre" [(ngModel)]="nombre">
      <input type="text" placeholder="Tu Apellido" [(ngModel)]="apellido">

      <br />
      <p>Mi nombre es {{nombre}} y mi apellido {{apellido}}</p>

En app.component.ts
nombre: string ="";
apellido: string ="";

en el app.component.html

<input type=“text” placeholder=“Tu numbre” [(ngModel)] = “nombre”>
<hr>
<input type=“text” placeholder=“Tu Apellido” [(ngModel)] = “apellido”>
<br>
mi nombre completo es {{nombre}} {{apellido}}

A mi me sale el siguiente error

Solución

export class AppComponent {
  nombre:String = '';
  apellido:String = '';
}

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

<div>
    <label for="">Nombre</label> 
    <input type="text" placeholder="Tu nombre" [(ngModel)]="nombre">
  </div>
  <div>
    <label for="">Apellido:</label>
    <input type="text" placeholder="Tu apellido" [(ngModel)]="apellido">
  </div>

  <div>
    <p>Mi nombre es: {{nombre}} {{apellido}}</p>
  </div>

export class AppComponent {
  	title = 'Angular4Platzi';
  	listo = false;
  	nombre:string = '';
  	apellido:string = '';

<div>
    <button type="button" (click) = "changeTitle( 'Nuevo nombre' )" > Click me! </button>
    <br>
    <hr/>
    <br>
    <input type="text" placeholder="Ingrese nombre" [(ngModel)] = "firstName" />
    <br>
    <input type="text" placeholder="Ingrese Apellido" [(ngModel)] = "lastName" />
    <br>
    <span> Nombre: {{firstName}} </span>
    <br>
    <span> Apellido: {{lastName}} </span>
    <br>
  </div>

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

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

Por acá dejo mi código:
app.component.ts

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

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

  check(){
    if (this.name === '' || this.lastName === '') {
      this.notReady=true;
    }else{
      this.notReady=false ;
    }
  }

  hello(){
    alert(`Welcome to this App ${this.name} ${this.lastName}`);
  }
}

app.component.html

  <input type="text" placeholder="Nombre" (keyup)="check()" [(ngModel)]="name"><br>
  <input type="text" placeholder="Apellido" (keyup)="check()" [(ngModel)]="lastName"><br>
    Mi nombre es {{name}} {{lastName}}
  <button [disabled]="notReady" (click)="hello()">Hi</button>

<input type text=“text” placeholder=“Nombre” [{ngModel}]=“name”/>
<br/>
<input type text=“text” placeholder=“Apellido” [{ngModel}]=“lastName”/>
<br/>
{{name + ’ ’ + lastName}}

// variables app.component.ts
usuarioNombre: string = '';
usuarioApellido: string = '';

//app.component.html
<label for="nombre">Ingresa tu nombre</label><br>
    <input type="text"  name="nombre" [(ngModel)]="usuarioNombre"><br>
    <hr>
<label for="apellido">Ingresa tu apellido</label><br>
    <input type="text"  name="apellido" [(ngModel)]="usuarioApellido"><br>
<h6 class="display">
    {{usuarioNombre + ' ' + usuarioApellido}}
</h6>