Responsive design in 2+ angular

Asked

Viewed 733 times

3

Is it possible through the 2+ angle to get the size and width of the browser and from there send this data to the css in order to make it responsive? Is there any other way to leave responsive without media queries?

I know there is the following developer who can get the size and width of the browser, but there is some way through these values to make the design responsive?

Grateful

@HostListener('window:resize', ['$event'])
css angular responsive-layout
  • 2

    See that a "responsive design" is achieved with css, and not with the framework javascript that you’re using, be it angular, react or any other, having to write code to do what the browser already does for you using css. Just punctuated that if you still want to do using javascript, language itself can obtain this information, the object window.screen return width and height. Also, you can have the size of the area effectively "usable" with window.innerWidth and window.innerHeight.

1 answer

1

You can use media query in your css normally. If you want to use ngIf to dynamically remove gift elements take a look at my answer here How to work with Angular ngIF with screen resolution?

Catching width onInit

public innerWidth: any;
ngOnInit() {
    this.innerWidth = window.innerWidth;
}

To keep updated on resize.

@HostListener('window:resize', ['$event'])
onResize(event) {
  this.innerWidth = window.innerWidth;
}

Html

<div *ngIf="innerWidth > algumNumero">

Browser other questions tagged css angular responsive-layout

You are not signed in. Login or sign up in order to post.