null
US
Iniciar Sesión
Regístrate Gratis
Registro
Hemos detectado que no tienes habilitado Javascript en tu navegador. La naturaleza dinámica de nuestro sitio requiere que Javascript esté habilitado para un funcionamiento adecuado. Por favor lee nuestros
términos y condiciones
para más información.
Siguiente
Copiar y Editar
¡Debes iniciar sesión para completar esta acción!
Regístrate gratis
6049031
Angular 2 Template Syntax
Descripción
Angular 2 Template Syntax Mind Map
Sin etiquetas
angular 2
template syntax
angular 2
template syntax
Mapa Mental por
Nick Codes
, actualizado hace más de 1 año
Más
Menos
Creado por
Nick Codes
hace casi 8 años
75
4
0
Resumen del Recurso
Angular 2 Template Syntax
Expressions
Can be within {{ x + x }}
Can be within [property]="x + x"
Context
Only has access to items in the current context (not global scope)
Guidelines
No Visible Side Effects, Shouldn't Change Application State
Keep them as SIMPLE as possible
Most Template Expressions Get Run After Almost Every Event
Make Expressions "Idempotent"
Should always return the same thing until one of it's dependent values changes
Statements
Responds to user events raised by a binding target
Alters Application State
Context
Only Access to Current Context
Guidelines
Keep as Simple as Possible, simple method call or property assignment
Binding Syntax
One Way, Data Source -> View
{{expression}}, [input or property]
Two Way
[(property)]
One Way, View -> Data Source
(event)
REMINDER
Template binding works with properties and events, NOT attributes.
hero="Nick" & [hero]="Nick"
One gets rendered as a string while the other gets rendered as expression
Binding Targets
[ngClass]
[class.isSpecial]
[attr.attribute]
(event)
[src]
[style.color]
Custom Events
(lookedAt)="handleEvent($event)"
$event object handles the payload
Payload is given by EventEmitter.emit on Component Level
Built in Directives
*ngIf="expression"
*ngFor="let x of xes"
*ngFor="let object of objects; trackBy:expression"
expression(index: number, hero: Hero) {return hero.id}
Eliminates unnecessary DOM updates for unchanged Objects
* is Syntactic Sugar
Shows that it changes HTML
Pipes
{{name | pipe}}
Incredibly useful for formatting
Can take arguments
{{name | pipe:''long"}}
Safe Navigation Operator
Protect against null values when rendering components
{{game?.points?.name}}
Stops rendering the component if one or more values isnt found
Better than error
Recursos multimedia adjuntos
8174bb4e-5efc-4c57-8195-9c8b5d9267d3 (image/png)
Mostrar resumen completo
Ocultar resumen completo
¿Quieres crear tus propios
Mapas Mentales
gratis
con GoConqr?
Más información
.
Similar
Angular 2 Change Detection
Nick Codes
Fichas de Inglés - Vocabulario Intermedio
maya velasquez
Crisis Hipertensivas
jasiz
Cualidades de la Voz y Variedad Vocal "Expresión Oral"
jairosernabernal
Consejos para un Horario de Estudio para Selectividad
maya velasquez
HISTORIA de ESPAÑA
Ulises Yo
SISTEMA ENDOCRINO
fran alarcon
Planeación Estratégica
Luis Gonzalez
Diapositivas
Samuel Flores
Grupos funcionales (Bioquímica)
Nadim Bissar
Campos o áreas de la psicología
Melina Contreras
Explorar la Librería