Angular2 change action based on css attributes / screen size

Question

I'm creating some kind of inbox screen. So I have my menu on the left side, and next to it there is a list of messages. I created this screen with the help of bootstrap's grid system.

When you select a message it will show up at the right side of the screen. But when the screen is too small, it hides the message (hidden-xs, hidden-sm). What should happen is that when I select a message it should show up on the same screen, this works already. But when the screen is to small it should navigate to a different page.

The only question I got is how do I change the action based on the screen size or css attribute (visibility: hidden)?

So when the screen is md or lg the message displays on the same screen, else it will route to another component.

Maybe this will help you: http://stackoverflow.com/a/15150381/1518765 (or one of the other answers in that thread) - depending on the detected size, you implement a switch/case in your listener-method — olsn, Mar 17 '16 at 09:19

score 1 · Answer 1 · answered Oct 18 '17 at 22:55

You have to use an observable of the client window size, this can be done by using @angular/flex-layout, you can find the API here.

your-component.component.ts

import { Component, AfterViewInit } from '@angular/core';
import { ObservableMedia, MediaChange } from '@angular/flex-layout';
import { Subscription } from 'rxjs/Rx';

@Component({
    selector: 'app-your-component',
    templateUrl: './your-component.component.html',
    styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent implements AfterViewInit {

    // Subscription of the observer of the screen size
    mediaQuery$: Subscription;

    // The active media query (xs | sm | md | lg | xl)
    activeMediaQuery: string;

    constructor(
        private observableMedia: ObservableMedia
    ){}

    ngAfterViewInit () {

        this.mediaQuery$ = this.observableMedia.subscribe( (change: MediaChange) => {
            this.activeMediaQuery = `${change.mqAlias}`;
            if (this.activeMediaQuery === 'xs' || this.activeMediaQuery === 'sm') {
                // Here goes code for action in xs or sm (small screen)
            } else {
                // Here goes code for action in gt-sm (bigger screen)
            }
        });
    }
}

Hope that this can help you!

Angular2 change action based on css attributes / screen size

1 Answers1