From the course: Angular: Testing and Debugging

Application overview - Angular Tutorial

From the course: Angular: Testing and Debugging

Start my 1-month free trial Buy for my team

Application overview

“

- [Instructor] Testing and debugging is a big part of building Angular apps. The faster you can find the problems the faster you can fix your application and the faster you can get it back up and running. This is the app we'll be working on in this course. It's a simple webpage that shows a list of active users. The input field lets me filter the list by a search string. The UI updates as soon as I start typing a name. So if I search for, say, Davis, I can find those users very quickly. I can also clear my search by clicking the clear button on the right here, which brings back the full list of active users. Let's take a look at the code. This is the HTML template for our user list. At the top here is the input group for our search field and the clear button. Here is our input element. This is a standard HTML input, except for the template reference variable here and the key up binding here. The template reference variable is a quick way for us to access properties on the underlying DOM element using Angular's API. The key up binding is a quick way for us to assign an action to the standard key up DOM event, again, using Angular's API. When a user filters the list, we pass the value of the template reference variable into the update method on our components class. This method filters the list and returns a new list back to the DOM. Here is the code for our clear button. It's a standard HTML button, except for the click binding here. Just like the key up binding above, click lets us quickly assign actions to the click event on the element. In this case, we do two things. First, it passes an empty string into the update method, which returns all of the usernames. And second, it sets the value of the template reference variable to an empty string. This resets the input element. We load the list here, where we iterate over each user using the ng4 directive and display each result as its own unordered list item. Let's take a look at the component class itself. We declare a public property here called users. This is the same property we use in our template. Here in the ng oninit method, we get the list of users from the get all method on our custom user list service. And we filter the list of users here in the update method by passing the search string into the filter method of our user list service. Both of these service methods are asynchronous and we use JavaScripts async await syntax to wait for the data to return before assigning it to the user's property. Right now, the app resets on page load and forgets the filter input. During this course we'll add functionality to our app to save the filter state between page loads. Along the way, we'll look at some common errors and how to fix them. Later in the course, we'll add static code linting and write unit tests and end to end tests for our new code. This is our custom service. It could get data from anywhere, but for now it's returning a static list of mock users from our users .ts file imported here. We're using a static file to keep this course focused on testing and debugging Angular. For an in-depth look at how Angular works with data, check out the course Managing Data and Angular to Applications here in our library.

Contents