1
00:00:00,120 --> 00:00:05,370
In this lecture, we are going to dynamically render content with the NGF directive.

2
00:00:05,730 --> 00:00:08,670
This directive is considered a structural directive.

3
00:00:08,970 --> 00:00:13,230
A structural directive can add or remove elements from the document.

4
00:00:13,560 --> 00:00:19,770
This is completely different from attribute directives, attribute directors or modify and attributes

5
00:00:19,770 --> 00:00:21,420
appearance through attributes.

6
00:00:21,750 --> 00:00:28,110
Whereas structural directives are more powerful, they can manipulate elements by adding or removing

7
00:00:28,110 --> 00:00:28,410
them.

8
00:00:29,040 --> 00:00:32,790
The NGF Directive works similarly to an if statement.

9
00:00:32,790 --> 00:00:36,870
In JavaScript, it'll execute code if a condition is true.

10
00:00:37,200 --> 00:00:41,490
In this case, we will display a piece of the template based on a condition.

11
00:00:41,760 --> 00:00:45,900
Therefore, the NGF Directive is a structural directive.

12
00:00:46,170 --> 00:00:49,140
We will continue working on the app template file.

13
00:00:51,730 --> 00:00:56,020
Structural directives must be applied to any template elements.

14
00:00:56,320 --> 00:00:59,500
Let's sand the NGF directive to the element.

15
00:01:02,070 --> 00:01:08,130
Just like attribute directives, structural directives should be wrapped with square brackets for property

16
00:01:08,130 --> 00:01:08,670
binding.

17
00:01:08,970 --> 00:01:12,720
Otherwise, we won't be able to use an expression as a value.

18
00:01:12,990 --> 00:01:16,770
So let's bind this directive to the blue class property.

19
00:01:19,390 --> 00:01:25,510
As a reminder, this property will hold a Boolean value for determining if a class should be added to

20
00:01:25,510 --> 00:01:25,990
a button.

21
00:01:26,440 --> 00:01:30,520
We are going to be using the same condition if the button is blue.

22
00:01:30,610 --> 00:01:31,780
The message should appear.

23
00:01:32,050 --> 00:01:34,120
Let's check out the app in the browser.

24
00:01:36,700 --> 00:01:43,150
If we pressed the button, the message appears in the developer tools, we can clearly see the elements,

25
00:01:43,480 --> 00:01:47,110
the energy template element is not present in the document.

26
00:01:47,500 --> 00:01:51,940
Angular will take care of removing the energy template element for us.

27
00:01:52,270 --> 00:01:58,480
Thus, we don't have to worry about ruining the integrity of our document, which could lead to excess

28
00:01:58,480 --> 00:01:59,080
errors.

29
00:01:59,380 --> 00:02:02,560
We can continue to act as if it was never there.

30
00:02:03,130 --> 00:02:06,550
However, it can be distracting to write in our templates.

31
00:02:06,760 --> 00:02:13,180
We have to constantly write the nji templates element whenever we want to use a structural directive.

32
00:02:13,510 --> 00:02:17,530
Luckily, we can avoid it altogether with shorthand syntax.

33
00:02:17,830 --> 00:02:19,330
Switch back to the editor.

34
00:02:21,910 --> 00:02:28,480
We're going to move the NGF directive from the energy templates element to the paragraph element.

35
00:02:31,000 --> 00:02:34,450
Next, we will remove the nji template element.

36
00:02:36,900 --> 00:02:43,200
Lastly, we will replace these square brackets with an asterisk character before the director of name.

37
00:02:45,740 --> 00:02:48,950
This character can be added to structural directives.

38
00:02:49,220 --> 00:02:56,810
It doesn't just apply to the NGF directive by adding this character, Angular will perform two actions.

39
00:02:57,080 --> 00:03:01,190
First, it'll wrap the element with the energy template element.

40
00:03:01,550 --> 00:03:05,180
Secondly, the value will be interpreted as an expression.

41
00:03:05,480 --> 00:03:08,690
We don't have to wrap the directive with square brackets.

42
00:03:09,050 --> 00:03:13,520
This syntax is a shorthand way of writing structural directives.

43
00:03:13,850 --> 00:03:19,460
It also makes it easy to identify structural directives for the rest of this course.

44
00:03:19,610 --> 00:03:24,380
We will use this shorthand syntax whenever writing structural directives.

45
00:03:24,710 --> 00:03:30,410
In the resource section of this lecture, I provide a link to a page of shorthand examples.

46
00:03:33,000 --> 00:03:39,720
Angular provides examples of how structural directives are transformed into the energy template element

47
00:03:39,720 --> 00:03:41,730
with this shorthand syntax.

48
00:03:42,120 --> 00:03:45,710
Some of the examples contain directives we haven't learned about yet.

49
00:03:46,050 --> 00:03:50,190
In the next lecture, we will explore another structural directive.