Angular 2 - Estructura de directivas, Pipes y Métodos

Directivas

El siguiente post es continuación del resumen de Angular 2

Una directiva de Angular es la forma de añadir comportamiento dinámico a HTML mediante la etiqueta o selector que creamos.

Existen tres tipos diferentes de directivas:

Podemos verlas en el fragmento de código:

...
@Component({
  // El selector y templatte sería el primer tipo de directiva
  selector: 'my-app',
  template: `<h1>{{title}}</h1>
    <ul>
      <li *ngFor="let carPart of carParts">
        <h2>{{carPart.name}}<h2>
        <p>{{carPart.description}}<p>
        <p *ngIf="carPart.inStock > 0">{{carPart.inStock}} in Stock</p>
        <p *ngIf="carPart.inStock === 0">Out of Stock</p>
      </li>
    </ul>`

  // En el propio template observamos las directivas de estructura *ngFor y *ngIf

})
class AppComponent {
...

Pipes y Métodos

Un pipe coge un dato de entrada y lo transforma a la salida deseada, como por ejemplo:

Métodos (Methods) como podemos imaginar es añadir métodos en la clase de nuestro componente para luego ser utilizada:

...
@Component({
  selector: 'my-app',
  template: `<h1>{{title}}</h1>`

  })

class AppComponent {
  exampleMethod() {
      return 10;
    }
}