lms-app/src/app/tabs/tabs.component.html

<section class="page-container half-bg" color="black">
    <app-home *ngIf="selectedTab === 'home'"></app-home>
    <app-courses *ngIf="selectedTab === 'courses'"></app-courses>
    <app-more *ngIf="selectedTab === 'more'"></app-more>
</section>

<section class="tabs">
    <button [routerLink]="['/tabs/home']" [ngClass]="{'active' : selectedTab === 'home'}">
        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/home.svg"></svg-icon>
        <span> Home </span>
    </button>
    <button [routerLink]="['/tabs/courses']" [ngClass]="{'active' : selectedTab === 'courses'}">
        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/mortarboard.svg"></svg-icon>
        <span> Courses </span>
    </button>
    <button id="mid-button">
        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/book.svg"></svg-icon>
    </button>
    <button [routerLink]="['/tabs/reports']" [ngClass]="{'active' : selectedTab === 'reports'}">
        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/newspaper.svg"></svg-icon>
        <span> Reports </span>
    </button>
    <button [routerLink]="['/tabs/more']" [ngClass]="{'active' : selectedTab === 'more'}">
        <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/more.svg"></svg-icon>
        <span> More </span>
    </button>
</section>