*ngIf hide some content on mobile screen, Angular 4

Question

I have:

showHide: false;


  Content



  Button visit         


        

Answer 1

Just came across this answer and I wanted something that worked responsively as well as on-resize. I set 992px as the breakpoint because I'm also using bootstrap lg breakpoints concurrently.

export class TestComponent implements OnInit {

  constructor() { }

  isMobile = false;
  getIsMobile(): boolean {
    const w = document.documentElement.clientWidth;
    const breakpoint = 992;
    console.log(w);
    if (w < breakpoint) {
      return true;
    } else {
      return false;
    }
  }

  ngOnInit() {
    this.isMobile = this.getIsMobile();
    window.onresize = () => {
      this.isMobile = this.getIsMobile();
    };
  }
}

Then in the HTML