Cómo cambiar el valor booleano del componente principal .ts al componente secundario .ts quiere mostrar y ocultar la opción de inicio y cierre de sesión usando ngif pero no funciona. No sé cómo establecer y compartir el valor booleano entre dos componentes. Estoy usando templateUrl.

app.component.ts:

export class AppComponent { 
public isValid:boolean;
constructor(private router:Router){ 
} 
 logout(){
 localStorage.removeItem('email');
 this.router.navigate(['./login']);
 this.isValid=true; 
 } 
 }

login.component.ts

export class LoginComponent implements OnInit {
public username:string;
public password:string; 
constructor(private router:Router) { } 
ngOnInit() {
} 
userLogin(form:NgForm){ 
if(form.value.username==="[email protected]" && form.value.password==="admin")
 {
  localStorage.setItem('email',form.value.username);
  this.router.navigate(['./php']);
  this.isValid=false;//not working//
} }  }

app.component.html

<ul class="nav navbar-nav navbar-right">
  <li *ngIf="isValid">
    <a [routerLink]="['/login']" >Login</a>
  </li>

  <li *ngIf="!isValid">
      <a (click)="logout()">LogOut</a>
    </li>

</ul>