BackgroundComponent Anchor

The Anchor component automatically handles anchor tags tomake them properly work with routing and still keep theirusual behavior.

alias

{ default } from mahalo/components/anchor

Hierarchy

Index

Constructors

constructor

Properties

click

click:EventListener

The listener that is used for the interceptor.

controller

The controller of the component.

element

element:Element

The element of the component.

href

href:string

The original value of the href attribute.

path

path:string

The resolved path that the element links to.

Static bindings

bindings:object

This static property lets you define listeners that will be executed whenproperties of the component change.

It should be a map where the keys are paths that should be watched on the component andthe values are names of methods that will be invoked on the component instance.

Example

In the following example you can see a component that reacts to changesin the size of the defining element.

export default class MyComponent extends Component {    static inject: {element: Element};    static bindings = {        'element.clientHeight': 'heightChange'    };    width: number;    heightChange(height: number) {        this.width = height * 2;    }}

Static locals

locals:string[]

This static property defines which properties of the componentshould be available in its local scope which will be used by thecomponent's behaviors as well as by the defining element's children.

Values of this array represent the name of one of the component'sproperties that will be pushed to the local scope.

Example
export default class MyComponent extends Component {    static locals = ['firstName', 'lastName'];}

Static template

template:string | Template

When a string is given it must contain the html of the component's template.

In general you should not make use of this at all. Your template should bein a separate file with the same name and in the same folder as your component'sTypeScript file. This feature is only for advanced usage (for example having an emptytemplate by setting this to an empty string) or rapid prototyping.

Methods

enter

  • enter(): void
  • Returns void

init

  • init(): void
  • Initializes the click event that intercepts the default behaviorbut makes sure routing is active first.

    Returns void

leave

  • leave(): void
  • Returns void

ready

  • ready(): void
  • Returns void

remove

  • remove(): void

Object literals

Static attributes

attributes:object

href

href:string = ""

Static inject

inject:object

controller

controller:ComponentController = ComponentController

element

element:Element = Element