@anglr/animations

Angular library providing ready-to-use animated components and animation directives. It includes animated icon components with CSS-based animations and a directive for enabling enter/leave animations on dynamically created components.

Installation

npm install @anglr/animations

Peer Dependencies

• @angular/core >= 20.2.0
• @jscrpt/common >= 7.1.0
• tslib ^2.8.1

Features

• Animated icon components – standalone components with pure CSS animations
• AnimateDirective – declarative enter/leave animations for dynamically created elements
• Standalone – all components and directives are standalone, no module import needed
• OnPush – all components use ChangeDetectionStrategy.OnPush

Usage

AnimateDirective

Directive used for enabling enter/leave animations on elements (best suited for dynamically created components).

import {AnimateDirective} from '@anglr/animations';

@Component(
{
    imports: [AnimateDirective],
    template: 
    `
        <div animate
             [enterAnimation]="'fadeIn'"
             [leaveAnimation]="'fadeOut'">
            Content with enter/leave animations
        </div>
    `,
})
export class MyComponent {}

Inputs

| Input | Type | Default | Description | |-------|------|---------|-------------| | enterAnimation | string \| string[] | [] | Name or names of animations used when the element enters | | leaveAnimation | string \| string[] | [] | Name or names of animations used when the element leaves |

You can pass multiple animation names as an array:

<div animate
     [enterAnimation]="['fadeIn', 'slideDown']"
     [leaveAnimation]="['fadeOut', 'slideUp']">
</div>

Dynamic component usage

You can attach AnimateDirective to a dynamically created component using the directives option of createComponent. This enables enter/leave animations on a component that has no animation logic of its own.

First, define a simple component with no animation:

import {Component, ChangeDetectionStrategy} from '@angular/core';

@Component(
{
    selector: 'simple-dynamic',
    template: `<div>I am a dynamically created component with no animation logic!</div>`,
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class SimpleDynamicComponent
{
}

Then create it dynamically with AnimateDirective attached via the directives property:

import {Component, ChangeDetectionStrategy, ViewContainerRef, ComponentRef, viewChild} from '@angular/core';
import {AnimateDirective} from '@anglr/animations';

import {SimpleDynamicComponent} from './simpleDynamic.component';

@Component(
{
    selector: 'dynamic-sample-view',
    template: 
    `
        <button type="button" (click)="create()">Create</button>
        <button type="button" (click)="destroy()">Destroy</button>
        <ng-container #container />
    `,
    changeDetection: ChangeDetectionStrategy.OnPush,
})
export class DynamicSampleComponent
{
    private _componentRef: ComponentRef<SimpleDynamicComponent> | null = null;

    protected container = viewChild.required('container', {read: ViewContainerRef});

    public create(): void
    {
        if(this._componentRef)
        {
            return;
        }

        this._componentRef = this.container().createComponent(SimpleDynamicComponent,
        {
            directives:
            [
                {
                    type: AnimateDirective,
                    bindings:
                    [
                        inputBinding('enterAnimation', () => 'fade-in'),
                        inputBinding('leaveAnimation', () => 'fade-out'),
                    ],
                },
            ],
        });
    }

    public destroy(): void
    {
        if(!this._componentRef)
        {
            return;
        }

        this._componentRef.destroy();
        this._componentRef = null;
    }
}

DoubleRightIconSAComponent

An animated double-right chevron icon. Plays a sliding animation on click (mouseup).

import {DoubleRightIconSAComponent} from '@anglr/animations';

@Component(
{
    imports: [DoubleRightIconSAComponent],
    template: 
    `
        <span class="double-right-icon"></span>
    `,
})
export class MyComponent {}

The icon size scales with font-size (uses em units). Customize it via CSS:

.double-right-icon 
{
    font-size: 24px;
    color: #333;
}

UpDownCaretIconComponent

An animated caret (chevron) icon that toggles between up and down states with a 3D rotation transition.

import {UpDownCaretIconComponent} from '@anglr/animations';

@Component(
{
    imports: [UpDownCaretIconComponent],
    template: 
    `
        <span class="up-down-caret-icon" [(closed)]="isClosed"></span>
    `,
})
export class MyComponent 
{
    protected isClosed = true;
}

Model

| Model | Type | Default | Description | |-------|------|---------|-------------| | closed | boolean | true | Whether the caret is in the closed (down) state. Toggles on click. |

Styling example:

.up-down-caret-icon 
{
    font-size: 16px;
    color: #666;
    cursor: pointer;
}

Building

npm run build

Linting

npm run lint

License

MIT