Angular - 2.27-Exercise 3

We are finally at the end of this section of the course. Practice what you’ve learned about the guidelines and use the most common guidelines to add a button that says "Show details". Also add a paragraph with the content of your choice and toggle the display of this paragraph with the button created in the first step. Record all button clicks in a table and display this table on the secret paragraph. From the 5th element, give all future log elements a blue background via ngStyle and a white color using ngClass.

Pause the video for this exercise. When you are done, come back and continue watching the correction.

So, did you succeed? Let’s solve it together. I will start just below this ordered list and add a button with some CSS classes: "btn, btn primary" and the text "Show details".

Then I will add my paragraph with the text "Secret password = test". I only want to display that if it’s not already displayed and if it’s displayed, I don’t want to re-display it. For this, I will use the ngIf directive.

I will add a property to my application component, which I will name "showSecret", any name you like of course, and set it to "false" initially.

Now, in my application component, I will add a click earphone to my button with the event link. When the button is clicked, I will simply set "showSecret" equal to "!" (logical negation) " showSecret". Thus, if it is false, it will be defined on true and if it was true, it will be defined on false. Now, with this, I can add ngIf here and check if "showSecret" is true and only show it in this case.

If "ng serve" is running, we go back and I click on it, now you see that the failover works as expected, so the first three tasks are already resolved

.

Now let’s go to the fourth step, connect it in the console. For this, I will actually duplicate this button and comment on the first solution with the shortcut, because to connect it, I will call a method "onToggleDetails", any name you like though. I will add this method in the application component.

I will use the failover code here to set "showSecret" to "is not this.showSecret". Then, I want to connect it. So I’ll name it "log" and it should be an array of numbers at the beginning. Then, I’ll use "this.log.push" to push a new number. And this number should actually take into account the current length of "this". So, if "this" is at the beginning at zero, the "this" element will also be zero. Then I will add more one. So, if you have an item in the table, the length will be a sort of the next item, so it should have a value of two. This" adds these elements to the log. Now I pull out the paragraph below and choose a "div" element here.

I will use "ngFor" on it and we will learn that we use "ngFor" by saying "let", and now we could put "logItem", or any name you then want to "log" from the property you want to browse. It could also be a method called returning a table. However, it must be a table. Thus, here, we browse the logs between the "div" opening and closing tags.

I can now use string interpolation to produce "logItem" output. We didn’t do that in the last videos, but it told you that "logItem" is a variable that we can now use in a model, and that’s exactly what we’re doing here. I pull out the "logItem" element.

So, if we look at our application, and I click on this button, you see that I add this list, it jumps around because I add and remove this secret password. But you see that the list grows as expected. The log works. Now, about this coloring, the fifth step here... Well, it’s easy to produce when you use a number like this.

In doing so, I will go into my div and start with the style, the black blue background. We will use "ngStyle" and have learned that we need the property link to make it work properly, because we have to pass a JavaScript object configuring our styles when we want to attach which styles. Thus, the style to be attached is a background color.

I will use the Camel case notation again, although you can use single quotes to have a "background-color" as a name. And now it’s easy to check if "logItem" is a number because I want to check if "logItem" is greater than or equal to five, in which case the background color should be blue. This is a chain, otherwise it will be transparent or white to have a non-blue background here. LogItem" is of course a number, so this check should be easy. And yes, you could outsource this part of course in a method you call here. Generally, having most of the logic in the TypeScript code, in the body of your component is a good practice, but here I think it’s just as well to put it in the model and show that it’s possible too.

With this check now in place, let’s see if it works as intended. If I click this button, the next item should have a blue background and it has it. It works, but it’s pretty hard to read. So let’s finish the second part here and give it a white color. For this, in my CSS file, I will define a class named white-text, no matter what name you choose, of course, it is totally up to you to decide. And I’m going to set the color to white. Now, this white-text CSS class should only be attached if we’re at element five or more. So, next to ng-style, I’m going to add ng-class and I’m going to use a property link, so square brackets here too, because I need to pass a JavaScript object to the ng-class property of the ng-class directive to make it work properly.

Between single quotes, since we have a dash inside the name, I will add the white-text class, the class we just created here. Only if the connection condition specified here as a value returns true. And the condition is simply that the logItem element is equal to or greater than five, just like on the ng-style directive. So, if this returns true, we should have the white-text class attached, which should make the text white. Let’s see if it works.

I will click Show Details. So here the text is clearly not white. It works and now it looks good. Blue background, white text. Great. Now I’m going to show a nice bonus to the solution in the next video, where I’ll use timestamps because it uses an additional addition of ngFor that we haven’t seen before.