How can I hide my Navigation Bar if the component is called on all my routes (Angular4)

Question

I know variations of this question have been asked millions of times before but I just cant seem to solve my problem.

So i'm making an accounting site and my problem is that I cant seem to be able to hide the top navigation bar from the login page and still keep it on all my other pages/routes:

I call the Navigation Bar component in app.component.html so it shows on all my pages:

(app.component.html)

<app-navbar>
<router-outlet>

The login page has simple authentication as i'm still making the template, eventually, the username and password will come from a back-end database.

The login page ts file looks like this:

export class LoginComponent implements OnInit {
    emailFormControl = new FormControl('', [Validators.required,
    Validators.pattern(EMAIL_REGEX)]);
    UserName = new FormControl('', [Validators.required]);
    password = new FormControl('', [Validators.required]);

    constructor(private router: Router) { }
    ngOnInit() {

    }
    loginUser(e) {
        e.preventDefault();
        console.log(e);
        const username = e.target.elements[0].value;
        const password = e.target.elements[1].value;
        if (username === 'admin' && password === 'admin') {
            // this.user.setUserLoggedIn();
            this.router.navigate(['accounts']);
        }
    }
}

I also have a user service:

import { Injectable } from '@angular/core';

@Injectable()
export class UserService {

    private isUserLoggedIn;
    public username;

    constructor() {
        this.isUserLoggedIn = false;
    }

    setUserLoggedIn() {
        this.isUserLoggedIn = true;
        this.username = 'admin';
    }

    getUserLoggedIn() {
        return this.isUserLoggedIn;
    }
}

I've seen answers regarding Auth and such but i can't seem to sculpt the answers around my code.

How do i hide the Navigation bar on the login page?

I'd appreciate any and all help. Thank you

EDIT

This is the routing file as requested by Dhyey:

    import {RouterModule, Routes} from '@angular/router';
import {NgModule} from '@angular/core';
import { LoginComponent } from './login/login.component';
import { AdminComponent } from './Components/admin/admin.component';
import { AccountsComponent } from './Components/accounts/accounts.component';
import { MappingComponent } from './Components/mapping/mapping.component';

const appRoutes: Routes = [
  { path: '',
  pathMatch: 'full',
  redirectTo: 'login' },
  {
    path: 'login',
    component: LoginComponent
  },
  {
    path: 'admin',
    component: AdminComponent
  },
{
  path: 'accounts',
  component: AccountsComponent
},
{
  path: 'mapping',
  component: MappingComponent
},
];
@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {}
// export const routingComponents = [MappingComponent, AccountsComponent, AdminComponent, LoginComponent];

EDIT 2 This is the app.component.ts file

import { Component } from '@angular/core';
import {FormControl} from '@angular/forms';
import {HttpModule} from '@angular/http';
import { UserService } from './services/user.service';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.sass']
})
export class AppComponent {
  title = 'app';
  myControl: FormControl = new FormControl();

}

Answer 1

You can check if user is logged in through your getUserLoggedIn method:

First you need to inject UserService in app.component.ts:

constructor(public userService: UserService ) { }

Then in your html:

<app-navbar *ngIf="userService.getUserLoggedIn()">
<router-outlet>

This way only when isUserLoggedIn is true, the app-navbar will be shown