# Hide an element based on window size

> In the previous TIL, I posted the code for window resize event listener, now we will use it to show/hide elements. Typescript Template Only show if window width is greater than 720 pixels.

- Canonical: https://preview.arshadmehmood.com/today-i-learned/angular2/hide-element-based-on-window-size/
- Section: angular2
- Author: Arshad Mehmood

In the [previous TIL](/today-i-learned/angular2/add-window-resize-event-listener-comopnent/), I posted the code for window resize event listener, now we will use it to show/hide elements.

### Typescript
```ts
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  host: {
    '(window:resize)': 'onResize($event)'
  }
})
public windowWidth: any;
export class AppComponent{
   constructor() {
    this.windowWidth = document.body.clientWidth;
   }
   onResize(event){
     this.windowWidth = event.target.innerWidth;
   }
}
```

### Template
> Only show if window width is greater than 720 pixels.
```html
<div *ngIf="windowWidth > 720"></div>

```