Herramientas de usuario
wiki2:angular:specifics
Diferencias
Muestra las diferencias entre dos versiones de la página.
| Ambos lados, revisión anterior Revisión previa Próxima revisión | Revisión previa | ||
|
wiki2:angular:specifics [2016/07/13 11:34] alfred [Templates] |
wiki2:angular:specifics [2020/05/09 09:25] (actual) |
||
|---|---|---|---|
| Línea 20: | Línea 20: | ||
| Para enlazar los eventos usamos la siguiente sintaxis: ''(event)="statement"'' | 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"'' | 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"'' | ||
| Línea 67: | Línea 70: | ||
| <hero-detail [hero]="currentHero"></hero-detail> | <hero-detail [hero]="currentHero"></hero-detail> | ||
| </code> | </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 === | ||
| + | |||
wiki2/angular/specifics.1468409668.txt.gz · Última modificación: 2020/05/09 09:25 (editor externo)
Herramientas de la página
Excepto donde se indique lo contrario, el contenido de este wiki esta bajo la siguiente licencia: CC Attribution-Noncommercial-Share Alike 4.0 International
