Angular2 - adding [_ngcontent-mav-x] to styles
<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>