From the course: Angular: Testing and Debugging

Unlock the full course today

Join today to access over 22,400 courses taught by industry experts or purchase this course individually.

Using a pipe to change HTML content

Using a pipe to change HTML content - Angular Tutorial

From the course: Angular: Testing and Debugging

Start my 1-month free trial

Using a pipe to change HTML content

- In the last video, we used a regular expression to search for usernames. In this video, we'll add code that modifies HTML content, so we can highlight the filter string found in each name in our list of users. There are many ways we could do this, but I find the cleanest way is to wrap the matched text in a span element and modify its styles using CSS. This approach does two things for us. First, it keeps CSS styles out of our HTML content, which is good practice. And second, it avoids cross site scripting issues. Angular has built in protection against many common attacks, including cross site scripting. And we would need to bypass angular security to style the content directly in our pipe. I don't recommend bypassing angular security. So using a CSS class is the safest option. Check out angular's documentation to learn more about cross site scripting and angular security checks. The replace method on line 15 accepts either a string or a function as the second argument. So instead…

Contents