Curso Angular 6 – Reactivo!

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 .

/img/2018/09/prueba4.mp4