title: How to set element class in parent component from each child component?
body: <p>In app.component (the main one of the application) I have:</p>
  
  <pre><code>&lt;div id="wrapper"&gt;
  &lt;!-- Header
  ================================================== --&gt;
      &lt;header  class="transparent sticky-header full-width"&gt;
  .
  .
  .
      &lt;div class='container-fluid'&gt;
          &lt;div class='row'&gt;
              &lt;div class='col-sm-3'&gt;
                  &lt;nav-menu&gt;&lt;/nav-menu&gt;
              &lt;/div&gt;
              &lt;div class='col-sm-9 body-content'&gt;
                  &lt;flash-messages&gt;&lt;/flash-messages&gt;
                  &lt;ng2-toasty&gt;&lt;/ng2-toasty&gt;
                  &lt;router-outlet&gt;&lt;/router-outlet&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  .
  .
  .
  </code></pre>
  
  <p>I want the header to keep "transparent" class only on home.component. On all the other components I want to keep the other two classes, without "transparent".</p>
  
  <p>A hierarchy that should explain better how the components are structured can be seen in the below picture:</p>
  
  <p><a href="https://i.stack.imgur.com/LYBSY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/LYBSY.png" alt="enter image description here"></a></p>
  
  <p>So, the home component is not the parent, but app.component is the parent. home.component is a child as are the others.</p>
  
  <p>app.component.ts</p>
  
  <pre><code>import { Component, ErrorHandler } from '@angular/core';
  import { ToastyService } from "ng2-toasty";
  import { AppErrorHandler } from "../../app.error-handler";
  import { HomeComponent } from "../home/home.component";
  import { ActivatedRoute, Router } from "@angular/router";
  
  @Component({
      selector: 'app',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.css'],
      providers: [
          HomeComponent,
          ToastyService,
          { provide: ErrorHandler, useClass: AppErrorHandler }
      ]
  })
  export class AppComponent {
      classes: string;
      constructor(private home: HomeComponent, private route: ActivatedRoute,
          private router: Router) {
          //this.classes = false;
          //if (this.router.url ==='/home')
          //{
          //    this.classes = true;
          //}
          this.classes = "transparent sticky- header full- width";
      }
  }
  </code></pre>
  
  <p>I have tried to make a variable classes and pass it with ngClass, but it does not work.</p>
  
  <p>I have searched for solutions and all I've found were based on events.</p>