Angular 2
Plantillas

Introducción

Plantillas angulares 2

UNA PLANTILLA SIMPLE

Comencemos con una plantilla muy simple que muestra nuestro nombre y nuestra cosa favorita:

<div>
  Hello my name is {{name}} and I like {{thing}} quite a lot.
</div>

{}: RENDER

Para representar un valor, podemos usar la sintaxis de doble rizado estándar:

My name is {{name}}

Las canalizaciones, antes conocidas como "Filtros", transforman un valor en un nuevo valor, como localizar una cadena o convertir un valor de punto flotante en una representación de moneda:

[]: PROPIEDADES DE UNIÓN

Para resolver y enlazar una variable a un componente, use la sintaxis []. Si tenemos este.currentVolume en nuestro componente, lo pasaremos a nuestro componente y los valores permanecerán sincronizados:

<video-control [volume]="currentVolume"></video-control>
(): HANDLING EVENTS

(): MANEJAR EVENTOS Para escuchar un evento en un componente, usamos la sintaxis ()

<my-component (click)="onClick($event)"></my-component>

[()]: VINCULACIÓN DE DATOS DE DOS VÍAS

Para mantener un enlace actualizado con la entrada del usuario y otros eventos, use la sintaxis [()]. Piense en ello como una combinación de manejar un evento y vincular una propiedad:

<input [(ngModel)] = "myName"> El valor this.myName de su componente se mantendrá sincronizado con el valor de entrada.

* : EL ASTERISCO

Indica que esta directiva trata este componente como una plantilla y no lo dibujará como está. Por ejemplo, ngFor toma nuestro y lo estampa para cada artículo en artículos, pero nunca muestra nuestra inicial ya que es una plantilla:

<my-component *ngFor="#item of items">
</my-component>

Otras directivas similares que funcionan con plantillas en lugar de componentes renderizados son * ngIf y * ngSwitch.