app.component.html

<a class="hide-on-small-only hidden-xs" href="//github.com/fetrarij/ngx-daterangepicker-material">
    <img
        style="position: absolute; top: 0; right: 0; border: 0; z-index: 2000"
        src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67"
        alt="Fork me on GitHub"
        data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" />
</a>
<nav class="light-blue lighten-1" role="navigation">
    <div class="nav-wrapper container">
        <ul class="left hide-on-small-only">
            <li routerLinkActive="active"><a [routerLink]="['simple']">Simple</a></li>
            <li routerLinkActive="active"><a [routerLink]="['locale']">Locale</a></li>
            <li routerLinkActive="active"><a [routerLink]="['single-datepicker']">Single datepicker (fr)</a></li>
            <li routerLinkActive="active"><a [routerLink]="['reactive-forms']">Reactive forms</a></li>
            <li routerLinkActive="active"><a [routerLink]="['with-timepicker']">With timepicker</a></li>
            <li routerLinkActive="active"><a [routerLink]="['custom-ranges']">Custom ranges</a></li>
            <li routerLinkActive="active"><a [routerLink]="['full']">Full options</a></li>
        </ul>
    </div>
</nav>

<div class="container">
    <router-outlet></router-outlet>
</div>