Corchetes y caracteres especiales usados en AngularJS 2 con TypeScript

Ahora estoy aprendiendo AngularJS2 después de AngularJS1. Estoy usando la variante de TypeScript. He encontrado que se usan algunos corchetes y caracteres especiales para los atributos de Angular. ¿Alguien puede ayudarme a entender en profundidad cuál se utiliza por qué razón con un ejemplo adecuado? También, por favor, agreguen cualquier otro carácter especial relacionado con esta pregunta (si me he perdido alguno).

[(ngModel)]

(click)

*ngIf

ngRepeat="#hero in heros"

Etc.

Respuesta #1

[(ngModel)] :

Normalmente usamos esta sintaxis para BINDING BIDIRECCIONAL en Angular2. Es decir, ya sea que hagamos cambios desde la plantilla o desde el controlador, Angular refleja los cambios. Normalmente usamos esta sintaxis si tenemos que hacer cambios en ambos lados, tanto en la plantilla como en el controlador.

(clic):

esto es la vinculación de eventos en Angular2. hay muchas vinculaciones de eventos en Angular2.

*ngIf :

Esta sintaxis es justo como display: none/block en el CSS. Pero es diferente del selector display de CSS, ya que según Angular2, *ngIf no permite renderizar la porción de código que es falsa, es decir, si *ngIf='false' está en cualquier div o cualquier parte del HTML, Angular no permite renderizar esa porción. Mientras que en CSS esa porción ocupa un espacio.

ngRepeat="#hero en heros"

esta es la sintaxis de Angular 1.x pero en Angular 2 ngRepeat se reemplaza con *ngFor. Normalmente usamos *ngFor para iterar sobre un arreglo y obtener todos los elementos del arreglo de la lista para evitar código extra. Aquí *ngFor en Angular 2 se combina con dos variables como aquí...

*ngFor= '#hero of Heros'

Aquí #hero es una variable local y Heros es el nombre del array sobre el cual iteramos un bucle.

Respuesta #2

Además de la respuesta de @PardeepJain.

<my-comp [(someName)]="someExpression">

es la forma corta de

<my-comp [someName]="someExpression" (someNameChange)="someExpression=$event">

donde en MyComp tiene que haber un input y un output como

@Component({
  selector: 'my-comp',
  inputs: ['someName'],
  outputs: ['someNameChange']})
class MyComp {
  someName:SomeType;
  someNameChange:EventEmitter = new EventEmitter();
}

o alternativamente como

@Component({
  selector: 'my-comp'
})
class MyComp {
  @Input() someName:SomeType;
  @Output() someNameChange:EventEmitter = new EventEmitter();
}

• Entrada: ver https://angular.io/docs/ts/latest/api/core/Input-var.html
• Salida: ver https://angular.io/docs/ts/latest/api/core/Output-var.html

Esto funciona igual para las directivas.