How to change parent variable from children component?

This question is quite simple but I can't get rid of it.

I have a <header> in parent template and I need it disappear when displaying children template through routing module. What I expect is adding a class to the header tag so I can hide it via CSS. This is what I have:

app.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app',
template: `
<header [class.hidden]="hide">
<h1>My App</h1>
<ul>
<li><a href="/home"></a></li>
<li><a href="/showoff"></a></li>
</ul>
</header>
<router-outlet></router-outlet>
`
})

export class AppComponent {
hide = false; // <-- This is what I need to change in child component
}


app-routing.module.ts

import { RouterModule, Routes } from '@angular/router';

import { HomeComponent } from './welcome.component';
import { ShowOffComponent } from './show.off.component';

const routes: Routes = [
{ path: '', component: HomeComponent },
{ path: 'showoff', component: ShowOffComponent },
];

export const AppRouting = RouterModule.forRoot(routes, {
useHash: true
});


show.offf.component.ts

import { Component } from '@angular/core';
@Component({
selector: 'app-showoff',
template: `
<h2>Show Off</h2>
<div>Some contents...</div>
`
})

export class ShowOffComponent {
hide = true; // <-- Here is the problem.
// I don't have any idea how to reach parent variables.
}

Continue reading...