Interfaces

Interfaces define a component’s shape by defining attributes, events, or methods that any implementing component contains. To use an interface, a component must implement it. An interface can’t be used directly in markup.

An interface starts with the <aura:interface> tag, and can contain only these tags:

<aura:attribute>
This tag defines an attribute. An interface can have zero or more attributes.

To set the value of an attribute inherited from an interface, redefine the attribute in the sub component using <aura:attribute> and set the value in its default attribute. When you extend a component, you can use <aura:set> in a sub component to set the value of any attribute that’s inherited from the super component. However, this usage of <aura:set> doesn’t work for attributes inherited from an interface.

Note

<aura:registerEvent>
This tag registers an event that can be fired by a component that implements the interface. There’s no logic in the interface for firing the event. A component that implements the interface contains the code to fire the event.
<aura:method>
This tag defines a method as part of the API of a component that implements the interface. There’s no logic for the method in the interface. A component that implements the interface contains the method logic.

You can’t use markup, renderers, controllers, or anything else in an interface.

Implement an Interface

To implement an interface, set the implements system attribute in the <aura:component> tag to the name of the interface that you are implementing. For example:

<aura:component implements="mynamespace:myinterface" >

A component can implement an interface and extend another component.

<aura:component extends="ns1:cmp1" implements="ns2:intf1" >

An interface can extend multiple interfaces using a comma-separated list.

<aura:interface extends="ns:intf1,ns:int2" >

Since there are fewer restrictions on the content of abstract components, they are more common than interfaces. A component can implement multiple interfaces but can only extend one abstract component, so interfaces can be more useful for some design patterns.

Example

Here’s an example of an interface.

<aura:interface>
    <aura:attribute name="value" type="String"/>

    <aura:registerEvent name="onItemSelected" type="ui:response"
      description="The event fired when the user selects an item" />

    <aura:method name="methodFromInterface">
        <aura:attribute name="stringAttribute" type="String" default="default string"/>
    </aura:method>
</aura:interface>