New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

ngx-loading-buttons

Package Overview
Dependencies
Maintainers
0
Versions
25
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

ngx-loading-buttons

  • 19.0.0
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
468
increased by17.59%
Maintainers
0
Weekly downloads
 
Created
Source


npm npm npm bundle size (minified + gzip) ngx-loading-buttons PRs All Contributors npm

A lightweight Angular library to add a loading spinner to your Angular Material buttons.

Installation

ng add ngx-loading-buttons

Usage

Import the NgxLoadingButtonsModule into your AppModule. You can configure it as shown below:

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgxLoadingButtonsModule } from 'ngx-loading-buttons';

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

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

And last of all, add it to your <button> element like this.

<button mat-raised-button [mtBasicSpinner]="true">Basic</button>

You can also hide the button's text like this.

<button mat-raised-button [mtBasicSpinner]="true" [hideText]="true">Basic</button>

A "real-world component" would likely look like this.

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

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  saving: boolean = false;

  save(): void {
    this.saving = true;
    // Juggle 5 hens while wiggling your toes and other magic... 🤡
  }


}

And our template file.

<button mat-raised-button [mtBasicSpinner]="saving" (click)="save()">Basic</button>

Add our styles to yours

@import 'ngx-loading-buttons/styles';

Issues 🐛

Found a bug? Want to request a feature? Confused? Or wanna simply comment on how useful this library is?

Open an issue here.

Contributors ✨

Thanks goes to these wonderful people (emoji key):


Daniel Kreider

💻

Totto

💻

Raphaël Balet

💻

Arthur Ming

💻

Thomas Renger

💻

mixer904

💻

Fabien Wautriche

🐛

tux1337

🐛

Milán Németh

🐛

Adrien

🐛

This project follows the all-contributors specification.

Contributions of any kind welcome!

Credits

FAQs

Package last updated on 23 Dec 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc