title: Change css attribute by component on init
body: <p>I am using Angular 2.4.1, and my final Hello World is the next:</p>
  
  <p>My index is composed by nav bar (which has display:none) and a router-outlet for presenting different views. My default view is a carousel with a link to a specific view.
  When I click in this link, the specific view will be loaded and (here is the problem), I would like to show the nav-bar (display:block) as well. I am stuck, and I can´t figure out how to achieve it.</p>
  
  <p><em>My problem is being how can I reach the nav-bar (id, or even class) in my first component, from my second component.</em></p>
  
  <p>My best approach is changing the css property of this nav-bar in the OnInit of its component. Not working... <strong>document</strong> is not recognized.</p>
  
  <pre><code>export class SociosComponent implements OnInit {
      ngOnInit(): void {
          this.document.getElementById('nav-principal').style.display = "block";
      }
  }
  </code></pre>
  
  <p>Here are part of the code:</p>
  
  <p><strong>app.component</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'my-app',
    template: `
    &lt;ul id="nav-principal" style="display:none; background-color:transparent;" class="nav nav-tabs"&gt;
      &lt;li role="presentation" class="active"&gt;&lt;a routerLink="/index"&gt;Index&lt;/a&gt;&lt;li&gt;
      &lt;li role="presentation"&gt;&lt;a routerLink="/socios"&gt;Socios&lt;/a&gt;&lt;li&gt;
    &lt;/ul&gt;
    &lt;router-outlet&gt;&lt;/router-outlet&gt;
    `
  })
  
  export class AppComponent { 
  }
  </code></pre>
  
  <p><strong>app.rounting</strong></p>
  
  <pre><code>// Importar componentes y módulos para el routing 
  import { Routes, RouterModule } from '@angular/router';
  
  // Componentes
  import { SociosComponent } from './socios.component';
  import { Index } from './index';
  
  // Configuración de las rutas
  const appRoutes: Routes = [
    { path: '', redirectTo: 'index', pathMatch: 'full' },
    { path: 'index', component: Index },
    { path: 'socios', component: SociosComponent },
  ];
  
  export const routing = RouterModule.forRoot(appRoutes);
  </code></pre>
  
  <p><strong>socios.component</strong></p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
    selector: 'socios',
    templateUrl: '../socios.html',
  })
  
  export class SociosComponent implements OnInit {
      ngOnInit(): void {
          this.document.getElementById('nav-principal').style.display = "block";
      }
  }
  </code></pre>
  
  <p>Thanks guys.</p>