Let's look at a quick overview of the search application:
Our search application invokes the Members component in the DOM. It contains two major parts: the search area and the result area.
From the search area, we type a search query and submit it to get the expected result in the result area.
The resulting area lists down the member list based on the search query. We may have figured out that we get all the data during the initialization of the
Members
component; that's because we call the Members component'ssearch()
method withngOnInit()
, and it returns all the data as our logic has been set to return all data when no search query is set.By clicking on a member's name, we can see the detailed information about that member on the details page.