Event Binding
… and subscribing with @Output
38
Event binding
Dynamic variable binding
• Event binding allows us to connect event handlers from within component templates
• This is done using round braces in the element of the component’s html file
• Syntax:(
• $event – the object with the triggered event info
39
Angular Events
• This enables the element to listen for the event and run the function once it is triggered
• We then pass in data from the template to the component logic
40
Component Outputs
@Output Decorator
• Outputs are functions that run as a result of a subcomponent finishing their execution
• In the subcomponent, we use the decorator @Output to emit (using EventEmitter) outputs back to the parent component
• Both Output and EventEmitter is found in the angular core scope package
• We can then emit the results back to the parent component to be processed
41
Directives
… and pipes
42
Directives
What are they?
• Angular directives are commands that extend the definition of HTML elements by providing new syntax
• There are predefined directives and custom-made directives • There are two types of directives
• structural directive is designed to alter the DOM layout by adding or removing DOM elements (i.e. ngIf)
• Attribute directive change the behavior of DOM elements and Angular components
43
Structural Directive
*ngIf
• ngIf is a structural directive and is applied directly to the DOM element
• Syntax:
The # declares a DOM element variable in Angular
• TherearenoelifclausesinAngularhowevernotethatthefollowing
are equivalent:
if (cond1):
st1
elif (cond2):
st2
else:
===
if (cond1):
st1
else:
if (cond2):
st2
else:
st3
st3
45
Structural Directive
*ngFor
• ngFor is an Angular structural directive loop statement to iterate through a collection of items
• Syntax: