1

Veja logo abaixo como fica a página Web;

inserir a descrição da imagem aqui

Agora observe a tela com resolução abaixo de 992px

inserir a descrição da imagem aqui

Isso acontece por causa da coluna css

Eu gostaria de tirar essa coluna quando atingisse menos de 992px com ngIF do angular, é possível ? Se for possível como devo fazer?

Esse aqui é código?

<div class="container">
    <div class="ui-g">
        <div class="ui-g-12  ui-lg-3"></div>
        <div class="ui-g-12  ui-lg-3 conheca_projeto"><h1><p>CONHEÇA</p>  O PRJETO</h1></div>
        <div class="ui-g-2  ui-lg-2">
            <div class="seta_topo animated  fadeInDown">
                <img src="assets/img/seta.JPG" height="250" >
            </div>
        </div>
        <div class="ui-g-12  ui-lg-4  seja_doador">
                <h1>SEJA UM DOADOR</h1>
            </div>
        <div class="ui-g-12  ui-lg-3"></div>
    </div>
</div>
2
  • E se ela fosse ocultada utilizando Media Queries com CSS?
    – David
    Commented 8/06/2018 às 16:57
  • 1
    Realizar essa implementação somente fará desaparecer da tela, porém não irá tirar o componente e ngIF atuar em cima do componente.
    – user10264
    Commented 8/06/2018 às 17:51

2 Respostas 2

2

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">
3
  • acabei de ver agora sua postagem, ainda vou testar, mas não consigo entender que essa sugestão funcione porque nela não existe fixação do tamanho da resolução para ele ser executado, mas é como tinha dito antes, eu ainda não testei.
    – user10264
    Commented 12/06/2018 às 8:16
  • Funcionou cara, tu é fera hahaha, muito obrigado
    – user10264
    Commented 12/06/2018 às 13:04
  • valeu man, funcionou redondinho aqui... Commented 15/02 às 20:56
1

Você poderia retirar o componente utilizando media queries.

Caso sirva para você, é possível fazer desta forma:

 @media screen and (max-width: 992px) {
   .conheca_projeto{  display: none ; } 
 }
4
  • Eu não tive sucesso com essa sugestão :(
    – user10264
    Commented 8/06/2018 às 19:50
  • especificamente qual foi o problema? Commented 11/06/2018 às 10:39
  • Gostaria que a acoluna que se encontra a imagem seta fosse retirada quando atingisse 992 px, se não entender eu explico novamente sem problema.
    – user10264
    Commented 12/06/2018 às 8:08
  • 1
    Sim, eu entendi. Teoricamente essa media querie que eu passei resolveria. Tu consegue aplicar ela e dar uma olhada no inspecionar elemento se o display dela ficou como none? Commented 12/06/2018 às 12:29

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