Angular 2 Template Syntax

Description

Angular 2 Template Syntax Mind Map
Nick Codes
Mind Map by Nick Codes, updated more than 1 year ago
Nick Codes
Created by Nick Codes about 8 years ago
75
4

Resource summary

Angular 2 Template Syntax
  1. Expressions
    1. Can be within {{ x + x }}
      1. Can be within [property]="x + x"
        1. Context
          1. Only has access to items in the current context (not global scope)
          2. Guidelines
            1. No Visible Side Effects, Shouldn't Change Application State
              1. Keep them as SIMPLE as possible
                1. Most Template Expressions Get Run After Almost Every Event
                2. Make Expressions "Idempotent"
                  1. Should always return the same thing until one of it's dependent values changes
              2. Statements
                1. Responds to user events raised by a binding target
                  1. Alters Application State
                    1. Context
                      1. Only Access to Current Context
                      2. Guidelines
                        1. Keep as Simple as Possible, simple method call or property assignment
                      3. Binding Syntax
                        1. One Way, Data Source -> View
                          1. {{expression}}, [input or property]
                          2. Two Way
                            1. [(property)]
                            2. One Way, View -> Data Source
                              1. (event)
                            3. REMINDER
                              1. Template binding works with properties and events, NOT attributes.
                                1. hero="Nick" & [hero]="Nick"
                                  1. One gets rendered as a string while the other gets rendered as expression
                                2. Binding Targets
                                  1. [ngClass]
                                    1. [class.isSpecial]
                                      1. [attr.attribute]
                                        1. (event)
                                          1. [src]
                                            1. [style.color]
                                            2. Custom Events
                                              1. (lookedAt)="handleEvent($event)"
                                                1. $event object handles the payload
                                                  1. Payload is given by EventEmitter.emit on Component Level
                                              2. Built in Directives
                                                1. *ngIf="expression"
                                                  1. *ngFor="let x of xes"
                                                    1. *ngFor="let object of objects; trackBy:expression"
                                                      1. expression(index: number, hero: Hero) {return hero.id}
                                                        1. Eliminates unnecessary DOM updates for unchanged Objects
                                                        2. * is Syntactic Sugar
                                                          1. Shows that it changes HTML
                                                        3. Pipes
                                                          1. {{name | pipe}}
                                                            1. Incredibly useful for formatting
                                                              1. Can take arguments
                                                                1. {{name | pipe:''long"}}
                                                              2. Safe Navigation Operator
                                                                1. Protect against null values when rendering components
                                                                  1. {{game?.points?.name}}
                                                                    1. Stops rendering the component if one or more values isnt found
                                                                      1. Better than error
                                                                Show full summary Hide full summary

                                                                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