<LiquidOutlet />

Acts just like a normal Ember {{outlet}} , except:

  • it respects the transition map and lets you animate between routes.
  • it wraps its content in a non-virtual view, meaning that it adds markup. See the Common Behavior and Options that apply to all liquid-fire helpers.
  • it does not support the view option to override its view class.

It otherwise does everything {{outlet}} does, including named outlets (like <LiquidOutlet @inputOutletName="sidebar" /> ).

When to use it

Use this when you want to animate the transitions between routes.

Demo

Notice that the URL changes when you click the links — these are real route transitions.

Demo template: 

<LiquidOutlet @class="demo-container" />

Demo transition map: 

this.transition(
  this.fromRoute('helpers-documentation.liquid-outlet.index'),
  this.toRoute('helpers-documentation.liquid-outlet.other'),
  this.use('toLeft'),
  this.reverse('toRight'),
);