Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  • Overview
  • Transcript

1.3 The Highlight Utility

In this lesson you’ll take a look at the highlight utility and learn how to highlight some selected text in a larger set of text.

Related Links

1.3 The Highlight Utility

In this lesson, we're going to learn about the AngularUI Highlighting Utility. We'll start by copying our template. We'll do cp-r template, and we'll call this highlighting. So we'll cd into highlighting. And now, let's go ahead and open up our app.js. The first thing we're going to do in here is add the highlight module as a dependency of our own module. So we can do UI-highlight. It's really that simple. Each one of the angular UI utilities has its own module. Something like this UI dot and then whatever the name of this specific feature is. What we can use the highlight utility for is highlighting text within a larger portion of text. This is great if you application needs some kind of finding feature kind of like control in pretty much any text editor. So lets go ahead and see how this works. We're going to need some text to display and so let's go ahead and create scope.text and I'm just going to paste in some simple lorem ipsum text and we'll be able to edit this a little bit later but for now this is all we need to do. So now that we have some text let's go ahead and display it in our Index.HTML page. So in here let's go ahead and inside of our main controller here let's create a paragraph and inside of this we'll create a text area element. This text area element is where we want to edit this text that we've just put in our scope.text variable here. So, we will do ng-model equals text for this text area. Now, if we open this page up in the browser, you can see we have our text area here, and it has our text showing up inside of it. Before we go much further, let's add a little styling to this. We'll just say Style equals width equals let's say 100%, and we can say height equals let's say 400 pixels. So there you go. Actually, that's a little bit high. Let's just go down to 200 pixels. Okay, so now we have a nice text area. Now we're not actually going to do the highlighting of text inside this text area. We need to display this text outside of the text area, and we'll highlight it there. So what we could do, is just right underneath this, we could have another paragraph, and in here we could just say text. And this would work just fine, you can see we have our text displaying underneath, and as I add words up above, you can see that it changes what's going on down below. The problem with this is what happens when we actually do our highlighting. The UI.highlighting module is gonna wrap the text it's trying to highlight in some html. And that means that when we're displaying this text down here we need to be able to parse html. Now, if I add some tags to the text up here. You can see that this is not parsed as HTML, it's parsed as text. Which means we can see the tags here, instead of actually rendering the tags as HTML. So to render the tags as HTML, we need to do two things. First of all, we need to come back to our terminal and install another angular component. We need to bower install angular-sanitize. Angular sanitize is an official angular plugin that allows us to sanitize HTML content and safely display it on our application. So back here in app JS we have to add this as another one of our dependencies. So we'll say ngSanitize. We'll also have to add a script tag for it. So let me copy this, and it's gonna be angular-sanitize, angular,-sanitize-min.js. If we come back to the browser, refresh the page. You can see we don't have any errors, which means that the script was found and that the dependency was properly injected. Now the next thing we have to do is instead of just submitting the text like this, we have to actually bind it to the paragraph using NG-Bind-HTML. And so we're gonna bind the text like that. So now, if I refresh the page and add the B tag. You can see right away that everything is emboldened down below and then I can close the B tag. Notice we have some errors showing up in the console. That's okay, these are sanitized colon bad parse errors. The problem with this is every time I type in the text area, that is automatically rendered as HTML down below, and before I finish the tag, or before I add an ending tag, this is considered bad HTML. So these are errors we can just ignore. But now that we can parse HTML. We can go ahead and use the highlighting. So first we need a way to actually search for text within our field. So let's add another paragraph between these two and inside of it we will have an input element and this will be ngmodel. And we can say query. This, of course, will give us a search box right here. But now we need a way to wire up, whatever the query we type in is to our actual text. And this is actually very easy. What we can do is just say pipe this text through the highlight filter and pass that filter the query. So, now if I go ahead and refresh this page, and I go ahead and type dollar, for example, you can see we do have the word here, but, it's not actually being highlighted or anything. However, if we look at the HTML here, right here. Notice that right here, you can see we have a span wrapping that word that we searched for. And, it has a class of ui dash match. This is what angular UI does for us. It wraps everything that matches our search in a span with a class of ui match. And, we can style it however we want. So, up at the top here, let's add a style tag. And in here we can say .ui-match. And let's just say background equals let's say light blue. And why don't we say the color is gonna equal dark blue. So now if I refresh the page we can go ahead and search for elit. And you can see we have that word right in there being highlighted. And if I clear it, it clears. Now, currently this search is case insensitive, so you can see right in here we have Sed with a capital S. If around the same place, I put SED with a lowercase S, and then I search for SED, you can see that both of these are highlighted. If you want your search to be case sensitive, you can add another colon here and say true, after the query there, passing true is a second parameter to highlight. And now, if I refresh the page and I add sed back in, now if I search for sed, you can see that only lowercase sed is found. And if I change it to an uppercase S, you can see that only uppercase sed is found. Of course, you don't have to just type true in here. You could add maybe a checkbox, after our search box here, saying, case sensitive or not, and as that is checked, you can change that value. But now you know that the highlight filter does offer that as an option. So, there you go. That is the highlight filter from AngularUI.

Back to the top