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
Post a Comment