1
00:00:00,120 --> 00:00:05,850
In this lecture, we are going to explore one more directive called the Energy for Directive.

2
00:00:06,120 --> 00:00:09,300
It's a directive for looping through an element with an array.

3
00:00:09,600 --> 00:00:12,000
It's common to perform this type of action.

4
00:00:12,300 --> 00:00:19,140
If you think about it, a majority of apps are made up of lists, a list of users posts, products,

5
00:00:19,260 --> 00:00:21,090
menu items, et cetera.

6
00:00:21,420 --> 00:00:25,380
Everything we do revolves around lists as it stands.

7
00:00:25,530 --> 00:00:27,750
If we want to output multiple posts.

8
00:00:27,900 --> 00:00:30,840
We need to copy and paste the post component.

9
00:00:31,260 --> 00:00:37,590
The problem compounds if we need to make adjustments to a specific post, it would be nice if the template

10
00:00:37,590 --> 00:00:41,700
could output be current number of posts without updating it as often.

11
00:00:42,090 --> 00:00:46,620
We can cleanly loop through an array by using the energy for directive.

12
00:00:47,010 --> 00:00:50,220
This directive will loop through the array in the templates.

13
00:00:50,610 --> 00:00:57,690
The element it is applying to will get output ID on each iteration before we get into this directive.

14
00:00:57,840 --> 00:01:02,010
What type of directive do you think the Nji four directive is?

15
00:01:02,250 --> 00:01:04,860
Is it an attribute or structural directive?

16
00:01:05,129 --> 00:01:07,170
I'll give you a moment to think about it.

17
00:01:09,740 --> 00:01:13,520
If your guest was a structural directive, you'd be correct.

18
00:01:13,850 --> 00:01:20,720
We're modifying the documents elements, not its attributes, directives adding or removing elements

19
00:01:20,720 --> 00:01:23,060
are considered structural directives.

20
00:01:23,630 --> 00:01:28,280
For this demonstration, let's try looping through an array of images.

21
00:01:28,610 --> 00:01:32,150
We're going to reuse our post component first.

22
00:01:32,270 --> 00:01:33,680
Let's create an array.

23
00:01:34,070 --> 00:01:36,560
Open the app component class file.

24
00:01:39,230 --> 00:01:41,550
Below the image URL property.

25
00:01:41,570 --> 00:01:44,330
We will create an array called images.

26
00:01:46,780 --> 00:01:53,620
To keep it simple, the array will store the same set of images, we will reuse the image we're storing

27
00:01:53,620 --> 00:01:55,540
in the image you are real property.

28
00:01:55,840 --> 00:01:57,760
About three copies should do it.

29
00:02:00,220 --> 00:02:03,160
Next, let's open the app template file.

30
00:02:05,630 --> 00:02:11,960
On the post component, we're going to add the energy for DirecTV with the asterisk character.

31
00:02:14,490 --> 00:02:20,280
As a reminder, we should always add the asterisk character before the name of the directive.

32
00:02:20,670 --> 00:02:24,810
It's a shortcut for wrapping the element with the kng template element.

33
00:02:25,050 --> 00:02:26,070
It's much cleaner.

34
00:02:26,850 --> 00:02:33,420
Moving on the value of this directive is vastly different from other directives throughout this section.

35
00:02:33,570 --> 00:02:36,960
We've been binding directives to properties or objects.

36
00:02:37,320 --> 00:02:43,560
Unlike other directives, the new Ford Directive has a special set of syntax rules.

37
00:02:43,920 --> 00:02:45,180
Let's write it first.

38
00:02:45,480 --> 00:02:50,380
Then we will review the syntax inside the value of this directive.

39
00:02:50,400 --> 00:02:51,750
We will add the following.

40
00:02:52,050 --> 00:02:54,270
Let image of images.

41
00:02:56,760 --> 00:03:04,290
This syntax can be broken into two pieces in the very beginning we've written let image, the let keyword

42
00:03:04,290 --> 00:03:07,230
is similar to the let keyword in JavaScript.

43
00:03:07,500 --> 00:03:09,750
It allows us to create a variable.

44
00:03:09,990 --> 00:03:13,770
In this example, we are creating a variable called image.

45
00:03:14,370 --> 00:03:16,770
Next, we need to provide an array.

46
00:03:17,070 --> 00:03:20,530
We can specify the array by adding the of keyword.

47
00:03:20,840 --> 00:03:24,960
Afterward, we can reference the array on each iteration.

48
00:03:25,230 --> 00:03:29,940
Angular will assign the current element in the iteration to the image variable.

49
00:03:30,240 --> 00:03:35,550
In this example, the image variable will hold the current post in the iteration.

50
00:03:36,060 --> 00:03:39,330
We should update our component to accept the new data.

51
00:03:39,570 --> 00:03:42,360
Currently, the component will throw an error.

52
00:03:42,720 --> 00:03:48,360
Instead of passing in the image URL property, we can pass in the image variable.

53
00:03:51,010 --> 00:03:53,860
The image variable is accessible in our loop.

54
00:03:54,160 --> 00:03:56,440
This includes the component itself.

55
00:03:56,800 --> 00:04:01,270
Therefore, we can pass on the image variable to the component.

56
00:04:01,630 --> 00:04:05,200
It's much more efficient to use the energy for directive.

57
00:04:05,530 --> 00:04:09,130
We don't have to copy and paste the directive multiple times.

58
00:04:09,490 --> 00:04:12,880
Angular will always output the correct number of posts.

59
00:04:13,150 --> 00:04:13,870
No more.

60
00:04:13,900 --> 00:04:14,680
No less.

61
00:04:15,160 --> 00:04:20,019
Before you verify or far loop is working, we should verify the image is unique.

62
00:04:20,350 --> 00:04:23,560
At the moment, we all see the same image and caption.

63
00:04:23,980 --> 00:04:30,910
Fortunately, we can access the index of the current loop iteration inside the Kng for DirecTV.

64
00:04:30,940 --> 00:04:34,900
We will add the following Let I equals index.

65
00:04:37,380 --> 00:04:40,080
We're creating another variable called AI.

66
00:04:40,410 --> 00:04:47,580
It's being assigned to the index property from the energy for directive by storing the index in a variable.

67
00:04:47,730 --> 00:04:50,790
We will be able to reference it inside our template.

68
00:04:51,150 --> 00:04:54,780
Let's try outputting the index inside the caption.

69
00:04:54,930 --> 00:04:57,630
We will add an expression for the AI variable.

70
00:05:00,270 --> 00:05:02,490
Let's test our app in the browser.

71
00:05:04,930 --> 00:05:10,060
As desired, the image has been rendered three times on each iteration.

72
00:05:10,270 --> 00:05:16,780
The caption will contain the index of the current iteration since a raise or zero indexed, the first

73
00:05:16,780 --> 00:05:18,820
image will have an index of zero.

74
00:05:19,420 --> 00:05:21,830
We've successfully looped through the array.

75
00:05:22,180 --> 00:05:24,280
We're finished with learning directives.

76
00:05:24,460 --> 00:05:27,040
It's time to move on to the actual project.

77
00:05:27,400 --> 00:05:31,990
I think you would agree with me in saying our project is starting to get cluttered.

78
00:05:32,380 --> 00:05:38,020
If we're going to learn more features, we should be working with an actual project we can add to our

79
00:05:38,020 --> 00:05:38,950
portfolio.

80
00:05:39,130 --> 00:05:42,880
Let's get started with a new project in the next section.