Este artículo ha sido escrito por Puri García Romeralo y publicado originalmente en el blog de Solid GEAR.

Angular para principiantes

En Solid Gear, nos gusta aprender y estar al día. Para tal fin, la empresa nos ofrece unos días de formación en la que puedas explorar la tecnología que más te apetezca.
Yo en mi caso, me decanté por Angular. Por lo que, en este artículo, Angular para principiantes, os voy a contar algo de lo que he aprendido.

Pero, ¿cómo se llama el framework exactamente?

Lo primero que me llamó la atención es el lío de nombres que hay. Los expertos lo sabréis, pero como principiante me resultó curioso.

Para empezar, se desarrolló Angular 1, al cual también se le llama Angular JS. Sin embargo, para la versión 2, reescribieron todo el framework. Y es la versión 2 lo que se conoce como Angular. Y luego Angular 4, 5, 6 son versiones de Angular 2.

¿Cuando se debe usar Angular?

Angular es muy útil para crear Single Page Applications (SPA). En este tipo de páginas web se descargan todo el código que se necesita, y luego van mostrando las diferentes secciones usando javaScript. Por lo tanto, no se vuelve a hacer peticiones al servidor como en las páginas web clásicas al navegar ella.

¿Qué he aprendido por ahora?

Los conceptos básicos que se deben conocer para usar Angular son las componentes, las directivas y los modelos.

Como resultado de mi formación, en este artículo, vamos a hablar sobre las componentes y la comunicación entre ellas.

Componentes

En Angular se trabaja con componentes. Las componentes tienen una plantilla .html, un fichero typeScript y opcionalmente una plantilla .css.

Esto permite aislar la lógica y los estilos de esa componente, y además hacerla reusable. Todo muy interesante.

Ejemplo:

import { Component, OnInit, Input } from '@angular/core';

@Component({
  selector: 'app-first',
  templateUrl: './first.component.html',
  styleUrls: ['./first.component.css']
})
export class FirstComponent implements OnInit {

  constructor() { }

  ngOnInit() {
  }

}

Así se añade la componente en la plantilla HTML de otra:

<app-first></app-first>

Llamaremos componente hija a app-first y componente padre a la componente donde hemos puesto ese código.

Databinding

Vamos a ver la comunicación dentro de la componente, las diferentes formas de transmitir información que existen entre javaScript (lógica de negocio) y la plantilla (html):

• string interpolation

  Las variables declaradas en la clase en el fichero .ts :

  export class FirstComponent {
     elementId: number = 10;
  }

  Para mostrar ese valor por la pantalla, se debe poner este código en la plantilla html:

  {{elementId}}

• Property binding: [property]=”data”.
  

  De este modo, damos un valor a la propiedad disabled a través de una variable javaScript llamada isDisabled declarada en el fichero .ts de la componente.

<button class="btn btn-primary" [disabled]=”isDisabled”>Add Server</button>

• Event binding: (event)=”expression”
  

  En la plantilla html de la componente se pone

  <button (click)=”onAddNewElement()”></button>

  Entonces, en el fichero .ts:

  onAddNewElement(){
  	
  }

  De este modo, cuando se hace click en el botón, se llama a la función.

• two-way-binding: [(ngModel)]=”data”
  

  Se combina property binding y event binding, por eso usa corchetes y paréntesis.

   <input type="text"  class="form-control"  [(ngModel)]="elementName">

  Esto hace que cuando se lanza el evento input y se actualiza el valor del elementName en nuestra componente automáticamente. Pero además (como es two-way-binding) se actualizará el valor del input si lo modificamos en otro sitio.

Comunicación entre componentes

• Binding to custom property.
  

  En esta sección vamos a ver cómo transmitir información de una componente padre a una hija.

  Por defecto las propiedades de una componente solo son accesibles desde la propia componente. Tenemos la propiedad elementName, declarada en la clase en el fichero .ts de la componente hija.

  elementName: {type: string, name: string, content: string}

  Por ese motivo, si queremos permitir a las componentes padres acceder a esa propiedad, necesitamos añadir un decorador (y importar el modulo input en esa clase).

  @Input() elementName: {type: string, name: string, content: string}

  En el fichero .html de la componente padre, entonces podemos poner:

  <app-first *ngFor=”let element of elementList” [elementName]=”element”></app-first>

  Sin embargo, si no quisiésemos usar el mismo nombre fuera que dentro, podríamos hacerlo así:

  @Input(‘otherElementName’) elementName: {type: string, name: string, content: string}

  Y en la componente padre:

<app-first *ngFor=”let element of elementList” [otherElementName]=”element”></app-first>

• Binding to custom events
  

  En esta otra sección, vamos a ver cómo transmitir información de una componente hija a la padre.

  Por ejemplo, creamos un nuevo elemento en la componente hija y queremos informar al padre de cómo se llama.

  En la plantilla de la componente hija (app-first), tenemos este código

  <button (click)=”onAddNewElement()”></button>

  Cuando creamos el elemento, queremos transmitirle el nombre a la padre. Para ello, en el fichero .ts de la componente hija necesitamos crear un evento para transmitir esa información.

  Creamos una propiedad llamada elementCreated del tipo EventEmitter, indicando los parámetros que se van a emitir. Además hay que añadirle el decorador Output para que el evento se puede escuchar desde fuera.

  @Output() elementCreated = new EventEmitter();

  Cuando se hace click en el botón para crear un nuevo elemento, se llama a la función onAddNewElement que es la que va emitir el evento:

  onAddNewElement() {
  	this.elementCreated.emit(this.newElementName);
  }

  Entonces en la plantilla .html de la componente padre, añadimos el código correspondiente para escuchar ese evento:

  <app-first (elementCreated)=”onElementAdded($event)”</app-first> 

  En el archivo .ts de la componente padre, se declararia la función onElementAdded.

  onElementAdded(elementName: string){
  
  }

¿Qué es lo que más te llamó la atención a ti cuando empezaste a aprender Angular?