How to work with Angular ngIF with screen resolution?

Question

See below how the web page looks;

Now look at the screen with resolution below 992px

This happens because of the css column

I would like to remove this column when it reaches less than 992px with ngIF of the angular, is it possible ? If possible as I should?

This one is code?

<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>

Answer 1

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">

Answer 2

You could remove the component using media queries.

If it suits you, you can do it this way:

 @media screen and (max-width: 992px) {
   .conheca_projeto{  display: none ; } 
 }