Curso Angular 6 – Reactivo! September 19, 2018

Antes de continuar con el curso quiero dejar claro que Angular es reactivo.

¿ Que significa eso ?.

Pues básicamente que cualquier cambio que se haga en el modelo sera transmitido a la vista y viceversa. El modelo, entiéndase que son nuestros _Componentes. _Es decir, nuestras clases definidas en los ficheros TypeScript. La vista es el código HTML que se visualizara en nuestro navegador.

Así, si cambiamos el valor de un campo INPUT del HTML, que este unido con la directiva [(ngModel)] a una variable. Esa variable se modificara en tiempo real.

Obsérvese el siguiente código:

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

@Component({
  selector: 'app-datos-mes',
  template: '<p>Teclea aquí: <input [(ngModel)]="variable"/> <br>lo que estas tecleando: {{variable}} </p>',
})
export class DatosMesComponent{
  variable:string="";
} 

Esto nos mostraría una pantalla como esta:

!()[/img/2018/09/Captura1.png)

Al modificar el valor del input, cambiara el valor mostrado.

En cuanto tecleemos una letra, el valor de variable cambiara y, por lo tanto, el valor mostrado con {{variable}}  también cambiara.

Esto funciona a todos los niveles. Incluyendo las condiciones.

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

@Component({
  selector: 'app-datos-mes',
  template: `<p>Teclea aquí: <input [(ngModel)]="variable"/>
     <br>lo que estas tecleando: {{variable}} </p>
     <div *ngIf="variable=='0'">Variable es cero</div> `, 
})
export class DatosMesComponent{
  variable:string="";
}

Así, en el momento que el valor de variable sea igual a “0” Nos mostrara el texto Variable es cero. Como se puede ver en el siguiente vídeo .