Layout Service

Service Injection

The layout service is automatically injected into all layout templates, and you can access it as FlexiLayout. If you would like to use it elsewhere, you can always inject it manually. For example, in a component:

JavaScript

export default Ember.Component.extend({
  layoutService: Ember.inject.service('device/layout')
});

Layout Booleans

Layout booleans are available for use in any layout template. They will be of the format is{breakpointName} For instance, for the mobile breakpoint, you can include:

Handlebars

{{#if FlexiLayout.isMobile}}

{{/if}}

There are also isAtLeast variants of these booleans. If you wanted to conditionally render something from tablet breakpoint up, you could do:

Handlebars

{{#if FlexiLayout.isAtLeastTablet}}

{{/if}}

Events

The layout service now uses Evented and triggers events you can subscribe to when width or height change.

The available events are:

• width-change
• height-change
• resize

JavaScript

import Component from 'ember-component';
import service from 'ember-service/inject';

export default Component.extend({
  layoutService: service('device/layout'),
  init() {
    this._super();
    
    this.get('layoutService').on('width-change', function() {
      console.log('Width changed!');
    });
    
    this.get('layoutService').on('height-change', function() {
      console.log('Height changed!');
    });
    
    this.get('layoutService').on('resize', function() {
      console.log('Width and/or height changed!');
    });
  }
});