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:
expressions
• Only executes the template expressions if the condition evaluates to truthy
44
Structural Directive
*ngIf
• It can used in conjunction with else statement
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:
expressions
46
Attribute Directive
ngClass – built in Angular directive
• Attribute directives are designed to change the appearance or behavior of the DOM elements that they are attached to.
• Attribute directives are not designed create or remove DOM elements like structural directives.
• Angular’sngClassdirectiveallowsyoutosetelementclassesbasedon conditions
• Syntax: [ngClass]=”{
where condition1, condition2, … are JavaScript expressions
47
Custom Directives
Generating Custom Directives
• A custom directive changes (or replaces) an attribute associated with its element
• Typical usages allow us to change an element based on DOM events. For example, we can wire up DOM events to directive actions.
• We create custom directive by invoking
ng generate directive
• Thiscreatesthedirectivefiles(includinga@Directivedecorator)and updates the app_module declarations
48
Custom Directives
Events
• In the directive’s definition file, we will require two things to deal with events: a host binding and a host listener
• A host is the element that this directive is attached to
• The @HostListener decorator takes in the name of the event as a string for the first argument and an optional second argument that is an array of arguments that the targeted event will emit. It implemented a function that is invoked when the associating event is triggered
• The @HostBinding decorator takes in a property from the host elements and updates it accordingly
49
Pipes
• A pipe is a transformation of data
• D1->pipe->D2
• i.e. a search, or a filter
• Phonebookàpipe (search string)àsubset of Phonebook
• This is known as a transformation
• Transformations can be chained and uses the | notation to invoke a pipe
• There are two types:
• Built-in: https://angular.io/api?type=pipe • Custom: Generated with CLI
50
Angular Pipe
Built-in
• Angular has pipes that have already been implemented for us
• Some built-in pipes in Angular include date, slice, lowercase and
uppercase
• Pipes can also support parameters such as date formatting.
• Parameters are set to the right of the pipe name separated by colons.
• Pipes can also be chained.
51
Angular Pipes
Custom Pipes
• To create a custom pipe (to use in our HTML templates), run ng generate pipe
• importsPipeandPipeTranformfrom@angular/corepackage
• containsa@Pipedecoratedexportedclassthatimplements PipeTransform with a transform method, and the name of the pipe
• Registers the pipe with app.module.ts file
52
User Input
Forms in Angular
53
Angular Forms
Reactive Forms Module
• Angular Form Module comes with the ability
• to track data going in and output of a form
• Raise events when changes are made
• Validate data using built-in or custom validators
• The required ReactiveForms Module is in the @angular/forms package • Must be imported in app.module.ts file
54
Angular Forms
Reactive Forms Module
• Next, in the component containing the form:
• ImportFormGroupandFormControlfrom@angular/forms • Create the form with associating controls
55
Angular Forms
Reactive Forms Module
• Now, in the HTML template
• usetheformControlNameattributetoassociatetheinputnamesto
the form controls created earlier
• Intercept submitted values from the form element submission action using the ngSubmit event
56
2-way data binding
• Two-way binding refers to the sharing on data between two sources in Angular.
• This requires the Forms Module is in the @angular/forms package which must again be imported in app.module.ts file
• As an example, a variable declared in the component can be linked to a textbox element by using the special binding notation:
[(ngModel)]=”
• In the HTML template:
57