Multi tool use

How to display alert box when the screen size is lesser than tablet view (768 * 1024) in angular efficiently?

To achieve the above, i.e to display the alert box when the screen size is lesser than (768 * 1024) i did like below

@HostListener("window:resize", ["$event"])
onResize(event) {
if (event.target.innerWidth < 1024 || event.target.innerHeight < 768) {
alert( "outer height" + event.target.outerHeight + "," + event.target.outerWidth);
alert("inner height" + event.target.innerWidth + "," + event.target.innerHeight);
}
}


I'm not sure which is similar to screen size, i gave inner height but still it is little different.

So how can i do the above correct and efficiently?

Any help would be appreciated. Thanks!

2 Answers
2

I think for your use case you need to use the outerHeight / outerWidth since it is not affected by the console panel opening or something else. So it is much suitable to check for tablet vs desktop.

And for efficiency you should use Observable to listen to the window.resize event as it allow you to throttle the observer logic.

Here is a example inspire by this stackblitz (not mine)

Observable.fromEvent(window, 'resize')
.auditTime(100) // <- or whatever timer you want
.map(event => <WindowSize>{
width: event['currentTarget'].outerWidth,
height: event['currentTarget'].outerHeight
})
.filter(windowSize => windowSize.width < 1024 || windowSize.height < 768)
.subscribe((windowSize) => {
// this callback we be called only if size is less than tablet view
doSomeStuff();
})


I modified little bit of above solution and then it works perfectly and this is efficient too

let windowDimensions = () => {
let dimensions = {
width: window.innerWidth,
height: window.innerHeight
};
return dimensions;
};

constructor() {
let resizeEvtObs = fromEvent(window, "resize")
.pipe(debounceTime(1000),
map(windowDimensions));

resizeEvtObs.subscribe(val => {
this.windowWidth = val.width;
this.windowHeight = val.height;
if (console) {
console.log("Dimensions updated to", this.windowWidth, this.windowHeight);
}
});

}


By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.