Structural Directives

Often we need to apply conditional logic to our templates to show or 0:00 hide content, or to loop through a list of items. 0:04 In this video, we'll learn about directive and 0:08 how to use a few that are built into the framework directives like you control 0:10 what it's display on the screen, apply dynamic style's to elements. 0:15 Loop through items and add new elements for 0:20 each item and the extend application with custom attributes power by your code. 0:23 Looking at the angular documentation site we can see that there are three 0:28 main types of directives. 0:32 Components, structural and attribute. 0:34 Components add directives, the main difference between a component and 0:41 other types of directives is that a component has a template. 0:45 Structural directives are the way to hide and reveal content inside a component. 0:48 Examples of these are ngIf and ngFor. 0:54 Attribute directives are used to change the appearance or behavior of an element. 0:58 An example of this is the NgStyle directive, 1:03 which lets you control the value of an element's style attribute. 1:07 In this video, we'll be learning about ngIf, ngFor NG class directives. 1:11 I've included some reference material in the teacher's notes for 1:17 these directives if you'd like to learn more. 1:20 We'll be picking up where we left off in the last video. 1:22 Let's open the entry dot component dot HTML file, i'll add a like button. 1:25 Always be sure to set the type to button. 1:34 By default an HTML button acts like submit button, and 1:40 I don't want to mistakenly have a user submit a form when it's not my intention. 1:44 I will bind the click event to invert a Boolean code isliked. 1:49 When we do this, the entry component doesn't have the property yet but 1:57 that's okay. 2:01 We're just using it for display purposes, we'll modify this later in the course. 2:02 Now I'll add the ng class attribute directive and 2:07 we'll assign a class To the element, 2:13 based on some condition. 2:17 In this case, we'll use the liked class with the isLiked bullion, 2:25 I'll add the heart emoji to indicate whether or 2:33 not the photo has been liked. 2:39 Now I'm going to wrap this button 2:43 in a div and apply some style to it, 2:48 I'll open up the entry component.CSS and 2:53 put some padding around the dev. 3:00 And while I'm there, I'll also set the colour of hearts if the user clicks it. 3:13 If we check this out in the browser, we can see our button is showing up, 3:32 and the padding on the div is working. 3:36 We can add some more style but this works for now. 3:41 When the button is clicked the heart toggles red. 3:44 Clicking it again will switch the heart to black. 3:48 Great, now let's add a comment section to our entry. 3:51 The photo entry will have any number of comments, so 4:00 we'll hide them until the visitor wants to read them. 4:03 I'll add a div and give it the class of comments, 4:07 inside that I'll create another div for each comment. 4:11 Then I'll add a paragraph 4:22 tag Which will hold 4:28 the name of the person and 4:32 the comment text. 4:38 Our entry is going to have many comments. 4:51 Let's jump over to the entry.component.ts file and add a comment array now. 4:55 I'm going to keep the common interface simple for now., it will only have a name. 5:14 And comment properties. 5:23 I'll add a few more so we can see that everything works. 5:34 Going back to the entry.component.html file, 5:45 we need to iterate over these three comments. 5:49 To do this, we'll use another directive ngFor. 5:53 The ngFor directive let's you loop through an array 5:57 on the div with the comment class. 6:00 Let's app the ngFor directive. 6:03 The expression used in ngFor is new to ES2015. 6:06 What it can iterate through an array and 6:09 gain direct access to each item in the loop. 6:13 In ES5, 6:16 we relied on the In operator returning the index of the item in the loop. 6:18 Using for of style loops makes the code cleaner, 6:24 there are two approaches to writing a ngFor loop. 6:28 When you prefix the ngFor directive with an asterisk 6:32 you are declaring the current element as the base for the loop's template. 6:35 Angular has a robust templating engine built in. 6:40 For this course we'll be using the self defined templates. 6:43 If you're curious and want to learn more, 6:47 I've included more details in the teachers notes about angular's template engine. 6:49 I'll save the file and check the browser. 6:54 Great, all three comments are shown, 6:58 now I want a button that toggles the display of comments. 7:02 The page is going to have any number of photos and 7:06 an even greater number of comments. 7:09 I don't want the comments to push the photos down the page unless the visitor 7:11 wants to read the comments. 7:16 The simplest way to handle this is to add a button with the comment count in it. 7:18 In the entry.component.html file, I'll add another button to the actions.div. 7:22 This button will have a click event bound to the showComments variable. 7:39 To get the common count, I'll wrap some cali braces around comments.length. 7:54 Then I'll add the ngIf directive to the div with the comment class. 8:06 The ngIf directive is similar to the ngFor directive, 8:16 in that we prefix the directive with an asterisk. 8:20 When the condition of the ngIf statement is true, the comments div will be shown. 8:25 If it's false, the comments div will not be included in the when we get 8:31 to the browser, I can already see that the comments are hidden. 8:35 If I click on the button they are shown, great. 8:39 Everything looks like it's working perfectly. 8:42 Great work. 8:45 The entry component is coming along well. 8:46 In the next stage, we'll create a service to retrieve and save data to the server. 8:49