title: style parent component using css
body: <p>So basically what I am trying to do is modify the CSS of an element belonging to the parent component. I have a link that is once clicked it routes to a new component which is a popup modal. I am trying to apply a background color, opacity etc....to the parent component. How can I achieve this?</p>
  
  <p><a href="http://www.alessioatzeni.com/wp-content/tutorials/jquery/login-box-modal-dialog-window/index.html" rel="nofollow">Here is an example of what I am trying to achieve, click on the login button and you will see a popup appear and the background change.</a></p>
  
  <p>login component</p>
  
  <pre><code>import { Component } from '@angular/core';
  
  @Component({
      selector: 'login',
      templateUrl: './app/login/login.component.html',
      styleUrls: [ './app/login/login.component.css' ]
  })
  
  export class LoginComponent {}
  </code></pre>
  
  <p>main component which routes to login component</p>
  
  <pre><code>import { Component } from '@angular/core';
  import { RouteConfig, ROUTER_DIRECTIVES } from '@angular/router-deprecated';
  
  import { LoginComponent } from './login/login.component';
  
  @Component({
      selector: 'main-component',
      templateUrl: './app/main.component.html',
      styleUrls: [ './app/main.component.css' ],
      directives: [ROUTER_DIRECTIVES]
  })
  
  @RouteConfig([
      {path: '/login', name: 'Login', component: LoginComponent}
  ])
  
  export class MainComponent {}
  </code></pre>
  
  <p>html portion of main.component.html that contains the link which routes to login.component.ts. How do I use css on this stylesheet to lets say do z-index, opacity etc.....from the login component?</p>
  
  <pre><code>&lt;header&gt;
      &lt;h1&gt;Budget Calculator&lt;/h1&gt;
      &lt;a id='login' [routerLink]="['Login']"&gt;Login&lt;/a&gt;
      &lt;router-outlet&gt;&lt;/router-outlet&gt;
      &lt;nav-bar&gt;&lt;/nav-bar&gt;
  &lt;/header&gt;
  </code></pre>