Neighborly Package Megalodon
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

angular2-ladda

3.1.1 • Public • Published

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 ladda angular2-ladda

  • Add "node_modules/ladda/dist/ladda.min.css" or "node_modules/ladda/dist/ladda-themeless.min.css" to the "styles" array in your angular.json file. If you aren't using the Angular CLI, link to the appropriate CSS file in your document instead. For example:

<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 your template, e.g.:

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

In the component the value of isLoading can be changed 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.

Install

npm i angular2-ladda

DownloadsWeekly Downloads

7,522

Version

3.1.1

License

MIT

Unpacked Size

62.7 kB

Total Files

19

Last publish

Collaborators

  • avatar
  • avatar