null
US
Sign In
Sign Up for Free
Sign Up
We have detected that Javascript is not enabled in your browser. The dynamic nature of our site means that Javascript must be enabled to function properly. Please read our
terms and conditions
for more information.
Next up
Copy and Edit
You need to log in to complete this action!
Register for Free
6049031
Angular 2 Template Syntax
Description
Angular 2 Template Syntax Mind Map
No tags specified
angular 2
template syntax
angular 2
template syntax
Mind Map by
Nick Codes
, updated more than 1 year ago
More
Less
Created by
Nick Codes
about 8 years ago
75
4
0
Resource summary
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
Media attachments
8174bb4e-5efc-4c57-8195-9c8b5d9267d3 (image/png)
Show full summary
Hide full summary
Want to create your own
Mind Maps
for
free
with GoConqr?
Learn more
.
Similar
Angular 2 Change Detection
Nick Codes
Segunda Guerra Mundial 1939-1945
miminoma
Rounding to decimal places
Ellen Billingham
CITAÇÕES DE GRANDES FILÓSOFOS
miminoma
French Grammar- Irregular Verbs
thornamelia
How does Shakespeare present villainy in Macbeth?
maxine.canvin
Peace and Conflict Flashcards - Edexcel GCSE Religious Studies Unit 8
nicolalennon12
GCSE Biology B2 (OCR)
Usman Rauf
Repaso de Revalida Enfermeria 2015
Francisco Rivera
SFDC App Builder 1 (176-200ish)
Connie Woolard
Část 2.
Gábi Krsková
Browse Library