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
SSAT Verbal Questions (Analogies)
philip.ellis
An Inspector Calls - Themes
mhancoc3
ACT Quiz
Brad Hegarty
Themes in Lord of the Flies
lowri_luxton
B5 - Growth and Deveolopment
blairzy123
AQA - English Language Unit 1
Alice Love
Teaching students to be digitally literate
Micheal Heffernan
Periodic table - full deck of element symbols
Derek Cumberbatch
Flame tests
Joshua Rees
CCNA Security 210-260 IINS - Exam 1
Mike M
Browse Library