In Chapter 7, Templates, Directives, and Pipes, we will learn in detail about components, directives, and templates. For now, just understand that, like the anchor element and href attribute in HTML5, Angular provides a way to bind the links and the URL resource:

<nav>
 <a routerLink="/home" routerLinkActive="active">Home</a>
 <a routerLink="/listings" routerLinkActive="active">Listings</a>
</nav>

In the preceding code, we are adding two links. Notice that we have added the routerLink attribute to the links, which will help us bind the value of /home and /listings, respectively.

Also, notice that we have added the routerLinkActive attribute and assigned the value as active. Whenever a user clicks on the link, the Angular router will know and make it active. Some call it magic!