Our module is ready, and is also plugged into AppModule, to put it into action. However, one small thing is still missing, which is to locate the navigation to launch the GDP module. The best option is to put the navigation link into the navigation bar at the top of the page. JHipster provides a navigation bar as a separate module out of the box, and it shows various links. A few of them are publicly visible, and others are only for logged-in and Admin users.

To add the link, we need to modify the navigation template file, navbar.component.html, under the /src/main/webapp/app/layouts/navbar folder as follows:

<div class="navbar-collapse collapse" id="navbarResponsive" 
            [ngbCollapse]="isNavbarCollapsed" [ngSwitch]="isAuthenticated()">
        <ul class="navbar-nav ml-auto">
            <li class="nav-item" routerLinkActive="active" 
                [routerLinkActiveOptions]="{exact: true}">
                <a class="nav-link" routerLink="/" (click)="collapseNavbar()">
                    <span>
                        <fa-icon icon="home"></fa-icon>
                        <span jhiTranslate="global.menu.home">Home</span>
                    </span>
                </a>
            </li>
            <li class="nav-item" routerLinkActive="active" 
                    [routerLinkActiveOptions]="{exact: true}">
                <a class="nav-link" routerLink="/countries" 
                        (click)="collapseNavbar()">
                    <span>
                        <fa-icon icon="list"></fa-icon>
                        <span>Countries</span>
                    </span>
                </a>
            </li>
          ....

We have added HTML code, highlighted in bold, to show the Countries menu item in the navigation bar. This looks as follows: 

The path for routerLink is defined as Countries, which ultimately triggers the t=the search-country component to show the country list with the filter option on the first screen. This is how you can add custom screens in JHipster project.