Angular

Custom Directives – filter Pipe

1
Directives Recap

= possibility to extend HTML with new attributes

Attribute Directive Structural Directive

Looks like ordinary html attribute

Has a leading *
(possibly with property binding or
(for desugaring)
event binding))

Does not change the DOM, only the Changes DOM directly by adding or
element to which it is added removing elements

E.g.: ngClass, ngStyle E.g.: *ngFor, *ngIf

2
Assignment recap directives

1. Create a component named “clicks”

2. In clicks, create a button labeled: “show clicks”
3. Create also a division with the title: “list of clicks”
4. Using the button from step 2 you should now be able to remove/add the div from step 3 to the
DOM. (toggle function) Provide an input on the component clicks to hide the list initially.
5. Log all clicks on the button from step 2 by putting a timestamp and the sequential number of the
click into an array of JS objects (tip: push)
6. To do this, use a self-created class ClickObject containing a serialNumber and a timeStamp (Date).
7. Display the array as a list of log items (ul) using a pipe format the timestamp as "m/d/yy, hh:mm".
8. All even log entries should have a blue background (via ngStyle) and white text colour (via ngClass)
9. When the button is pressed 10 times, the app component sends out an alert and everything is
reset.

3
Custom Directives
ng g d
• Create:
[NameDirective]

• directive has no view (no HTML template)

=> only 1 file [NameDirective].directive.ts
=> less life cycle hooks (e.g. no AfterViewInit)

• Add to ‘imports’ in component(s) that uses the directive

• Usage:
in an html template
<p appNameDirective>blah,
put the selector blah,
in the html element you want to use it on.
blah</p>

4
Custom Directives (example)
app.component.html highlight.directive.ts
(can also be used in other HTML templates)

app.component.ts

Html rendering:
5
Dependency Injection (recap)

• Directive needs access to html element on which it is placed =>

argument of type ElementRef in constructor => element is injected in
directive
• Putting private in front of the variable name makes it a member
variable. This is useful! Compare the following code:

This is a property of TypeScript:

6 https://www.typescriptlang.org/docs/handbook/classes.html
Problem with last example

• Addressing element properties directly is not

recommended!

• Angular does not always have to run in the browser and

then these properties are not available!
(example service workers, testing)

=> Use renderer for DOM manipulations!!

7
Custom Directives (example with renderer)
highlight2.directive.ts Check the angular
documentation for all
available functions:
https://angular.io/api/core/Renderer2

app.component.html
Html rendering:

8
Style element dynamically (HostListener)
markeer3.directive.ts
highlight3.directive.ts In this example the
HostListener is used to
listen for events
(mouseenter, mouseleave)
on the host element. This is
the element the directive is
placed on

Html rendering:

app.component.html

9
 HostBinding instead of renderer
markeer3.directive.ts
highlight4.directive.ts Via host binding, you connect
the property of the host
element (between the
brackets) to the directive
property (here
myBackGroundColor)
You can bind with all
properties of the host element

Html rendering:

app.component.html

10
 Directives with @Input
@Input can be used to pass values to the directive.
Note: input value is not know in constructor, you
highlight5.directive.ts need the onInit lifecycle hook for that one!

Note: property binding with a constant string can be

written without [] and ' ‘ (see example)

app.component.html

Html rendering:

11
 Directives with @Input and alias
If @Input is given an alias which is the same as the
highlight6.directive.ts
name of the directive, it can also be done in the
following way.
This is exactly the same as what we do with ngStyle
and ngClass

app.component.html

Html rendering:

12
Assignment 2

• Create a directive that counts how many times an

element has been clicked on
• Of course, the directive must be placed on the element
• The name of the directive is 'click-count'.
• At each click, the value of the counter must be logged to
the console
• Provide the possibility to set the value of the counter via
property binding on the selector name

13
Structural Directives

• Structural Directive: add/remove element from DOM.

• * in front of directive needed for desugaring (=
conversion to "more difficult syntax")

<p *ngIf="condition"> <ng-template

The condition is true! [ngIf]="condition">
</p> <p>
The condition is
true!
</p>
</ng-template>

14
 Create a custom Structural Directive
my-else.directive.ts

Property must have same name as selector (see example 6)

Setter required to execute function at each change of input,
but it is still a property!

app.component.html

15
Create a custom Structural Directive

16
Assignment 3

• Copy one of the counters from the previous exercise and

show it in a new paragraph (hint: service)
• Add a button to show/hide that paragraph
• Add a custom structural directive to that paragraph to
make sure this paragraph is shown only after 1000ms
• Call that directive rendering-delay

! You cannot put two structural directives on 1 HTML

element.

17
Filter pipe
typeScript => list of applications that are shown in HTML template with *ngFor loop

18
Filter pipe Bind value in input field to propertyfilteredStatus
via 2-way binding

on each app in the list, apply filter pipe

with 2 arguments :
- the content of the text field via the

property filteredStatus
- the property to filter (here status)

19
Filter pipe
True (default): filtered output is updated only when extra filterinput changes
=> changes in HTML (in this case add an app) not visible as long
as filterString does not change
false: filtered output updates at every change (also without changing filterString)
=> more resource intensive but sometimes necessary!

Array
Arraytotowhich
whichyouyouapply
applythis
thisfilter
filterisisempty
emptyor
or
filterString
filterStringisisempty
empty=>
=>leave
leavearray
arrayas asisis

Create
Createnew
newarray
arraywith
withfiltered
filteredresult
result

20
Assignment 4

1. Take back the app from assignment 1

2. Remove the show/hide function so that the list of clicks is always visible and remove the
conditional formatting
3. Order the clicks by time from last to first via a pipe
- create a pipe 'sort' with as parameters the property you want to sort on and the direction
(up or down)
- use this pipe to sort by timeStamp in reverse order

Hint: Use the javaScript sort function

it sorts an array and returns a sorted array as a result
to sort correctly, use a function in the sort method
(https://flaviocopes.com/how-to-sort-array-of-objects-by-property-javascript/)

21