angular - Angular2 change action based on css attributes / screen size -


i'm creating kind of inbox screen. have menu on left side, , next there list of messages. created screen of bootstrap's grid system.

when select message show @ right side of screen. when screen small, hides message (hidden-xs, hidden-sm). should happen when select message should show on same screen, works already. when screen small should navigate different page.

the question got how change action based on screen size or css attribute (visibility: hidden)?

so when screen md or lg message displays on same screen, else route component.

you have use observable of client window size, can done using @angular/flex-layout, can find api here.

your-component.component.ts

import { component, afterviewinit } '@angular/core'; import { observablemedia, mediachange } '@angular/flex-layout'; import { subscription } 'rxjs/rx';  @component({     selector: 'app-your-component',     templateurl: './your-component.component.html',     styleurls: ['./your-component.component.css'] }) export class yourcomponentcomponent implements afterviewinit {      // subscription of observer of screen size     mediaquery$: subscription;      // 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 action in xs or sm (small screen)             } else {                 // here goes code action in gt-sm (bigger screen)             }         });     } } 

hope can you!


Comments

Popular posts from this blog

java - Run spring boot application error: Cannot instantiate interface org.springframework.context.ApplicationListener -

reactjs - React router and this.props.children - how to pass state to this.props.children -

Excel VBA "Microsoft Windows Common Controls 6.0 (SP6)" Location Changes -