Skip to content
Angular 2 Ladda module
Branch: master
Clone or download
Latest commit 23b3b1b Mar 6, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app Demo loading toggle button Mar 6, 2019
module Build with Ladda 2.0 and Angular 6, and distribute as ES6 module May 13, 2018
.gitignore Build with Ladda 2.0 and Angular 6, and distribute as ES6 module May 13, 2018
.npmrc Build with Ladda 2.0 and Angular 6, and distribute as ES6 module May 13, 2018
CHANGELOG.md 2.0.1 Mar 6, 2019
LICENSE added license Aug 24, 2016
README.md Build with Ladda 2.0 and Angular 6, and distribute as ES6 module May 13, 2018
index.html Build with Ladda 2.0 and Angular 6, and distribute as ES6 module May 13, 2018
package.json 2.0.1 Mar 6, 2019
rollup.config.js Build with Ladda 2.0 and Angular 6, and distribute as ES6 module May 13, 2018
tsconfig.json Build with Ladda 2.0 and Angular 6, and distribute as ES6 module May 13, 2018
tsconfig.publish.json

README.md

Angular Ladda module

npm version npm downloads license

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.

You can’t perform that action at this time.