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