Angular-align NPM

angular-align

angular-align is a set of angular directives that allow to align elements according to another one's position, making use of absolute positioning.

DEPRECATED: use angular-position instead.

An element can be placed:

Above
Below
To Left
To Right

Purpose

It is recommended to use CSS whenever it's possible, but in cases like when you have an element with absolute position and you still need its bounds to place other elements accordingly, it's not that simple.

That's why this directives were made and solve the problem with no effort.

Setup

Install via npm:

npm install --save angular-align

Include the alignment module in the imports list of your app's module:

import { AlignmentModule } from 'angular-align';

@NgModule({
    imports: [
        AlignmentModule
    ]
})

Usage

There are two ways to perform the alignment:

- Basic

You can align an element on another by simply placing the anchor element above/below the element in the HTML markup hierarchy, depending on the type of alignment.

The order is intuitive:

aboveOf: place the element before the anchor;
belowOf: place the element after the anchor;
toLeftOf: place the element before the anchor;
toRightOf: place the element after the anchor;

Example:

<span aboveOf>Will be placed above the div</span>
<div>Element auto-assigned as the anchor</div>
<span belowOf>Will be placed below the div</span>

- With ID

You can align an element on another by giving its id as the parameter:

<span [aboveOf]="anchor-element">Alignment Element</span>
<div id="anchor-element"></div>

Options

The alignment behavior can be customized with the following attributes:

<span aboveOf [measurementDuration]="8000" [applyTranslation]="true" [adjustOnWindow]="true"></span>

- measurementDuration: number

Defines the amount of time, in milliseconds, that the directive should be measuring the anchor.

Because elements usually take some time to be completely initialized and take their final position and dimensions, it's useful to set some seconds of measurement instead of only once.

Defaults to 8 seconds.