Interpolation

double curly braces: {{}}

                     
                         
{{title}}
                         
nested: {{customer.name}}
                         
function call: {{20 + add(2, 5)}}
                         {{customer.name}}

                         customer = {
                            id: "abc",
                            name: "Hans Muster",
                         };

                         add(a: number, b: number) {
                            return a + b;
                         }
                     
                 

Interpolation in Detail

• uses the components properties or methods
• interpolation is being replaced by the actual value
• as the call of the add function shows: there is a Template Expression between the parentheses
• the expression is evaluated first, converted to a string and concatenated with other strings. Last, the value is assigned to the element.

Task 6.1 - Interpolation

• Create an address as an object literal. Use the fields street, town, zip code
• show the fields in a list
• write a function that outputs the whole address as a string
• Hint: unordered lists look like this

                     
                         

                             
List Item 1
                         
                     
                 

Task 6.1 - Possible Solution

                     
                        address = {
                          street: 'Example Street',
                          zipCode: '3000',
                          city: 'Bern'
                        }

                        renderAddress() {
                            return `${this.address.street},
                                ${this.address.zipCode} ${this.address.city}`
                         }

                         

                             
{{address.street}}
                            ...
                         
                        
{{renderAddress()}}
                     
                 

Template Expressions

• between the interpolation parentheses, there is a so called expression {{1 + 1}}
• a reduced set of JavaScript
• no assignments allowed (=, +=, *=, ...)
• no new
• no side effects, as ++ (idempotency, pure Functions)

Template Statements

• execution of side effects
• react to events (user actions)

                     
                         
                             Delete Customer
                         
                     
                 

Bindings

Overview (1)

                                 
                                     {{expression}}
                                     [property] = "expression"
                                 
                             

Overview (2)

                                 
                                     (event) = "statement()"
                                 
                             

                                 
                                     [(property)] = "expression"
                                 
                             

Property Binding - [property]

Examples

                     
                         Click me
                     
                    
                         Disabled: {{bool}}
                     
                    
                         
                     
                 

Task 6.2 - Property Binding

• Add an input element
• Bind the value of the street to the value-property of the input field
• Use a bal-input element

Task 6.2 - Possible Solution

... or use the canonical form with the bind-prefix

I prefer the first (shorter) option and i will exclusively use this one.

HTML and DOM

• DOM is not really a model it is more or less an API to access HTML
• HTML knows attributes (e.g. value)
• DOM knows properties (e.g. value)
• HTML value is the inital value
• DOM value is the current value

Attributes vs. Properties

• HTML Attribute initialize DOM Properties
• DOM Properties can change, attributes can not
• bindings in Angular only work with DOM properties and events, NOT with HTML attributes

Event binding - (event)

Examples

                     
                         New Person
                     
                    
                         
                     
                    
                         <people (deletePerson)="delete($event)">
                     
                 

Task 6.3 - Event Binding

• Add a Button
• You can use the bal-button
• Once clicked, call a method that prints sth. on the javascript console

Task 6.3 - Possible Solution

                     
                         click me!
                     
                     
                         logHello() {
                            console.log("Hello");
                         }
                     
                

... or the canonical option with the on-prefix

                     
                         Click
                     
                 

$event

hand over values with events

                     
                         
                         print(value) {
                            console.log(value);
                         }
                     
                

... or read the value in the method

                      
                         
                         printEvent(event) {
                            console.log(event.target.value);
                         }
                     
                 

access to values

• Events have a type, e.g. KeyboardEvent, MouseEvent, FocusEvent, InputEvent... or also custom events
• The target property is a reference to the element that triggered the event
• the value can be accessed with .value
• Access to custom events (Design System) $event.detail

Task 6.4 - Event with a value

• Add an Input element.
• Print any new value on the console that starts with the letter 's'.

Task 6.4 - Possible Solution

                     
                         
                     
                     
                       printSValues(val: number | string | null) {
                         if(typeof val === "string" && val.toLowerCase().startsWith("s")) {
                           console.log(val);
                         }
                       }
                     
                 

Task 6.5 - Two-way data binding

• Create a self-created two-way data binding for an Input field.
• Create an input field with a binding for a string, e.g. "name".
• Create a text block (<p>-Tag) containing the value from the input field.
• Use a Property binding, an Event binding and a variable in the component.

Task 6.5 - Possible Solutions

                     
                         
                         
{{name}}
                     
                     
                         name = "Hans";
                     
                

Or with a function in the component:

                     
                         
                         
{{name}}
                     
                     
                         name: String | undefined = "Hans";
                     
                 

Template Reference Variable - #variable

Syntax in HTML - with #name

                     
                         <input #note>
                         Print value
                     
                     
                         print(value) {console.log(value);}
                     
                

# - behind the scenes

• A reference to a DOM element, or a component
• Available throughout the whole template
• A reference to an input element returns the actual element, such as $event.target
• Alternative syntax: ref-note instead of #note

Task 6.6 - Template Ref Variable

• Create a button and a checkbox.
• the checkbox should disable / enable the button
• Use a Template Reference Variable
• You can use the bal-checkbox
• Hint: a Button has a disabled Property
• Hint: The bal-checkbox has a (balChange) Event

Task 6.6 - Possible Solution

                     
                        
                        Button