Angular2 2.4.3 and responsive web-design: using media queries seem not to work

Question

When using Angular2 2.4.3 in combination with CSS3 media query features either:

• directly embedded within the Angular2 component (see below example)

or

• centrally referenced in "index.html" using a "styles.css"

the html component in both cases is not formatted according to the media query specifications. Instead, only the non-media-query CSS parts are rendered.

import {Component} from '@angular/core';

@Component({
    /* necessary for using relative paths (only works in combination with
     * 'commonjs'-transpiled modules, see:
     * https://angular.io/docs/ts/latest/cookbook/component-relative-paths.html
     */
    moduleId: module.id,
    selector: 'login',
    templateUrl: '../templates/login.component.html',
    styles: [`
        @media only screen and (min-width: 840px)
        .layout {
            font-size: 58px;
        }
        .layout { background: green; }
    `]
})
export class LoginComponent {        
}

Hint: for sure, I'm using a desktop monitor with a width-resolution >840px ;)

Am I doing something wrong or are media queries not yet supported by Angular2? Maybe, I have to do additional stuff to let Angular2 detect the used media correctly?

Answer 1

@Holger, the problem is not with Angular but in your style implementation. You have omitted curly brackets around the styles within your media query. It should look like below and I think it should solve your problem.

styles: [`
    @media only screen and (min-width: 840px) {
        .layout {
            width: 368px;
        }
    }
    .layout { background: green; }
`]