title: Angular2 - adding [_ngcontent-mav-x] to styles
body: <p>I'm setting up a basic angular app, and I'm trying to inject some css to my views. This is an example of one of my components:</p>
  
  <pre><code>import { Component } from 'angular2/core';
  import { ROUTER_PROVIDERS, ROUTER_DIRECTIVES, RouteConfig } from 'angular2/router';
  
  import { LandingComponent } from './landing.component';
  import { PortfolioComponent } from './portfolio.component';
  
  @Component({
      selector: 'portfolio-app',
      templateUrl: '/app/views/template.html',
      styleUrls: ['../app/styles/template.css'],
      directives: [ROUTER_DIRECTIVES],
      providers: [ROUTER_PROVIDERS]
  })
  
  @RouteConfig([
      { path: '/landing', name: 'Landing', component: LandingComponent, useAsDefault: true },
      { path: '/portfolio', name: 'Portfolio', component: PortfolioComponent }
  ])
  
  export class AppComponent { }
  </code></pre>
  
  <p>Now the .css file is requested from my server, and when I inspect the page source, I can see it was added to the head. But something weird is happening: </p>
  
  <pre><code>&lt;style&gt;@media (min-width: 768px) {
  
  
      .outer[_ngcontent-mav-3] {
          display: table;
          position: absolute;
          height: 100%;
          width: 100%;
      }
      .mainContainer[_ngcontent-mav-3] {
          display: table-cell;
          vertical-align: middle;
      }
      .appContainer[_ngcontent-mav-3] {
          width: 95%;
          border-radius: 50%;
      }
      .heightElement[_ngcontent-mav-3] {
          height: 0;
          padding-bottom: 100%;
      }
  }&lt;/style&gt;
  </code></pre>
  
  <p>gets generated from this file:</p>
  
  <pre><code>/* Small devices (tablets, 768px and up) */
  
  @media (min-width: 768px) {
      /* center the mainContainer */
  
      .outer {
          display: table;
          position: absolute;
          height: 100%;
          width: 100%;
      }
      .mainContainer {
          display: table-cell;
          vertical-align: middle;
      }
      .appContainer {
          width: 95%;
          border-radius: 50%;
      }
      .heightElement {
          height: 0;
          padding-bottom: 100%;
      }
  }
  </code></pre>
  
  <p>Can somebody please explain where the _ngcontent-mav tag comes from, what does it stand for and how to get rid of it?</p>
  
  <p>I think this is the reason why my style is not getting applied to my templates.</p>
  
  <p>If you need more info about the app structure, please checkout my <a href="https://github.com/Shooshte/PortfolioV3">gitRepo</a>, or ask and I'll add the code to the question.</p>
  
  <p>Thanks for the help.</p>