Angular Ladda module

This is a module for Angular 2+ that implements Ladda.

Check out Ladda's demo

Installation

• run npm install angular2-ladda

• link Ladda's stylesheets to your document - you can find it in /node_modules/ladda/, e.g. add this in your html-document:

<link rel="stylesheet" href="node_modules/ladda/dist/ladda.min.css">

• import LaddaModule in your app's main module app.module.ts, e.g.:

// other imports
// ...
import { LaddaModule } from 'angular2-ladda';
// ...

@NgModule({
    imports: [
        // other imports
        // ...
        LaddaModule,
        // ...
    ]
});

Ladda defaults can be configured as follows:

// other imports
// ...
import { LaddaModule } from 'angular2-ladda';
// ...

@NgModule({
    imports: [
        // other imports
        // ...
        LaddaModule.forRoot({
            style: "contract",
            spinnerSize: 40,
            spinnerColor: "red",
            spinnerLines: 12
        }),
        // ...
    ]
});

Usage

Add [ladda]="isLoading" to a button tag in template, e.g.:

<button [ladda]="isLoading">Save</button>

In the component the value of isLoading can be toggled to show/hide Ladda's spinner:

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

@Component({
    template: `
        <h1>Home Component</h1>
        <button (click)="toggleLoading()">Toggle Ladda in button below</button>
        <hr>
        <button [ladda]="isLoading">Save</button>
    `
})
export class HomeComponent {
    // trigger-variable for Ladda
    isLoading: boolean = false;
    
    toggleLoading() {
        this.isLoading = !this.isLoading;
    }
}

Buttons accept the following attributes:

• data-style: one of the button styles, full list in demo
• data-spinner-size: pixel dimensions of spinner, defaults to dynamic size based on the button height
• data-spinner-color: hex code or any named CSS color
• data-spinner-lines: the number of lines for the spinner, defaults to 12

Progress

Loading progress can be shown by setting the bound value to a number (between 0 and 1) rather than true.

For example:

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

@Component({
    template: `
        <h1>Home Component</h1>
        <button [ladda]="progress" (click)="startLoading()">Click to show progress</button>
    `
})
export class HomeComponent {
    progress: boolean | number = false;
    
    startLoading() {
        this.progress = 0; // starts spinner

        setTimeout(() => {
            this.progress = 0.5; // sets progress bar to 50%

            setTimeout(() => {
                this.progress = 1; // sets progress bar to 100%

                setTimeout(() => {
                    this.progress = false; // stops spinner
                }, 200);
            }, 500);
        }, 400);
    }
}

Feedback

Please leave your feedback if you notice any issues or have a feature request.

License

The repository code is open-source software licensed under the MIT license.