Hiding and Showing Parts of the User Interface

Ryan Chenkie
A free video tutorial from Ryan Chenkie
Full-Stack Developer
4.6 instructor rating • 3 courses • 105,309 students

Lecture description

Most applications will need to hide and display different parts of the user interface based on some condition. This is useful for letting users do things like toggle sections of the app on and off. Let's take a look at the various ways we can conditionally hide and show elements.

Learn more from the full course

Ultimate AngularJS: Build a Real-World App from Scratch

Build a Single Page App with AngularJS, Angular Material, UI Router, and Firebase. Includes Angular 2 preview!

05:31:34 of on-demand video • Updated February 2016

  • Create Single Page Applications with AngularJS
  • Use the command line to make files and directories, and to install packages from NPM
  • Work effectively with Angular Material
  • Create AngularJS directives
  • Wire up a real-time backend with Firebase
  • Apply routing to any Angular 1.x application with UI Router
  • Create a basic Angular 2 application with multiple components
English [Auto] A good way they add interactivity to any application is to hide or show different parts of the user interface based on a condition. Angular gives us some really good tools to do this and in this lecture will put them to use. All right so as the final step in getting the main application structure in place why don't we put in an area within each card that has the contact information for whoever is listing this classified and at the same time we can also start to put in some controls that would be used by an administrator to edit or delete any of these listings. So for this we'll make use of some of angler's other built in directives and I'm going to do a little bit of demonstration for you before we get too far in. So what we'll need in this case is to make use of angler's Engy show and ngi hide directives and eventually we'll make use of the Ngee click directive to listen for a click event as well. And so let's see how these work. Let's come maybe down here below the toolbar a little bit and let's just put in somethin to give us a little example maybe a tag you can put your name in there. And if I come back over and refresh we see that it's come in through right here I can conditionally hide and show this really easily by using angler's just show or Engy hide directive. So let's see how we can do this. We can say that we want this P-TECH to be shown if something is true or false. So just as an example we can say ngi show equals true and that will be shown and then we can also say Angie's show equals false. And now it won't be shown and how this works is that Engy show looks for a true or false value to either show or hide the element that it's on. So let's create maybe just a local property on our data model and we'll call it maybe show name. And so when this show Name property is true then this whole tag will be shown. And when it's false it will be hidden. And the way that we can maybe switch that up just on the fly here. Let's try putting in a button so we can just put in a standard button and here will make use of the energy clicked directive. So Engy click is going to be equal to something. And in this case we want to say that when the user clicks the button show name is going to be set to true. And so let's say show name here in the button will come back over and refresh. And right now you see we get the button but we don't get the name showing up. But if we click Show name there it is the name shows up right here. And so what happened again is that this Engy click directive is saying that when clicked set a property a local property on the data model called show name to true and our name element down here has an energy show directive which says conditionally show this element if the show name property is set to true. And so let's see how we can do the inverse of this. We could also do another button and this one is going to have an energy click as well and we'll say in this case show name is equal to false. So we can say hide name OK we'll come back over and refresh. And now we've got our extra button so we can click Show name and there it is and then we'll also click hived name and it goes away. So hopefully that makes sense what we're doing essentially is saying that any time this show name property is set to true then we want this P-TECH to be shown. And any time that it's a default we want it to be hidden. And so I also mentioned there's an energy high directive and basically this is just the inverse of ngi show. So let's see this at work. We do Engy hide there. Let's come back and refresh. We see that we've got my name showing here. And so if we were to say show name I would expect this to disappear now because we basically just flipped everything. And so sure enough it does so. And then if we click hide name I would expect it to show up because again we've flipped everything around and there we go. OK so let's see how we can put this into practice now for our card. So let's get rid of all of this and let's come down here. And I'm just going to create a little bit more space and maybe a rate here we can put in another div and this div is going to have a class of classified contact. This is going to be the contact information for each of the classified ads. So here let's do a pizza egg. And then within that why don't we do an icon so we'll do the icon and this icon is going to have a class of MDI and also MDI account. All right we'll close that off. And then within this PSA what we want to show is the contact name. And if we remember back over here in our data we've got this contact object and we've got some properties like name phone number and e-mail. So let's access those. So down here within the first Peetz egg let's put in the name so we can just do our standard templating. Here we'll do classified contact name. All right. And so I'm actually just going to copy all of this and come down to the next line I pasted in twice because we want the same thing essentially on the next two lines. This one will change over to be an icon of a phone. And this one is going to be the email so we'll say e-mail there and then we can just make the same change right here and right here. All right let's see how that looks. Coming back over to refresh. There we go. We've got all of the contact information shown up there. But I think what we want to do is maybe not show this information until the user clicks something to say that they want to see it. So why don't we put in an energy show on our classified contact live to say that we want to conditionally show it. So up here right beside our class name let's put in the show and that's going to be equal to maybe a property called show contact. And so thinking back to the examples we just did whenever this show contact property set to true this area is going to be shown by default when the page loads it's not going to be set to true so if we to come over here I expect it not to be shown. So now what we'll want is a button that sets the show contact property to True when the user wants. So let's head back over here and let's come down below this div and what we'll do is put in another div and just to properly format things let's say layout here is equal to row. And again that's going to allow us to get whatever's in here whatever's in the div tags to show up horizontally instead of vertically. Let's put in a new M.D button and this button is going to you have an NGO click that says Show contact is equal to true. Now will close that off and will put in contact as the text within that button. OK let's copy all of that and come down to the next line. And this one is going to do the inverse. This one's going to hide it. So in this case we'll say show contact is equal to false and maybe for the wording here we can just put details because that's going to take us back to the details of the classified ad. All right so we'll save that. And let's test it. It's coming back over and we'll refresh. Let's click contact. And you see we've got all of the contact information showing up and we can go back to details and we just get this. All right so that's going to work. But as it stands whenever we click this contact button we're going to get the contact information which is all coming out right here. We're going to have that showing up but we're still going to have all of these details showing up as well. So why don't we put an ngi show on this div as well. What we can do is put in the show here and we can say that this one is going to be equal to not show contact. The inverse of show contact and it's probably worth mentioning here that the show contact property is going to have a value of true or false. And that's how we're able to just simply list the property name to get our conditional showing or hiding the long form of doing this would be to say ngi show and show contact is equal to true. That would kind of be the long form but it works just as well to say that we want it to show simply when show contact because this is going to evaluate to true when this button is clicked. Similarly instead of putting the negation in front of our show contact property here we could say show this area when Engy contact is equal to false. But the negation works to make it a little bit shorter. So we'll put back our exclamation to say show this area win show contact is equal to false. OK so let's save this and let's check it out in the browser if we refresh what we'll see is we've got our contact in our details buttons. We click contact the other area that we were just on the details is hidden and the contact information for whoever posted the ad shows up. And then if we click details we get all of our information back. So there we go. That is how we conditionally show or hide different elements within our angular template. And so just before we finish let's put in one last thing we'll put in the administration area was make an assumption that whoever is using this is an administrator just to see how things work. So what we'll need is a little administration area that has some extra controls within each of the classifieds. So let's head back over and right down here Volo our buttons. Let's put in another area. This one's going to be the classified admin area. So we'll do a div with a class of classified admin and we can put in a heading let's do an H 3 and it's going to be admin and then a div within here and that div is going to take a layout of row again so everything shows up horizontally. And then we can put in some more controls. Let's do M.D button and this one is going to have a class of M.D primary as the primary color. And for now let's just call this the edit button and then we'll copy this and we'll come over here and instead of M-B primary this time let's do M.D Warren because this is going to be the delete button. So we're going to say delete in this one. And this is another spot that we want to conditionally show or hide. So this time instead of using Engy show let's use another one of angler's directives called. If an NGF is kind of like Angi show but what it does is it removes this whole div from the DOM. Anytime that a condition is false and it inserts it into the DOM any time a condition is true whereas here the NGI showed directive is simply using CSSA to hide whatever this Engy show is applied to. So once you get NGF it's going to actually remove this from the DOM. So the conditional wanting me here is if Show admin is set to true. Once again if we wanted to be verbose we could say show admin should be true if this condition is met but we can also just leave it as show admin. So now this means we need another control to set show admin to true. So if we come down here below this button let's just copy this one and we can paste the below. This one should be the admin area button so will activate the admin area when this button is clicked and to do that of course we need to set. Show admin to true here instead of show contact. So this button is going to set. Show admin to true and then we actually can just come down here below this one and we can make this button close the admin area so will stay close and this one is going to set. Show admin to false. OK so we save that. Let's come back over to see how it looks and right away we see that it's kind of running off of each of the contact cards and we can fix this in a number of ways. But what we should really do is conditionally show or hide these buttons themselves. For instance if we are in the contact area for our card Well we don't really need the contact button to still show up because we're already there. We need the details button but we don't need that contact button. The same goes for admin. If we're in the admin area which we can see here we don't need this admin button showing up at all. So let's fix that up. Coming back over here what we need to do is put an end show on each of these buttons. All right so we've got to put in Engy show on each of these buttons to conditionally show unhide them and when the line start to get a little bit long for the HDL. I like to break things out onto new lines so we'll just do this and break out our button. H m l onto a new line. So down here below the Engy click. I'm going to do the show when the show contact property is false. That's when we want to have this button be shown and I'll fix this up a little bit here. Just bring the end of the empty but an opening tag up to the line above. All right same thing goes for the details button. So let's break this down onto a new line and this one as well. So down below here what we can do is say. This should be shown and will use in the show of course. This should be shown when show contact is true. That's when we want to see this Details button. All right let's give it a bit more space here and we'll bring this one down. And so here what we'll do is we will say they want to show this button when show admen is false. And then I'm sure you can guess the last one. This one is going to be shown when show admin is true. All right so let's save that and see how it looks. So we refresh we click the contact button we get our contact details but that contact button has now been hidden. And if we like details we are back to that details area and the details button is in. Similarly for the admin area if I click it we get the admin area and we've got her close button now but not the admin button. So we've still got a bunch to do in our application. We've got to have a way to add listings and to edit and delete listings. But before that we're going to take a look at angler's HTP service to get our data from a remote source. We'll do that in the next section.