Ionic showWhen directive

posted in: Uncategorized | 3

Update: This directive has been added to GitHub as an Ionic Ion.

A question came up on the Ionic Forum asking if there was a prebuilt class to hide a div or column on a mobile screen. As an example, showing content on a tablet but hiding it on a smart phone. For its side menu directive, Ionic has a expose-aside-when attribute which is another directive that allows you to pass in a media query (or the word large which maps to a media query) that decides whether to show the side menu as a second column or behave as a side menu.

For example:

<ion-side-menus>
  <!-- Center content -->
  <ion-side-menu-content>
  </ion-side-menu-content>

  <!-- Left menu -->
  <ion-side-menu expose-aside-when="large">
  </ion-side-menu>
</ion-side-menus>

In this case, the side menu will act as a side menu if the width is less than 768px, but show the menu always open if the width is 768px or greater.

showWhen

I decided to take this directive and make some modifications to allow it to be used on any element. Example usage:

<div show-when="large">test</div>

Using my directive, this div will ONLY show on a tablet. Here’s what the directive looks like:

.directive('showWhen', ['$window', function($window) {
 return {
    restrict: 'A',
    link: function($scope, $element, $attr) {

	  function checkExpose() {
		var mq = $attr.showWhen == 'large' ? '(min-width:768px)' : $attr.showWhen;
		if($window.matchMedia(mq).matches){
			$element.removeClass('ng-hide');
		} else {
			$element.addClass('ng-hide');		
		}
	  }

	  function onResize() {
		debouncedCheck();
	  }

	  var debouncedCheck = ionic.debounce(function() {
		$scope.$apply(function(){
		  checkExpose();
		});
	  }, 300, false);

	  checkExpose();

	  ionic.on('resize', onResize, $window);

	  $scope.$on('$destroy', function(){
		ionic.off('resize', onResize, $window);
	  });

	}
  };
}]);

If the media query passed in the show-when attribute is false, the element will have the CSS class ng-hide removed. If it is true, the class will be added. ng-hide is the same class that is added and removed when using Angular’s ng-show and ng-hide.

I have also opened an issue on GitHub with Ionic to see if they are interested in adding this directive into the Ionic directives.

More Reading

showWhen Demo on CodePen
Original Question on Ionic Forum
Issue on GitHub
Ionic SideMenu exposeAsideWhen Docs

My name is Andrew McGivery. I currently work full time as an application developer at Manulife Financial in Canada. My current passion is building and leading highly engaged teams where employee happiness, learning, and growth is a priority.

3 Responses

  1. Thanks Andrew, this is exactly what I needed! It should even be an ionic-native directive. I’m used to Foundation Zurb framework which includes a complete and awesome bunch of CSS classes (“visibility classes”) to target various screen sizes. I regret their powerful grid system… :/

    • Hey Jiyuu,

      I actually submitted an issue on GitHub to include this in Ionic Core, but they decided it would make more sense as a separate module.

      Let me know if you need any assistance or have any ideas for these kind of modules!

  2. Very good. Thanks. Amazing directive for responsive design.

Leave a Reply