Often we need to apply conditional logic to our templates to show or

hide content, or to loop through a list of items.

In this video, we'll learn about directive and

how to use a few that are built into the framework directives like you control

what it's display on the screen, apply dynamic style's to elements.

Loop through items and add new elements for

each item and the extend application with custom attributes power by your code.

Looking at the angular documentation site we can see that there are three

main types of directives.

Components, structural and attribute.

Components add directives, the main difference between a component and

other types of directives is that a component has a template.

Structural directives are the way to hide and reveal content inside a component.

Examples of these are ngIf and ngFor.

Attribute directives are used to change the appearance or behavior of an element.

An example of this is the NgStyle directive,

which lets you control the value of an element's style attribute.

In this video, we'll be learning about ngIf, ngFor NG class directives.

I've included some reference material in the teacher's notes for

these directives if you'd like to learn more.

We'll be picking up where we left off in the last video.

Let's open the entry dot component dot HTML file, i'll add a like button.

Always be sure to set the type to button.

By default an HTML button acts like submit button, and

I don't want to mistakenly have a user submit a form when it's not my intention.

I will bind the click event to invert a Boolean code isliked.

When we do this, the entry component doesn't have the property yet but

that's okay.

We're just using it for display purposes, we'll modify this later in the course.

Now I'll add the ng class attribute directive and

we'll assign a class To the element,

based on some condition.

In this case, we'll use the liked class with the isLiked bullion,

I'll add the heart emoji to indicate whether or

not the photo has been liked.

Now I'm going to wrap this button

in a div and apply some style to it,

I'll open up the entry component.CSS and

put some padding around the dev.

And while I'm there, I'll also set the colour of hearts if the user clicks it.

If we check this out in the browser, we can see our button is showing up,

and the padding on the div is working.

We can add some more style but this works for now.

When the button is clicked the heart toggles red.

Clicking it again will switch the heart to black.

Great, now let's add a comment section to our entry.

The photo entry will have any number of comments, so

we'll hide them until the visitor wants to read them.

I'll add a div and give it the class of comments,

inside that I'll create another div for each comment.

Then I'll add a paragraph

tag Which will hold

the name of the person and

the comment text.

Our entry is going to have many comments.

Let's jump over to the entry.component.ts file and add a comment array now.

I'm going to keep the common interface simple for now., it will only have a name.

And comment properties.

I'll add a few more so we can see that everything works.

Going back to the entry.component.html file,

we need to iterate over these three comments.

To do this, we'll use another directive ngFor.

The ngFor directive let's you loop through an array

on the div with the comment class.

Let's app the ngFor directive.

The expression used in ngFor is new to ES2015.

What it can iterate through an array and

gain direct access to each item in the loop.

In ES5,

we relied on the In operator returning the index of the item in the loop.

Using for of style loops makes the code cleaner,

there are two approaches to writing a ngFor loop.

When you prefix the ngFor directive with an asterisk

you are declaring the current element as the base for the loop's template.

Angular has a robust templating engine built in.

For this course we'll be using the self defined templates.

If you're curious and want to learn more,

I've included more details in the teachers notes about angular's template engine.

I'll save the file and check the browser.

Great, all three comments are shown,

now I want a button that toggles the display of comments.

The page is going to have any number of photos and

an even greater number of comments.

I don't want the comments to push the photos down the page unless the visitor

wants to read the comments.

The simplest way to handle this is to add a button with the comment count in it.

In the entry.component.html file, I'll add another button to the actions.div.

This button will have a click event bound to the showComments variable.

To get the common count, I'll wrap some cali braces around comments.length.

Then I'll add the ngIf directive to the div with the comment class.

The ngIf directive is similar to the ngFor directive,

in that we prefix the directive with an asterisk.

When the condition of the ngIf statement is true, the comments div will be shown.

If it's false, the comments div will not be included in the when we get

to the browser, I can already see that the comments are hidden.

If I click on the button they are shown, great.

Everything looks like it's working perfectly.

Great work.

The entry component is coming along well.

In the next stage, we'll create a service to retrieve and save data to the server.