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
OCR AS Biology - Lipids
Chris Osmundse
Biology Unit 1
hannahsanderson1
Transforming Graphs
james_hobson
Language techniques: Macbeth
arnya_lewis
Chemistry C2
greenchloe1998
Contract Law
sherhui94
Carbohydrates
kevinlinkovoor
Grammar Rules
Sandra Yeadon
Tips for Succeeding on the Day of the Exam
Jonathan Moore
Relationships in A Streetcar Named Desire
Emily Garvin-Howard
Browse Library