1
00:00:03,940 --> 00:00:06,170
Hello, everyone, and welcome back.

2
00:00:06,370 --> 00:00:10,630
In this lesson, we are going to cover the directive exporter's functionality.

3
00:00:10,630 --> 00:00:15,760
So we have here a highlighted directive that is currently applied here to this element.

4
00:00:15,790 --> 00:00:22,750
The directive works transparently by modifying properties in the host element and detecting events.

5
00:00:22,750 --> 00:00:28,780
But there are some situations where we would like to access the directive directly, either here at

6
00:00:28,780 --> 00:00:34,480
the level of the template or at the level of the application component where the directive is getting

7
00:00:34,480 --> 00:00:38,950
applied in order to interact with the directive programmatically as well.

8
00:00:39,100 --> 00:00:45,070
This could happen, for example, if the directive provides a public epper, let's say that this directive

9
00:00:45,070 --> 00:00:48,520
would provide here an extra method called doggle.

10
00:00:48,520 --> 00:00:52,630
And this method is meant to be used by third party components.

11
00:00:52,870 --> 00:00:59,470
This method, what it would do, it would be to toggle the value here of the ease highlighted property.

12
00:00:59,560 --> 00:01:05,000
When we toggle this, we are also going to emit here a new toggle highlight event.

13
00:01:05,170 --> 00:01:11,830
These methods could potentially be called here by the application component template or by the application

14
00:01:11,830 --> 00:01:12,760
component class.

15
00:01:13,000 --> 00:01:19,180
But for that, we need somehow to get a reference to this directive and that is where the directive

16
00:01:19,180 --> 00:01:21,910
export as functionality comes in handy.

17
00:01:22,030 --> 00:01:28,900
We are going to make this directive available to the template by using here the export as property of

18
00:01:28,900 --> 00:01:30,520
the directive decorated.

19
00:01:30,550 --> 00:01:36,820
We are going to give the directive a template name that will allow us to grab a reference to this particular

20
00:01:36,820 --> 00:01:37,940
class instance.

21
00:01:37,960 --> 00:01:44,070
So we are going to export this using the Agil short notation with these in place.

22
00:01:44,110 --> 00:01:51,310
Now, if we want to grab here a hold of the directive, we can do so by creating here a template reference.

23
00:01:51,320 --> 00:01:56,770
Let's create here a template reference called highlighter, and we are going to assign it the value

24
00:01:56,770 --> 00:01:57,510
Agil.

25
00:01:57,520 --> 00:02:01,610
So this is the name that we have used to export this directive.

26
00:02:01,630 --> 00:02:08,500
Now we can use this template reference highlighter to call any public method available here on the highlighted

27
00:02:08,500 --> 00:02:09,160
directive.

28
00:02:09,190 --> 00:02:10,410
Let's try this out.

29
00:02:10,419 --> 00:02:15,790
Let's say that whenever we double click here on the description, we are going to toggle the highlight

30
00:02:15,790 --> 00:02:17,900
of the curve just as an example.

31
00:02:17,950 --> 00:02:22,330
So we are going to detect here the browser double click event.

32
00:02:22,330 --> 00:02:26,550
And whenever the double click occurs, we are going to toggle the highlight.

33
00:02:26,560 --> 00:02:32,090
We are going to use this template reference here and we are going to call the method toggle.

34
00:02:32,230 --> 00:02:34,000
Let's have a look at this in action.

35
00:02:34,000 --> 00:02:39,270
If we now enter here, the care, we are going to see that we are turning on the highlight.

36
00:02:39,280 --> 00:02:43,780
But if we double click here on the description, we are going to see that we are turning it off.

37
00:02:43,780 --> 00:02:50,920
If I double click again, we are turning it back on, etc. So as we can see, we can indeed grab a reference

38
00:02:50,920 --> 00:02:55,960
here to the directive and use it here in our application component template.

39
00:02:55,970 --> 00:03:02,620
If by some reason our application component class also needs a direct reference to the directive, we

40
00:03:02,620 --> 00:03:06,160
can also query here using The View decorator.

41
00:03:06,220 --> 00:03:11,950
So we are going to apply here Vuit shall we are going to say that we want a reference to the highlighted

42
00:03:11,950 --> 00:03:16,080
directive and with this we should have here the directive injected.

43
00:03:16,090 --> 00:03:17,380
Let's confirm these.

44
00:03:17,380 --> 00:03:23,980
Let's log to the council the value of the highlighted member variable in the end after viewing it.

45
00:03:23,980 --> 00:03:29,200
Mayford If we reload the application, we are going to see that here on the console.

46
00:03:29,200 --> 00:03:32,550
We get here a reference to the highlighted directive.

47
00:03:32,560 --> 00:03:39,190
So as we can see, this corresponds to an instance of this typescript class and we can even express

48
00:03:39,190 --> 00:03:42,210
this template query that we do in a different way.

49
00:03:42,250 --> 00:03:48,460
Let's say that instead of querying here the directive directly, which we did, we are going to query

50
00:03:48,460 --> 00:03:54,490
here the course card component and we are going to use here the configuration object that we can pass

51
00:03:54,490 --> 00:04:00,670
to view child to specify that we want to read from this element here the highlighted directive.

52
00:04:00,880 --> 00:04:07,810
This means that if by some reason a given element has multiple custom directives applied to it, then

53
00:04:07,810 --> 00:04:13,080
in that case we can carry them separately using these special Syntex.

54
00:04:13,090 --> 00:04:14,770
Let's have a look at this in action.

55
00:04:14,770 --> 00:04:17,860
So as we can see, this query is still working.

56
00:04:17,890 --> 00:04:23,530
We are grabbing here the highlighted directive that these are linked to the course card components and

57
00:04:23,530 --> 00:04:26,970
we d we have covered of angular attribute directives.

58
00:04:26,980 --> 00:04:31,840
Let's not talk about a different type of directive, structural directives.

59
00:04:31,840 --> 00:04:37,210
We have already been using directives of this type using the start syntax.

60
00:04:37,420 --> 00:04:45,730
Examples of this type of directives are NGF and Engie for let's now learn how to build our own custom

61
00:04:45,730 --> 00:04:47,110
structural directive.