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
                                                                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