6049031
Description
Mind Map by Nick Codes, updated more than 1 year ago
|
Created by Nick Codes
over 9 years ago
|
|
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)
- 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
- 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
- Should always return the same thing until one of it's dependent values changes
- No Visible Side Effects, Shouldn't Change Application State
- Can be within {{ x + x }}
- Statements
- Responds to user events raised by a binding target
- Alters Application State
- Context
- Only Access to Current Context
- Only Access to Current Context
- Guidelines
- Keep as Simple as Possible, simple method call or property assignment
- Keep as Simple as Possible, simple method call or property assignment
- Responds to user events raised by a binding target
- Binding Syntax
- One Way, Data Source -> View
- {{expression}}, [input or property]
- {{expression}}, [input or property]
- Two Way
- [(property)]
- [(property)]
- One Way, View -> Data Source
- (event)
- (event)
- One Way, Data Source -> View
- 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
- One gets rendered as a string while the other gets rendered as expression
- Template binding works with properties and events, NOT attributes.
- Binding Targets
- [ngClass]
- [class.isSpecial]
- [attr.attribute]
- (event)
- [src]
- [style.color]
- [ngClass]
- Custom Events
- (lookedAt)="handleEvent($event)"
- $event object handles the payload
- Payload is given by EventEmitter.emit on Component Level
- Payload is given by EventEmitter.emit on Component Level
- $event object handles the payload
- (lookedAt)="handleEvent($event)"
- 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
- expression(index: number, hero: Hero) {return hero.id}
- * is Syntactic Sugar
- Shows that it changes HTML
- Shows that it changes HTML
- *ngIf="expression"
- Pipes
- {{name | pipe}}
- Incredibly useful for formatting
- Can take arguments
- {{name | pipe:''long"}}
- {{name | pipe:''long"}}
- {{name | pipe}}
- 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
- Better than error
- Stops rendering the component if one or more values isnt found
- {{game?.points?.name}}
- Protect against null values when rendering components
Media attachments
Want to create your own Mind Maps for free with GoConqr? Learn more.