Integrating Ladda buttons in Angular 2

Whenever we perform any server-side operation or any logic which takes a certain time to execute, at that time generally we use some loading icon. This is to indicate that operation is in progress. Well in order to increase the user experience we can use ladda buttons. In this article, we will be Integrating Ladda buttons in Angular 2.

You can find ladda buttons modules for Angular 2 from here. In this article, I will try to cover all the possible uses of ladda buttons.

 Download

 Demo

Setting up our Application

Let’s use Angular CLI to setup our application. If you don’t have Angular CLI installed on your machine run the below command to install it globally.
npm install -g angular-cli
After Angular CLI installation, to create a new Angular project Run below command. This command will create all the necessary files, download all the required external dependencies and do all of the setup work for us.

ng new AppName

Installing and configuring angular2-ladda module:

First, you need to install this module from NPM, run the below command and save it into your package.json file,

npm install angular2-ladda --save

Above command will download and install the angular2-ladda module and at the same time, save it to package.json as a dependency.

Now installation is complete, let’s import this module in our application so, to do that open fileapp.module.ts and import the angular2-ladda shown below.

app.module.ts:

/*
Integrating Ladda buttons in Angular 2
@author Shashank Tiwari
*/
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';

import { AppComponent } from './app.component';

/*
* Importing Ladda Module 
*/import { LaddaModule } from 'angular2-ladda';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    HttpModule,
    LaddaModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The Application

Below is the very simple example of angular2-ladda. In the below code,

We have a button when we click on that button, submit function will be called. Inside the submit function, well the code is self-explanatory.

app.component.ts:

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

@Component({
selector: 'app-root',
template: `
<button class="btn" [ladda]="isLoading" (click)="Submit()" >Ladda Button</button>
`,
styleUrls: ['./app.component.css']
})

export class AppComponent {
isLoading: boolean = false;
Submit(){
this.isLoading = true;
setTimeout(() => {
    this.isLoading = false;;
}, 1000);
}
}

Progress bar in ladda buttons

In the below code,

In the button markup, I have added data-style attribute having value as expand-left, which shows ladda spinner to the left.

Inside the progressClick() function, to show the progress bar I am updating the value ofisLoadingProgessLeft property of the class AppComponent.

app.component.ts:

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

@Component({
selector: 'app-root',
template: `
<button class="btn" [ladda]="isLoadingProgessLeft" data-style="expand-left" (click)="progressClick()">Progress Button Left</button>
`,
styleUrls: ['./app.component.css']
})

export class AppComponent {
isLoadingProgessLeft: boolean | number = false;

progressClick(){
let Time=200;
let loader =null;

setTimeout(() => {
this.isLoadingProgessLeft = 0.1;
        }, Time);

        for(var i=1;i<5;i++){
        Time=Time+250;
        
        setTimeout(() => {
        this.isLoadingProgessLeft += loader;
            }, Time);
            
            loader=i/10;
            
            if(i==4){
            setTimeout(() => {
            this.isLoadingProgessLeft = false;
                }, Time);
            }
        }
}
}

Well, as of now that’s it. But I would recommend you to download the source of this article because it contains a lot of examples. So till then Happy reading.