How to conditionally hide/show headers and footers in angularjs depending on the window width?

Question

I am dealing with headers and footers in angularjs. I have different header for mobile view and webview. How do I conditionally handle headers in angularjs depending on the window width.

Right now I am doing that with jquery as follows:

if (window.matchMedia('(max-width: 768px)').matches) {
 //hidewebheader;
//show mobileheader;
} else {
  //hidemobileheader;
  //showwebheader;
}

How do i achieve this in angularjs. There is one file of header.html which has 2 different markups for web and mobile headers.

Check this out, it may help you: http://stackoverflow.com/questions/7715124/do-something-if-screen-width-is-less-than-960-px — Teuta Koraqi, Jun 17 '16 at 11:23
You can do the same with angular too I guess, just when you have a '$' sign, put angular.element instead — Teuta Koraqi, Jun 17 '16 at 11:29
Why would you do this programmatically rather than with CSS and media queries? http://www.w3schools.com/cssref/css3_pr_mediaquery.asp — tokkov, Jun 17 '16 at 12:39

score 1 · Answer 1 · answered Jun 17 '16 at 18:15

inject $window. I know there's $window.innerHeight so I GUESS there's $window.innerWidth (didn't try it). use $scope.$watch on the width and use ng-if to decide what header you are showing right now.

by the way, we use bootstrap and there is a good way to do it there with css only solution. I think bootstrap uses @media behind the scene. I'm not sure that you need to use angular or js for your problem. use css.

How to conditionally hide/show headers and footers in angularjs depending on the window width?

1 Answers1