Angular 5 input output - input

Question

In my application there is a toolbar in the a navigation component. This navigation component is part of the app.component along with the place for other components to show. I have a login page from where I want to transfer a variable to the app.component and then on the basis of the variable the toolbar should be changed. From login component I am transferring the variable through #output and eventemitter but in app.component I am not receiving it. The code is as follows.
app.component.ts
import { Component, OnInit } from '#angular/core';
#Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent implements OnInit {
myrole = 'NoUser';
ngOnInit() {
console.log(this.myrole);
}
}
login.component.ts
import { Component, OnInit, Output, EventEmitter } from '#angular/core';
import { Router, ActivatedRoute } from '#angular/router';
#Component({
selector: 'app-login',
templateUrl: './login.component.html',
styleUrls: ['./login.component.scss']
})
export class LoginComponent implements OnInit {
Name: string;
Pass: string;
#Output() myrole = new EventEmitter();
constructor(private rout: Router) { }
ngOnInit() {
}
OnName(event: any)
{
this.Name = event.target.value;
if (this.Name === 'admin' || this.Name === 'Admin') {
this.myrole.emit('admin');
} else if (this.Name === 'user' || this.Name === 'User') {
this.myrole.emit('user');
} else {
this.myrole.emit('NoUser');
}
console.log(this.myrole);
}
onPass(event: any)
{
this.Pass = event.target.value;
}
Submit() {
this.rout.navigate(['*']);
}
}
navi.component.ts
import { Component, OnInit, Input } from '#angular/core';
#Component({
selector: 'app-navi',
templateUrl: './navi.component.html',
styleUrls: ['./navi.component.css']
})
export class NaviComponent implements OnInit {
#Input() myrole: string;
ngOnInit(): void {
console.log(this.myrole);
}
}
app.component.html
<app-navi [myrole]='myrole'></app-navi>
<br>
<router-outlet></router-outlet>