Adding navigation

Angular Router provides the routerLink and routerLinkActive directives, which have to be used instead of the regular href attribute in the <a> tag to create navigation links. routerLinkActive is used to mark an active link.

Open the src/app/core/components/header.component.html file and update it as follows:

<button routerLink="/feed/posts">Feed</button>
<button routerLink="/users/profile/ahmedbouchefra">My 
   profile</button>
<button routerLink="/users/login">Login</button>
<button routerLink="/users/signup">Sign up</button>

We added four navigation buttons with the routerLink directive, which holds the target path that users will be taken to after clicking the corresponding button.

This is just for testing our navigation links; we'll change this component's template later to include buttons in more appropriate places. For example,...