Microsoft Fluent Design System buttons components for Angular Material.

Installation:

# NPM
$ npm i ngx-fluent-buttons

Basic usage:

<ngx-fluent-button split mat-raised-button color="primary">
  <ng-container class="split-menu-content">
    <button mat-menu-item>
      <mat-icon>code</mat-icon> Contribute
    </button>
    <button mat-menu-item>
      <mat-icon>feedback</mat-icon> <span>Send Feedback</span>
    </button>
  </ng-container>
  <mat-icon>done</mat-icon> Accept Demo
</ngx-fluent-button>

Preview:

The post Microsoft Fluent Buttons for Angular Material appeared first on Angular Script.

Lightweight, customizable, and beautiful toast notifications for Angular apps.

Features:

• Hot by default
• Easy to use
• Accessible
• Reduce motion support
• Emoji Support
• Customizable
• Observable API
• Pause on hover
• Events
• Persistent

How to use it:

1. Install and import the module.

# NPM
$ npm i @ngneat/overview@1 @ngneat/hot-toast

import { HotToastModule } from '@ngneat/hot-toast';
@NgModule({
  imports: [HotToastModule.forRoot()],
})
class AppModule {}

2. Create toast notification of different types as follows:

import { HotToastService } from '@ngneat/hot-toast';
@Component({})
export class AppComponent {
  constructor(private toast: HotToastService) {}
  showToast() {
    this.toast.show('Basic Notification!');
    this.toast.loading('Loading...');
    this.toast.success('Success Toast');
    this.toast.warning('Warning Toast');
    this.toast.error('Error Toast');
  }
  update() {
    saveSettings.pipe(
      this.toast.observe(
        {
          loading: 'Saving...',
          success: 'Settings saved!',
          error: 'Could not save.',
        }
      )
    ).subscribe();
  }
}

3. Default toast options.

/**
* Unique id to associate with hot-toast.
* There can't be multiple hot-toasts opened with same id.
*
* @default Date.now().toString()
*/
id: string;

/** The message to show in the hot-toast. */
message: Content;

/**
* Role of the live region.
*
* @default status
*/
role: ToastRole;

/** aria-live value for the live region.
*
* @default polite
*/
ariaLive: ToastAriaLive;

/**Icon to show in the hot-toast */
icon?: Content;

/**
* Duration in milliseconds after which hot-toast will be auto closed.
* Can be disabled via `autoClose: false`
*
* @default 3000 | error = 4000 | loading = 30000
*/
duration?: number;

/**
* Show close button in hot-toast
*
* @default false
*/
dismissible?: boolean;

/**
* Auto close hot-toast after duration
*
* @default true
*/
autoClose?: boolean;

/**Extra styles to apply for hot-toast */
style?: any;

/**Extra CSS classes to be added to the hot toast container. */
className?: string;

/**Use this to change icon color */
iconTheme?: IconTheme;

/**
* Visual appearance of hot-toast
*
* @default toast
*/
theme?: ToastTheme;

/**
* The position to place the hot-toast.
*
* @default top-center
*/
position?: ToastPosition;

/**Extra styles to apply for close button */
closeStyle?: any;

createdAt: number;
visible: boolean;
height?: number;

observableMessages?: ObservableMessages<unknown, DataType>;

/**
* Useful when you want to keep a persistance for toast based on ids, across sessions.
*
* @example
* // Lets say you want show hot-toast, with a particular id,
* // max 3 times to a user irrespective of browser session.
* // In this case you will set this as:
* { enabled: true, count: 3 }
*
* @type {ToastPersistConfig}
*/
persist?: ToastPersistConfig;

/**
* Allows you to pass injector for your component
*
* @since 1.1.0
* @type {Injector}
* @memberof Toast
*/
injector?: Injector;

/**
* Allows you to pass data for your component/template
*
* @since 2.0.0
* @type {DataType}
* @memberof Toast
*/
data?: DataType;

Preview:

The post Smoking Hot Angular Notifications – hot-toast appeared first on Angular Script.

A responsive grid system with draggable and resizable grid items for Angular applications.

Specially designed to create highly customizable dashboards.

More Features:

• REDUX friendly (akita, ngrx, ngxs…)
• Customizable Drag & Resize handles.
• 3 modes of grid compaction: vertical, horizontal and free
• Add/Remove items
• High performance
• Supports touch devices
• Auto-scrolling while dragging

How to use it:

1. Install and import the module.

# NPM
$ npm i @katoid/angular-grid-layout

import { KtdGridModule } from '@katoid/angular-grid-layout';

@NgModule({
  imports: [KtdGridModule]
})

2. In your app template:

<ktd-grid [cols]="cols"
          [rowHeight]="rowHeight"
          [layout]="layout"
          (layoutUpdated)="onLayoutUpdated($event)">
  <ktd-grid-item *ngFor="let item of layout; trackBy:trackById" [id]="item.id">
    <!-- Your grid item content goes here -->
  </ktd-grid-item>
</ktd-grid>

import { ktdTrackById } from '@katoid/angular-grid-layout';
cols: number = 6;
rowHeight: number = 100;
layout: KtdGridLayout = [
    {id: '0', x: 0, y: 0, w: 3, h: 3},
    {id: '1', x: 3, y: 0, w: 3, h: 3},
    {id: '2', x: 0, y: 3, w: 3, h: 3},
    {id: '3', x: 3, y: 3, w: 3, h: 3},
];
trackById = ktdTrackById

Preview:

The post Responsive Draggable Resizable Grid System For Angular appeared first on Angular Script.

icon-blur is an Angular component that helps you create a frosted glass effect (also called glassmorphism) on icons.

Basic usage:

1. Install and import the component.

# NPM
$ npm i ngx-icon-blur

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
// Import the library
import { NgxIconBlurModule } from 'ngx-icon-blur';
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    NgxIconBlurModule // <-- Add this line
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

2. Create a frosted glass effect on icons:

• src: path to the icon image
• type: “ROUNDED” or “SQUARE” or “CIRCLE
• size: icon size
• padding: icon padding in px
• name: alt name

<ngx-icon-blur
    [source]="'icon.svg'"
    [name]="'icon'"
    [padding]="10"
    [size]="48"
    [type]="'ROUNDED'"
></ngx-icon-blur>

Preview:

The post Create Frosted Glass Icon Effect In Angular – icon-blur appeared first on Angular Script.

dag is an Angular service designed to assist in creating and managing a directed acycylic graph model in an Angular application.

With this library, you can add or remove steps to the DAG and the model will be properly updated.

Installation:

# Yarn
$ yarn add @ngneat/dag --save

# NPM
$ npm i @ngneat/dag--save

Import:

// workflow-builder.component.ts
@Component({
  selector: 'app-workflow-builder',
  ...
  providers: [DagManagerService]
})
export class WorkflowBuilderComponent {}

Preview:

The post Angular Service For Managing Directed Acyclic Graphs – dag appeared first on Angular Script.

An international payment card UI library that helps you create a professional payment form in your Angular app.

How to use it:

1. Install and import the module.

# NPM
$ npm i ngx-payment-card --save

import { NgxPaymentCardModule } from 'ngx-payment-card'; 
@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgxPaymentCardModule, ...],  
  bootstrap: [AppComponent]
})
export class AppModule {
}

2. Add the ngx-payment-card component to the app.

<ngx-payment-card #ngxPaymentCard
  [IBAN]="iban?.value"
  [cardNumber]="+cNumber?.value"
  [securityCode]="sc?.value"
  [name]="name?.value">
</ngx-payment-card>

Preview:

The post International Payment Card UI Library For Angular appeared first on Angular Script.

A multi-language number to word converter that converts any number to words in your Angular app.

Supported Languages:

• en (English, default)
• ar (Arabic)
• cz (Czech)
• dk (Danish)
• de (German)
• es (Spanish)
• fr (French)
• fa (Farsi)
• he (Hebrew)
• it (Italian)
• ko (Korean)
• lt (Lithuanian)
• lv (Latvian)
• nl (Dutch)
• no (Norwegian)
• pl (Polish)
• pt (Portuguese)
• ru (Russian)
• sr (Serbian)
• tr (Turkish)
• uk (Ukrainian)

Basic Usage:

1. Install and import the module.

ng add ngx-auth-firebaseui

import { NgxNumToWordsService, SUPPORTED_LANGUAGE } from 'ngx-num-to-words';

2. Basic usage.

<h1>{{numberInWords}}</h1>

numberInWords!: string;
lang!: SUPPORTED_LANGUAGE = 'en';
value = 123;
constructor(private ngxNumToWordsService: NgxNumToWordsService) {}
ngOnInit(): void {
  this.numberInWords = this.ngxNumToWordsService.inWords(value, this.lang);
}

Preview:

The post Convert Any Number to Words In Angular appeared first on Angular Script.

An Angular directive to create a floating text background animation in app.

How to use it:

1. Install and import the directive.

# NPM
$ npm i ngx-sbz-text-animation --save

import {NgxSbzTextAnimationModule} from 'ngx-sbz-text-animation';
@import "../node_modules/ngx-sbz-text-animation/styles/ngx-sbz-text-animation.css";
@NgModule({
  imports: [
    NgxSbzTextAnimationModule
  ]
})

2. Apply a floating text background animation to an element as follows:

<div sbzTextAnimation></div>

3. Config the animation with the following options.

• position: ‘left’, or ‘right’
• maxFontSize: max font size
• colorSchemeArray: an array of colors

<div sbzTextAnimation [position]="position" [maxFontSize]="20" [colorSchemeArray]="colorArray"></div>

Preview:

The post Floating Text Background Animation In Angular appeared first on Angular Script.

A password strength meter for Angular used to calculate and display the strength and/or feedback of a provided password.

Based on the latest Zxcvbn.js Password Strength Estimation library.

How to use it:

1. Install the package and import the Password Strength Meter.

# Yarn
$ yarn add ngx-password-strength-meter

# NPM
$ npm i ngx-password-strength-meter --save

import { NgxPasswordStrengthMeterModule } from 'ngx-password-strength-meter';
@NgModule({
  declarations: [AppComponent, ...],
  imports: [NgxPasswordStrengthMeterModule, ...],
  bootstrap: [AppComponent]
})
export class AppModule {
}

2. Add the Password Strength Meter component to the app.

<ngx-password-strength-meter [password]="password"></ngx-password-strength-meter>

3. Config the Password Strength Meter with the following options:

@Input() password: string;
@Input() min = 8;
@Input() max = 30;
@Input() enableLengthRule = true;
@Input() enableFeedback = false;
@Input() colors: string[] = [];
@Output() strengthChange = new EventEmitter<number>();

Preview:

The post Password Strength Meter For Angular appeared first on Angular Script.

A customizable and themeable stepper & wizard component for Angular powered apps.

How to use it:

1. Install the package.

# NPM
$ npm i ng-wizard

2. Import the component.

import { NgModule } from '@angular/core';
import { NgWizardModule, NgWizardConfig, THEME } from 'ng-wizard';
const ngWizardConfig: NgWizardConfig = {
  theme: THEME.default
};
@NgModule({
  imports: [
    NgWizardModule.forRoot(ngWizardConfig)
  ]
})
export class AppModule { }

3. Import necessary CSS files and optional themes.

/* Core */
@import '~bootstrap/dist/css/bootstrap.min.css';
@import '~ng-wizard/themes/ng_wizard.min.css';

/* Themes */
@import '~ng-wizard/themes/ng_wizard_theme_arrows.min.css';
@import '~ng-wizard/themes/ng_wizard_theme_circles.min.css';
@import '~ng-wizard/themes/ng_wizard_theme_dots.min.css';

4. Add steps to the wizard component.

<ng-wizard [config]="config" (stepChanged)="stepChanged($event)">
  <ng-wizard-step [title]="'Step 1'" [description]="'Step 1 description'"
    [canEnter]="isValidTypeBoolean" [canExit]="isValidFunctionReturnsBoolean.bind(this)">
    <span>Step 1 content</span>
  </ng-wizard-step>
  <ng-wizard-step [title]="'Step 2'" [description]="'Step 2 description'" [state]="stepStates.disabled">
    <span>Step 2 content</span>
  </ng-wizard-step>
  <ng-wizard-step [title]="'Step 3'" [description]="'Step 3 description'"
    [canEnter]="isValidFunctionReturnsObservable.bind(this)" [canExit]="isValidFunctionReturnsBoolean.bind(this)">
    <span>Step 3 content</span>
  </ng-wizard-step>
  // more steps here
</ng-wizard>

Preview:

The post Customizable Stepper/Wizard Component For Angular appeared first on Angular Script.