title: How to change parent variable from children component?
body: <p>This question is quite simple but I can't get rid of it.</p>
  
  <p>I have a <code>&lt;header&gt;</code> 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:<br><br>
  <strong>app.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  @Component({
    selector: 'app',
    template: `
      &lt;header [class.hidden]="hide"&gt;
        &lt;h1&gt;My App&lt;/h1&gt;
        &lt;ul&gt;
              &lt;li&gt;&lt;a href="/home"&gt;&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="/showoff"&gt;&lt;/a&gt;&lt;/li&gt;
        &lt;/ul&gt;
      &lt;/header&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `
  })
  
  export class AppComponent {
    hide = false; // &lt;-- This is what I need to change in child component
  }
  </code></pre>
  
  <p><strong>app-routing.module.ts</strong></p>
  
  <pre><code>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
  });
  </code></pre>
  
  <p><strong>show.offf.component.ts</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  @Component({
     selector: 'app-showoff',
     template: `
         &lt;h2&gt;Show Off&lt;/h2&gt;
         &lt;div&gt;Some contents...&lt;/div&gt;
     `
  })
  
  export class ShowOffComponent {
     hide = true; // &lt;-- Here is the problem.
                  // I don't have any idea how to reach parent variables.
  }
  </code></pre>