Diferencias

Muestra las diferencias entre dos versiones de la página.

--- wiki2:angular:specifics [2016/07/13 11:02]
alfred [Templates]
+++ wiki2:angular:specifics [2020/05/09 09:25] (actual)
@@ Línea 15: / Línea 15: @@
 <p>The sum of 1 + 1 is not {{1 + 1 + getVal()}}</p>
 </code>
+En esta evaluación de expresiones podemos usar el new de JS, encadenar expresiones con '';'' pero no podemos acceder al ''window'', ''document'', ''console.log'' o ''Math.max'' (sólo permite los miembros del contexto).
+Cuando vemos algo tipo ''<nowiki>{{title}}</nowiki>'' nos referimos a la propiedad ''title'' del componente. Cuando vemos algo así ''[disabled]="isUnchanged"'' nos referimos a la propiedad ''isUnchanged'' del componente que se asigna a la propiedad ''disabled'' de la tag.
+Para enlazar los eventos usamos la siguiente sintaxis: ''(event)="statement"''
+<code>
+<button (click)="onSave()">Save</button>
+</code>
+Para enlazar una propiedad en two-way (es decir que cuando se cambie que también cambie el objeto Angular cuando cambie el valor en el HTML): ''[(target)] = "expression"''
+Cambiar propiedades:
+<code>
+<img [src] = "heroImageUrl">
+<hero-detail [hero]="currentHero"></hero-detail>
+<div [ngClass] = "{selected: isSelected}"></div>
+</code>
+Cambiar eventos:
+<code>
+<button (click) = "onSave()">Save</button>
+<hero-detail (deleteRequest)="deleteHero()"></hero-detail>
+<div (myClick)="clicked=$event">click me</div>
+</code>
+Cambiar evento y propiedad:
+<code>
+<input [(ngModel)]="heroName">
+</code>
+Cambiar un atributo:
+<code>
+<button [attr.aria-label]="help">help</button>
+</code>
+Cambiar la clase:
+<code>
+<div [class.special]="isSpecial">Special</div>
+</code>
+Cambiar el estilo:
+<code>
+<button [style.color] = "isSpecial ? 'red' : 'green'">
+</code>
+Para editar el target más común usamos ''ngClass'':
+<code>
+<div [ngClass]="classes">[ngClass] binding to the classes property</div>
+</code>
+//Technically, Angular is matching the name to a directive input, one of the property names listed in the directive’s inputs array or a property decorated with @Input(). Such inputs map to the directive’s own properties.//
+La propiedad ''hero'' de ''HeroDetail'' espera un objeto del tipo ''Hero'' (los brackets indican a Angular que evalue la expresión, sino sería tomado como un string):
+<code>
+<hero-detail [hero]="currentHero"></hero-detail>
+</code>
+Los siguientes pares hacen la misma acción:
+<code>
+<p><img src="{{heroImageUrl}}"> is the <i>interpolated</i> image.</p>
+<p><img [src]="heroImageUrl"> is the <i>property bound</i> image.</p>
+<p><span>"{{title}}" is the <i>interpolated</i> title.</span></p>
+<p>"<span [innerHTML]="title"></span>" is the <i>property bound</i> title.</p>
+</code>
+When developing data entry forms, we often want to both display a data property and update that property when the user makes changes.
+Cuando tratamos con datos introducidos por el usuario querremos que lo que se muestra y lo que se almacena coincida, esto lo permite el ''[(ngModel)]'':
+<code>
+<input [(ngModel)]="currentHero.firstName">
+</code>
+==== Clausulas ====
+Hay clausulas ( :!: precedidas por ''*'') que permiten el render de la vista en bucle o condicional:
+<code>
+<li *ngFor="let hero of heroes">
+  <span class="badge">{{hero.id}}</span> {{hero.name}}
+</li>
+</code>
+El * para ''ngFor'' indica que el elemento <li> (y sus hijos) son una template. ''ngFor'' itera sobre los heroes devueltos por AppComponent.heroers y los añade a la template. El código entre comillas indica "coger cada hero en el array de heores, guardarlo en la variable hero y permitir su acceso desde ese elemento". El keyword led indica que hero es una variable de entrada.
+=== ngFor ===
+<code>
+<div *ngFor="let hero of heroes">{{hero.fullName}}</div>
+<div *ngFor="let hero of heroes; let i=index">{{i + 1}} - {{hero.fullName}}</div>
+</code>
+=== ngForTrackBy ===
+=== ngIf ===
+=== ngSwitch ===

Programming

Herramientas de usuario

Herramientas del sitio

Diferencias

Herramientas de la página