3

É possível através do angular 2+ conseguir o tamanho e largura do navegador e a partir disso, enviar esses dados para o css de modo a deixar responsivo? Existe alguma outra forma de deixar responsivo sem media queries?

Sei que existe o seguinte decorator que consegue obter o tamanho e largura do navegador, mas existe alguma maneira de através destes valores deixar o design responsivo?

Grato

@HostListener('window:resize', ['$event'])
1
  • 2
    Veja que um "design responsivo" se consegue com css, e não com o framework javascript que esteja usando, seja angular, react ou qualquer outro, tendo que escrever código para fazer o o que o navegador já faz pra você usando css. Apenas pontuado isso, se ainda quiser fazer usando javascript, a própria linguagem consegue obter essa informação, o objeto window.screen retornar largura e altura. Além disso, você pode ter o tamanho da área efetivamente "usável" com window.innerWidth e window.innerHeight. Commented 25/06/2018 às 12:11

1 Resposta 1

1

Você pode usar o media query no seu css normalmente. Se você quiser usar o ngIf para remover elementos do dom dinamicamente da uma olhada na minha reposta aqui Como trabalhar com ngIF do Angular com resolução de tela?

Pegando width onInit

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

Pra manter atualizado no resize.

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

Html

<div *ngIf="innerWidth > algumNumero">
0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .