---
layout: "fluid/docs_base"
version: "<$ version.current.name $>"
versionHref: "<$ version.current.href $>"
path: "<$ doc.path $>"
category: api
id: "<$ doc.name|lower|replace(' ','-') $>"
title: "<@ if doc.docType == "directive" @><$ doc.name | dashCase $><@ else @><$ doc.name $><@ endif @>"
header_sub_title: "Ionic API Documentation"
doc: "<$ doc.name $>"
docType: "<$ doc.docType $>"
<@ if doc.demo @>show_preview_device: true
preview_device_url: "<$ doc.demo $>www/"
angular_controller: APIDemoCtrl <@ endif @>
---


<@ macro paramList(paramData) -@>
  <@- if paramData -@><span class="params">(
    <@- for param in paramData -@>
      <span class="param"><$ param | escape $><@ if not loop.last @>, <@ endif @></span>
    <@- endfor @>)</span>
  <@- endif @>
<@- endmacro -@>

<@ macro returnObject(params) -@>
  <@- if params -@>
    <table class="table returns-object-table param-table">
      <thead>
        <tr>
          <th>Property</th>
          <th>Type</th>
          <th>Details</th>
        </tr>
      </thead>
      <tbody>
        <@ for param in params @>
        <tr>
          <td class="fixed-width">
            <$ param.key $>
          </td>
          <td>
            <$ param.type | code $>
          </td>
          <td>
            <$ param.description | marked $>
          </td>
        </tr>
        <@ endfor @>
      </tbody>
    </table>
  <@- endif @>
<@- endmacro -@>

<@ macro githubViewLink(doc) -@>
  <a href="https://github.com/<$ versionInfo.gitRepoInfo.owner $>/<$ versionInfo.gitRepoInfo.repo $>/tree/master/<$ doc.fileInfo.relativePath $>#L<$ doc.location.start.line+1 $>-L<$ doc.location.end.line+1 $>"><$ doc.fileInfo.relativePath $> (line <$ doc.location.start.line+1 $>)</a>
<@- endmacro -@>

<@ macro paramTable(params, isDirective) -@>
<table class="table param-table" style="margin:0;">
  <thead>
    <tr>
      <th><@ if isDirective @>Attr<@ else @>Param<@ endif @></th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    <@ for param in params @>
    <tr>
      <td>
        <$ param.name $>
        <@ if param.alias @>| <$ param.alias $><@ endif @>
        <@ if param.type.optional @><div><em>(optional)</em></div><@ endif @>
      </td>
      <td>
        <$ typeList(param.typeList) $>
      </td>
      <td>
        <$ param.description | marked $>
        <@ if param.default @><p><em>(default: <$ param.default $>)</em></p><@ endif @>
      </td>
    </tr>
    <@ endfor @>
  </tbody>
</table>
<@- endmacro -@>

<@ macro inputTable(params, isDirective) -@>
<table class="table param-table" style="margin:0;">
  <thead>
    <tr>
      <th>Attr</th>
      <th>Type</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    <@ for param in params @>
    <tr>
      <td><$ param.name $></td>
      <td><code><$ param.type $></code></td>
      <td><$ param.description | marked $></td>
    </tr>
    <@ endfor @>
  </tbody>
</table>
<@- endmacro -@>

<@ macro outputTable(params, isDirective) -@>
<table class="table param-table" style="margin:0;">
  <thead>
    <tr>
      <th>Attr</th>
      <th>Details</th>
    </tr>
  </thead>
  <tbody>
    <@ for param in params @>
    <tr>
      <td><$ param.name $></td>
      <td><$ param.description | marked $></td>
    </tr>
    <@ endfor @>
  </tbody>
</table>
<@- endmacro -@>

<@- macro functionSyntax(fn) @>
  <@- set sep = joiner(',&nbsp;') -@>
  <code><$ fn.name $><@- if not fn.isProperty @>(<@ endif -@><@- for param in fn.params @><$ sep() $>
  <@- if param.type.optional @>[<@ endif -@>
  <$ param.name $>
  <@- if param.type.optional @>]<@ endif -@>
  <@ endfor @><@- if not fn.isProperty @>)<@ endif -@></code>
  <@ if fn.alias @><small>(alias: <$ fn.alias $>)</small><@ endif @>
<@ endmacro -@>

<@ macro typeList(types) -@>
  <@ set separator = joiner("|") @>
  <@ for type in types @><$ separator() $><$ type | code $><@ endfor @>
<@- endmacro -@>

<@- macro typeInfo(fn) -@>
  <$ typeList(fn.typeList) $> <$ fn.description | marked  $>
<@- endmacro -@>

<@- macro sassTable(files) -@>
<div id="sass-variables" ng-controller="SassToggleCtrl">
  <div class="sass-platform-toggle">
    <@ if files.length > 1 @>
      <@ for file in files @>
      <@ if loop.first @>
      <a ng-init="setSassPlatform('<$ file.platform $>')" ng-class="{ active: active === '<$ file.platform $>' }" ng-click="setSassPlatform('<$ file.platform $>')" ><$ file.platform | platform $></a>
      <@ else @>
      <a ng-class="{ active: active === '<$ file.platform $>' }" ng-click="setSassPlatform('<$ file.platform $>')"><$ file.platform | platform $></a>
      <@ endif @>
      <@ endfor @>
    <@ else @>
    <h3 ng-init="setSassPlatform('<$ files[0].platform $>')"><$ files[0].platform | platform $></h3>
    <@ endif @>
  </div>


  <@ for file in files @>
  <table ng-show="active === '<$ file.platform $>'" id="sass-<$file.platform $>" class="table param-table" style="margin:0;">
    <thead>
      <tr>
        <th>Property</th>
        <th>Default</th>
        <th>Description</th>
      </tr>
    </thead>
    <tbody>
      <@ for prop in file.props @>
      <tr>
        <td><code>$<$ prop.name $></code></td>
        <@ if prop.default @>
          <td><$ prop.default | code $></td>
        <@ else @>
          <td>

          </td>
        <@ endif @>
        <td><$ prop.description | marked $></td>
      </tr>
      <@ endfor @>
    </tbody>
  </table>
  <@  endfor @>
</div>
<@- endmacro -@>

<@ block body @>


<@ block content @>

<@ block header @>

<h1 class="api-title">
<a class="anchor" name="<$ doc.name | dashCase $>" href="#<$ doc.name | dashCase $>"></a>
<@ if doc.docType == "directive" @>
<$ doc.name | dashCase $>
<@ else @>
<$ doc.name $>
<@- if doc.decorators[0].argumentInfo[0].selector @>
<h3><code><$ doc.decorators[0].argumentInfo[0].selector $></code></h3>
<@ endif -@>
<@ endif @>

<@ if doc.parent @>
<br />
<small>
Child of <$ doc.parent $>
</small>
<@ endif @>

<@ if doc.delegate @>
<br/>
<small>
Delegate: <$ doc.delegate $>
</small>
<@ endif @>

</h1>

<a class="improve-v2-docs" href="http://github.com/ionic-team/ionic/edit/master/<$ doc.fileInfo.projectRelativePath $>#L<$ doc.location.start.line $>">
Improve this doc
</a>

<@ if doc.codepen @>
{% include codepen.html id="<$ doc.codepen $>" %}
<@ endif @>

<@ endblock @>

<@ block description @>
<$ doc.description | marked $>
<@ endblock @>


<!-- @usage tag -->
<@ if doc.usage @>
<h2><a class="anchor" name="usage" href="#usage">Usage</a></h2>
<@ block usage @>
<$ doc.usage | marked $>
<@ endblock @>
<@ endif @>

<!-- @property tags -->
<@ if doc.properties @>
<h2><a class="anchor" name="attributes" href="#attributes">Attributes</a></h2>
<table class="table" style="margin:0;">
<thead>
<tr>
<th>Attribute</th>

<@ set hasTypes = false @>
<@ for prop in doc.properties @>
<@ if prop.type @>
<@ set hasTypes = true @>
<@ endif @>
<@ endfor @>
<@ if hasTypes @>
<th>Type</th>
<@ endif @>

<th>Description</th>
</tr>
</thead>
<tbody>
<@ for prop in doc.properties @>
<tr>
<td>
<$ prop.name $>
</td>

<@ if hasTypes @>
<td>
<$ prop.type.name $>
</td>
<@ endif @>

<td>
<$ prop.description $>
</td>
</tr>
<@ endfor @>
</tbody>
</table>
<@ endif @>


<@- if doc.statics.length -@>
<h2><a class="anchor" name="static-members" href="#static-members">Static Members</a></h2>
<@- for method in doc.statics @><@ if not method.internal @>
<div id="<$ method.name $>"></div>
<h3><a class="anchor" name="<$ method.name $>" href="#<$ method.name $>"><$ functionSyntax(method) $></a></h3>

<$ method.description $>

<@ if method.params @>
<$ paramTable(method.params) $>
<@ endif @>

<@ if method.this @>
<h4> Method's `this`
<$ method.this $>
</h4>
<@ endif @>

<@ if method.returns @>
<div class="anchor" class="return-value">
<i class="icon ion-arrow-return-left"></i>
<b>Returns:</b> <$ typeInfo(method.returns) $>
<@ if method.returnsObjectParams @>
<$ returnObject(method.returnsObjectParams) $>
<@ endif @>
</div>
<@ endif @>
<@ endif @>
<@ endfor -@>
<@ endif @>


<!-- instance methods on the class -->
<@- if doc.members and doc.members.length @>

<h2><a class="anchor" name="instance-members" href="#instance-members">Instance Members</a></h2>
<@- for method in doc.members @>

<div id="<$ method.name $>"></div>

<h3>
<a class="anchor" name="<$ method.name $>" href="#<$ method.name $>">
<$ functionSyntax(method) $>
</a>
</h3>

<$ method.description $>

<@ if method.params @>
<$ paramTable(method.params) $>
<@ endif @>

<@ if method.this @>
<h4> Method's `this`
<$ method.this $>
</h4>
<@ endif @>

<@ if method.returns @>
<div class="return-value">
<i class="icon ion-arrow-return-left"></i>
<b>Returns:</b> <$ typeInfo(method.returns) $>
<@ if method.returnsObjectParams @>
<$ returnObject(method.returnsObjectParams) $>
<@ endif @>
</div>
<@ endif @>

<@ endfor -@>

<@- endif -@>


<@- if doc.inputs and doc.inputs.length @>
<!-- input methods on the class -->
<h2><a class="anchor" name="input-properties" href="#input-properties">Input Properties</a></h2>
<$ inputTable(doc.inputs) $>
<@- endif -@>

<@- if doc.outputs and doc.outputs.length @>
<!-- output events on the class -->
<h2><a class="anchor" name="output-events" href="#output-events">Output Events</a></h2>
<$ outputTable(doc.outputs) $>
<@- endif -@>


<@ block advanced @>
<@- if doc.advanced -@>
<h2><a class="anchor" name="advanced" href="#advanced">Advanced</a></h2>
<$ doc.advanced | marked $>
<@- endif -@>
<@ endblock @>

<@ if doc.sassVariables @>
  <h2 id="sass-variable-header"><a class="anchor" name="sass-variables" href="#sass-variables">Sass Variables</a></h2>
  <$ sassTable(doc.sassVariables) $>
<@ endif @>


<!-- related link -->
<@- if doc.see @>

<h2><a class="anchor" name="related" href="#related">Related</a></h2>
<@ for s in doc.see @>
<$ s | safe $> <@- if not loop.last @>,<@- endif -@>
<@- endfor -@>

<@- endif -@>


<!-- end content block -->
<@ endblock @>

<!-- end body block -->
<@ endblock @>