Empresas
Empregos
  • Sobre nós
  • Soluções
    • Publicação de vagas
      Publique sua vaga e receba candidatos qualificados em 48h.
    • Avaliações de candidatos
      Mais de 500 testes técnicos e psicológicos, mais anti-fraude.
    • Headhunting
      Busca executiva personalizada do início ao fim.
    • Folha de Pagamento + EOR
      Dispersão de folha e EOR em mais de 15 países da LATAM.
  • Preços
  • Empregos

0

218
Visualizações
Show warning if user's browser width is less than x

I have an Angular application which is best viewed in resolution higher than 1600 x 900.

Is there anyway I can automatically show a warning message to the user if user is trying to view the application with less than 1600 width (either in restored mode or using lower resolution)? If possible, using bootstrap css.

about 4 years ago · Juan Pablo Isaza
2 Respostas
Responde à pergunta

0

yes you can get the screen width using window object

inside your onInit in TS

  import { HostListener } from '@angular/core';
  public innerWidth: any;
  ngOnInit() {
    this.innerWidth = window.innerWidth;
  }
  @HostListener('window:resize', ['$event'])
  onResize(event) {
  //you'll get the width
    this.innerWidth = window.innerWidth;
    console.log('this.innerWidth', this.innerWidth);
  }

Add your warning code inside onResize or handle accordingly.

about 4 years ago · Juan Pablo Isaza Relatório

0

We use hostlistener to check window size during resize, but we also check width on component init ngOnInit() because component might start without resize event.

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
  host: {
    '(window:resize)': 'onWindowResize($event)',
  },
})
export class AppComponent implements OnInit {
  name = 'Angular';
  width: number = window.innerWidth;
  height: number = window.innerHeight;
  goodWidth: number = 1600;

  ngOnInit(): void {
    this.getInitSize();
  }

  getInitSize() {
    this.width = window.innerWidth;
    this.height = window.innerHeight;
    this.shouldAlert();
  }

  onWindowResize(event) {
    this.width = event.target.innerWidth;
    this.height = event.target.innerHeight;
    this.shouldAlert();
  }

  shouldAlert() {
    if (this.width < this.goodWidth) {
      window.alert(
        'warning message to the user if user is trying to view the application with less than 1600 width'
      );
    }
  }
}

Working example: https://stackblitz.com/edit/angular-window-width-1qbtpx?file=src%2Fapp%2Fapp.component.ts

about 4 years ago · Juan Pablo Isaza Relatório
Responde à pergunta
Encontrar trabalhos remotos

Descubra a nova forma de encontrar um emprego!

melhores empregos
Principais categorias de trabalho
Empresas
Postar vaga Preços Comercial
Jurídico
Termos e Condições Política de privacidade
© 2026 PeakU Inc. All Rights Reserved.
Andres GPT
Recomende algumas ofertas para mim
Preciso de ajuda