Showing posts with label angular 2. Show all posts
Showing posts with label angular 2. Show all posts
bower-videogular-analytics

bower-videogular-analytics

September 07, 2018
Videogular analytics plugin repository for distribution on bower.

Install

Install Videogular analytics plugin with Bower:
bower install videogular-angulartics

Install Videogular

Install Videogular with Bower:
bower install videogular

Install themes

Install Videogular themes with Bower:
bower install videogular-themes-default

Install plugins

Install Videogular plugins with Bower:
bower install videogular-controls
bower install videogular-overlay-play
bower install videogular-poster

Documentation

It's available on Videogular's project Wiki.

License

The MIT License (MIT)

Note: Special thanks to Videogular
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
bower-videogular-ima-ads

bower-videogular-ima-ads

August 30, 2018
Videogular ima-ads plugin repository for distribution on bower.

Install

Install Videogular ima-ads plugin with Bower:
 bower install videogular-ima-ads  

You must add this script to your head tag:
 <script type='text/javascript'>  
      var googletag = googletag || {};  
      googletag.cmd = googletag.cmd || [];  
      (function() {  
           var gads = document.createElement('script');  
           gads.async = true; gads.type = 'text/javascript';  
           gads.src = 'http://www.googletagservices.com/tag/js/gpt.js';  
           var node = document.getElementsByTagName('script')[0];  
           node.parentNode.insertBefore(gads, node);  
      })();  
 </script>  
For more info about how to use IMA ads visit Google's IMA ads website.

Install Videogular

Install Videogular with Bower:
 bower install videogular  

Install Videogular themes

Install Videogular themes with Bower:
 bower install videogular-themes-default  

Install Videogular plugins

Install Videogular plugins with Bower:
 bower install videogular-buffering  
 bower install videogular-overlay-play  
 bower install videogular-controls  

Documentation

It's available on Videogular's project Wiki.

License

The MIT License (MIT)
Note: Special thanks to Videogular
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
ng-sidebar

ng-sidebar

November 14, 2017
Angular sidebar component. https://echeung.me/ng-sidebar

Installation

 npm install --save ng-sidebar  

SystemJS configuration

If you're using SystemJS, be sure to add the appropriate settings to your SystemJS config:
 var map = {  
  // ...  
  'ng-sidebar': 'node_modules/ng-sidebar',  
  // ...  
 };  
 var packages = {  
  // ...  
  'ng-sidebar': {  
   main: 'lib/index',  
   defaultExtension: 'js'  
  },  
  // ...  
 };  

Changelog

See the releases page on GitHub.

Usage

Add SidebarModule to your app module:
 import { SidebarModule } from 'ng-sidebar';  
 @NgModule({  
  declarations: [AppComponent],  
  imports: [BrowserModule, SidebarModule.forRoot()],  
  bootstrap: [AppComponent],  
 })  
 class AppModule {}  
In your app component, simply use add a wrapper, then place your (s) and content within it. Your page content should be in some container with a ng-sidebar-content attribute.
 @Component({  
  selector: 'app',  
  template: `  
   <!-- Container for sidebar(s) + page content -->  
   <ng-sidebar-container>  
    <!-- A sidebar -->  
    <ng-sidebar [(opened)]="_opened">  
     <p>Sidebar contents</p>  
    </ng-sidebar>  
    <!-- Page content -->  
    <div ng-sidebar-content>  
     <button (click)="_toggleSidebar()">Toggle sidebar</button>  
    </div>  
   </ng-sidebar-container>  
  `  
 })  
 class AppComponent {  
  private _opened: boolean = false;  
  private _toggleSidebar() {  
   this._opened = !this._opened;  
  }  
 }  
If nothing seems to show up, your wrappers' heights may be collapsing. Try adding a height (e.g. height: 100vh;) to the wrapper or other wrapper elements you may have. (See issue #100 for more info.)
A directive is also provided to easily close the sidebar by clicking something inside it:

 <ng-sidebar>  
  <a closeSidebar>Closes the sidebar</a>  
 </ng-sidebar>  
You can also use the open() and close() functions:
 <ng-sidebar #sidebar>  
  <button (click)="sidebar.close()">Close sidebar</button>  
 </ng-sidebar>  
 <button (click)="sidebar.open()">Open sidebar</button>  

Functions

The sidebar has a few public functions:
Function Description
open() Opens the sidebar.
close() Closes the sidebar.
triggerRerender() Manually trigger a re-render of the container. Useful if the sidebar contents might change.
 

Styling

Various class names are attached to the sidebar and container for easier styling.
If you are using Angular's default emulated view encapsulation, you may have to use the >>> selector to target the sidebar's classes. Check out Angular's documentation for more details. Note that the /deep/ selector will soon be deprecated.

Sidebar

Class name Description
ng-sidebar Always on the sidebar element.
ng-sidebar--opened When opened is true.
ng-sidebar--closed When opened is false.
ng-sidebar--left When position is 'left' (or the 'start'/'end' aliases are equivalent to 'left').
ng-sidebar--right When position is 'right' (or the 'start'/'end' aliases are equivalent to 'right').
ng-sidebar--top When position is 'top'.
ng-sidebar--bottom When position is 'bottom'.
ng-sidebar--over When mode is 'over'.
ng-sidebar--push When mode is 'push'.
ng-sidebar--slide When mode is 'slide'.
ng-sidebar--docked When the sidebar is docked (i.e. it is "closed" and dock is true).
ng-sidebar--inert Ignores pointer clicks. Class is applied when the sidebar is closed.
ng-sidebar--animate When animate is true for a sidebar.

Backdrop

Class name Description
ng-sidebar__backdrop Class of the backdrop div. Note that the div is only in the DOM when the backdrop is shown.

Page content

Class name Description
ng-sidebar__content Class of the wrapper div for the page content.
ng-sidebar__content--animate When animate is true for the container.

Options

 <ng-sidebar-container>  

Inputs

 

Property name Type Default Description
contentClass string
Additional class name on the div wrapping the page contents.
backdropClass string
Additional class name on the overlay element.
showBackdrop boolean false Controls the backdrop state of the sidebar container. This should be two-way bound.
allowSidebarBackdropControl boolean true Determines if the container component respects the sidebar's showBackdrop input option.
animate boolean true Animates the container sliding.

Outputs

Property name Callback arguments Description
showBackdropChange showBackdrop: boolean Emitted when showBackdrop is modified. This allows for you to do "two-way binding" (i.e. [(showBackdrop)]).

<ng-sidebar>

Inputs

Property name Type Default Description
opened boolean false Controls the opened state of the sidebar. This should be two-way bound.
mode 'over', 'push', 'slide' 'over' See the "Modes" section.
dock boolean false Show the sidebar as docked when closed.
dockedSize string '0px' When mode is set to 'dock', this value indicates how much of the sidebar is still visible when "closed".
position 'left', 'right', 'top', 'bottom', 'start', 'end' 'start' What side the sidebar should be docked to. 'start' and 'end' are aliases that respect the page's language (e.g. start is the same as left for English, but would be right for Hebrew.
autoCollapseHeight number
Window height in pixels in which to automatically close the sidebar.
autoCollapseWidth number
Window width in pixels in which to automatically close the sidebar.
animate boolean true Animate the opening/closing of the sidebar.
sidebarClass string
Additional class name on the sidebar element.
ariaLabel string
Value for the sidebar's aria-label attribute.
trapFocus boolean false Keeps focus within the sidebar when open. Note that this only works if there's one sidebar open at a time.
autoFocus boolean true Automatically focus the first focusable element in the sidebar when opened.
showBackdrop boolean false If a translucent black backdrop overlay should appear over the page contents when the sidebar is opened. This is ignored if the sidebar's parent container has its allowSidebarBackdropControl property set to true.
closeOnClickBackdrop boolean false Whether clicking on the backdrop of the open sidebar will close it.
closeOnClickOutside boolean false Whether clicking outside of the open sidebar will close it.
keyClose boolean false Close the sidebar when a keyboard button is pressed.
keyCode number 27 The key code for keyClose.

Outputs

Property name Callback arguments Description
openedChange opened: boolean Emitted when opened is modified. This allows for you to do "two-way binding" (i.e. [(opened)]).
onOpenStart
Emitted when the sidebar is opening.
onOpened
Emitted when the sidebar is opened.
onCloseStart
Emitted when the sidebar is closing.
onClosed
Emitted when the sidebar is closed.
onModeChange mode: string Emitted when mode is changed.
onPositionChange position: string Emitted when position is changed.

Modes

over This is the default mode. The sidebar slides in over the page contents.
push
The page contents is pushed to make space for the sidebar.
slide
The entire page slides over to show the sidebar. Note that this only works if you have one sidebar open at a time.

Note: Special thanks to Eugene Cheung
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
ng-inline-svg

ng-inline-svg

November 13, 2017
Angular directive for inserting an SVG file inline within an element. https://echeung.me/ng-inline-svg/

Formerly called ng2-inline-svg

Angular directive for inserting an SVG inline within an element, allowing for easily styling with CSS like fill: currentColor;.

This is based on md-icon, except this is meant purely for inserting SVG files within an element, without the extra things like font icons.

Installation

 npm install --save ng-inline-svg  
IMPORTANT: If you're using a version of Angular prior to v4.3.0, you must use ng-inline-svg v3.4.0 or earlier.

Usage

Add InlineSVGModule to your list of module imports:
 import { InlineSVGModule } from 'ng-inline-svg';  
 @NgModule({  
  declarations: [AppComponent],  
  imports: [BrowserModule, InlineSVGModule],  
  bootstrap: [AppComponent]  
 })  
 class AppModule {}  
If you want to configure the base URL, you can use the forRoot function:
 InlineSVGModule.forRoot({ baseUrl: 'https://mysite.com/myapp/' })  
If you want to configure the base URL later, use the service's function:
 import { SVGCacheService } from 'ng-inline-svg';  
 class YourComponent {  
  constructor(svgService: SVGCacheService) {  
   svgService.setBaseUrl({ baseUrl: 'https://mysite.com/myapp/' });  
  }  
 }  
You can then use the directive in your templates:
 @Component({  
  selector: 'app',  
  template: `  
   <div class="my-icon" aria-label="My icon" [inlineSVG]="'/img/image.svg'"></div>  
  `  
 })  
 export class AppComponent {  
 }  
The SVG file (if found) will be inserted inside the element with the [inlineSVG] directive. Support for icons using the symbol method is also supported (e.g. [inlineSVG]="'#shape-id'").

Options

Inputs

Property name Type Default Description
cacheSVG boolean true Caches the SVG based on the absolute URL. Cache only persists for the (sessional) lifetime of the page.
prepend boolean false Inserts before the first child instead of appending, overwrites replaceContents
replaceContents boolean true Replaces the contents of the element with the SVG instead of just appending it to its children.
injectComponent boolean false Injects an <inline-svg> component containing the SVG inside the element with the directive.
removeSVGAttributes string[]
An array of attribute names to remove from all child elements within the SVG.
forceEvalStyles boolean false Forces embeded style tags' contents to be evaluated (for IE 11).
evalScripts 'always', 'once', 'none' 'always' Whether to evaluate embedded scripts in the loaded SVG files.
fallbackImgUrl string
URL for a regular image to be displayed as a fallback if the SVG fails to load.

Outputs

Property name Callback arguments Description
onSVGInserted e: SVGElement Emits the SVGElement post-insertion.
onSVGFailed e: any Emits when there is some error (e.g. embed SVG not supported, fetch failed, etc.)

Note: Special thanks to Eugene Cheung
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
angular-connect-demo

angular-connect-demo

November 10, 2017
Angular Connect 2016 VR demo

Prerequisites

You need to have Node.js and npm
  • Support Node v4 - latest
  • Support npm v3 - latest

Installation

 npm install  

NPM commands

Start development server:
 npm start  
Build app for development:
 npm run build  
Start production server:
 npm run start:prod  
Build app for production:
 npm run build:prod  

License

MIT
Note: Special thanks to Videogular
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
videogular2

videogular2

November 09, 2017
Videogular is an HTML5 video player for Angular 2.0. Videogular is a wrapper over the HTML5 video tag, so you can just add whatever you want. This provides a very powerful, but simple to use solution, for everybody.

You can see a demo here: https://videogular.github.io/videogular2-showroom/#/

Documentation: https://videogular.github.io/videogular2

How to install

To get up and running quickly, check out the getting started guide.

NPM commands

Run start to compile the project, execute tests and check coverage:
 npm start  
Run build to compile the project:
 npm run build  
Run test to test the project:
 npm test  
Run coverage to check the coverage report:
 npm run coverage  
To start the example app run the following commands and open http://localhost:8080:
 cd examples  
 npm install  
 npm run build  
 npm start  

Note: Special thanks to Videogular
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
angular2-moment

angular2-moment

November 08, 2017
This module works with Angular 2.0 and above.
For the AngularJS version of this module, please see angular-moment.

Installation

 npm install --save angular2-moment  

If you use typescript 1.8, and typings, you may also need to install typings for moment.js:
 typings install --save moment  

For System.js users:

First you need to install moment:
 npm install moment --save  
Don't forget to update your systemjs.config.js:
 packages: {  
       app: {  
         main: './main.js',  
         defaultExtension: 'js'  
       },  
       'moment': {  
         main: './moment.js',  
         defaultExtension: 'js'  
       },  
       'angular2-moment': {  
         main: './index.js',  
         defaultExtension: 'js'  
       }  
     }  

Usage

Import MomentModule into your app's modules:
 import { MomentModule } from 'angular2-moment';  
 @NgModule({  
  imports: [  
   MomentModule  
  ]  
 })  
This makes all the angular2-moment pipes available for use in your app components.

Available pipes

amTimeAgo pipe

Takes an optional omitSuffix argument that defaults to false.
 @Component({  
  selector: 'app',  
  template: `  
   Last updated: {{myDate | amTimeAgo}}  
  `  
 })  
Prints Last updated: a few seconds ago
 @Component({  
  selector: 'app',  
  template: `  
   Last updated: {{myDate | amTimeAgo:true}}  
  `  
 })  
Prints Last updated: a few seconds

amCalendar pipe

Takes optional referenceTime argument (defaults to now) and formats argument that could be output formats object or callback function. See momentjs docs for details.
 @Component({  
  selector: 'app',  
  template: `  
   Last updated: {{myDate | amCalendar}}  
  `  
 })  
Prints Last updated: Today at 14:00 (default referenceTime is today by default)
 @Component({  
  selector: 'app',  
  template: `  
   Last updated: <time>{{myDate | amCalendar:nextDay }}</time>  
  `  
 })  
 export class AppComponent {  
  nextDay: Date;  
  constructor() {  
    this.nextDay = new Date();  
    nextDay.setDate(nextDay.getDate() + 1);  
  }  
 }  
Prints Last updated: Yesterday at 14:00 (referenceTime is tomorrow)
 @Component({  
  selector: 'app',  
  template: `  
   Last updated: <time>{{myDate | amCalendar:{sameDay:'[Same Day at] h:mm A'} }}</time>  
  `  
 })  
Prints Last updated: Same Day at 2:00 PM

amDateFormat pipe

 @Component({  
  selector: 'app',  
  template: `  
   Last updated: {{myDate | amDateFormat:'LL'}}  
  `  
 })  
Prints Last updated: January 24, 2016

amParse pipe

Parses a custom-formatted date into a moment object that can be used with the other pipes.
 @Component({  
  selector: 'app',  
  template: `  
   Last updated: {{'24/01/2014' | amParse:'DD/MM/YYYY' | amDateFormat:'LL'}}  
  `  
 })  
Prints Last updated: January 24, 2016

amLocal pipe

Converts UTC time to local time.
 @Component({  
  selector: 'app',  
  template: `  
   Last updated: {{mydate | amLocal | amDateFormat: 'YYYY-MM-DD HH:mm'}}  
  `  
 })  
Prints Last updated 2016-01-24 12:34

amLocale pipe

To be used with amDateFormat pipe in order to change locale.
 @Component({  
  selector: 'app',  
  template: `  
   Last updated: {{'2016-01-24 14:23:45' | amLocale:'en' | amDateFormat:'MMMM Do YYYY, h:mm:ss a'}}  
  `  
 })  
Prints Last updated: January 24th 2016, 2:23:45 pm

amFromUnix pipe

 @Component({  
  selector: 'app',  
  template: `  
   Last updated: {{ (1456263980 | amFromUnix) | amDateFormat:'hh:mmA'}}  
  `  
 })  
Prints Last updated: 01:46PM

amDuration pipe

 @Component({  
  selector: 'app',  
  template: `  
   Uptime: {{ 365 | amDuration:'seconds' }}  
  `  
 })  
Prints Uptime: 6 minutes

amDifference pipe

 @Component({  
  selector: 'app',  
  template: `  
   Expiration: {{nextDay | amDifference: today :'days' : true}} days  
  `  
 })  
Prints Expiration: 1 day

amAdd and amSubtract pipes

Use these pipes to perform date arithmetics. See momentjs docs for details.
 @Component({  
  selector: 'app',  
  template: `  
   Expiration: {{'2017-03-17T16:55:00.000+01:00' | amAdd: 2 : 'hours' | amDateFormat: 'YYYY-MM-DD HH:mm'}}  
  `  
 })  
Prints Expiration: 2017-03-17 18:55
 @Component({  
  selector: 'app',  
  template: `  
   Last updated: {{'2017-03-17T16:55:00.000+01:00' | amSubtract: 5 : 'years' | amDateFormat: 'YYYY-MM-DD HH:mm'}}  
  `  
 })  
Prints Last updated: 2012-03-17 16:55

amFromUtc pipe

Parses the date as UTC and enables mode for subsequent moment operations (such as displaying the time in UTC). This can be combined with amLocal to display a UTC date in local time.
 @Component({  
  selector: 'app',  
  template: `  
   Last updated: {{ '2016-12-31T23:00:00.000-01:00' | amFromUtc | amDateFormat: 'YYYY-MM-DD' }}  
  `  
 })  
Prints Last updated: 2017-01-01

amUtc pipe

Enables UTC mode for subsequent moment operations (such as displaying the time in UTC).
 @Component({  
  selector: 'app',  
  template: `  
   Last updated: {{ '2016-12-31T23:00:00.000-01:00' | amUtc | amDateFormat: 'YYYY-MM-DD' }}  
  `  
 })  
Prints Last updated: 2017-01-01

Complete Example

 import { NgModule, Component } from '@angular/core';  
 import { BrowserModule } from '@angular/platform-browser';  
 import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';  
 import { MomentModule } from 'angular2-moment';  
 @Component({  
  selector: 'app',  
  template: `  
   Last updated: <b>{{myDate | amTimeAgo}}</b>, <b>{{myDate | amCalendar}}</b>, <b>{{myDate | amDateFormat:'LL'}}</b>  
  `  
 })  
 export class AppComponent {  
  myDate: Date;  
  constructor() {  
   this.myDate = new Date();  
  }  
 }  
 @NgModule({  
  imports: [  
   BrowserModule,  
   MomentModule  
  ],  
  declarations: [ AppComponent ]  
  bootstrap: [ AppComponent ]  
 })  
 class AppModule {}  
 platformBrowserDynamic().bootstrapModule(AppModule);  

Demo

See online demo on Plunker
Note: Special thanks to Uri Shaked
Contact: uri@urish.org
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
ngx-font-picker

ngx-font-picker

November 05, 2017
This is a simple font picker based on the cool angular2-color-picker by Alberplz.
See a live example application here.

Building the library

 npm install  
 npm run build  

Running the example

 cd example  
 npm install  
 npm start  

Installing and usage

 npm install ngx-font-picker --save  

Load the module for your app (with global configuration):

 import { FontPickerModule } from 'ngx-font-picker';  
 import { FontPickerConfigInterface } from 'ngx-font-picker';  
 const FONT_PICKER_CONFIG: FontPickerConfigInterface = {  
  // Change this to your Google API key  
  apiKey: 'AIzaSyA9S7DY0khhn9JYcfyRWb1F6Rd2rwtF_mA'  
 };  
 @NgModule({  
  ...  
  imports: [  
   ...  
   FontPickerModule.forRoot(FONT_PICKER_CONFIG)  
  ]  
 })  

Use it in your html template (for example in div element):

 <div [(fontPicker)]="font" [fpWidth]="'320px'" [fpPosition]="'bottom'">  
  Click to open the font picker</div>  
 [(fontPicker)]   // Selected font ({family, size, style, styles, files}).  
 [fpWidth]      // Width of the font picker (Default: '280px').  
 [fpHeight]     // Height of the font picker (Default: '320px').  
 [fpPosition]    // Position of the font picker (Default: 'bottom').  
 [fpSizeSelect]   // Show size selector in the font picker (Default: false).  
 [fpStyleSelect]   // Show style selector in the font picker (Default: false).  
 [fpPresetLabel]   // Label for the preset fonts list (Default: undefined).  
 [fpPresetFonts]   // Listing of preset fonts to show (Default: undefined).  
 [fpFallbackFont]  // Fallback font (Default: {family: 'Roboto', size: 14}).  
 [fpCancelButton]  // Show cancel button in the font picker (Default: false).  
 (fontPickerChange) // Event handler for the font / size / style change.  

Available configuration options (for the global configuration):

 apiKey       // Your Google API key for the Google Web Fonts API.  

Note: Special thanks to ZEF Oy
Contact: info@zef.fi
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
ng2-dnd

ng2-dnd

November 01, 2017
Angular 2 Drag-and-Drop without dependencies.

Installation


 npm install ng2-dnd --save 

Demo

Simple examples using ng2-dnd:
Online demo available here
Plunker demo available here

Usage

If you use SystemJS to load your files, you might have to update your config:
 System.config({  
   map: {  
     'ng2-dnd': 'node_modules/ng2-dnd/bundles/index.umd.js'  
   }  
 });  

1. Add the default styles

  • Import the style.css into your web page

2. Import the DndModule

Import DndModule.forRoot() in the NgModule of your application. The forRoot method is a convention for modules that provide a singleton service.
 import {BrowserModule} from "@angular/platform-browser";  
 import {NgModule} from '@angular/core';  
 import {DndModule} from 'ng2-dnd';  
 @NgModule({  
   imports: [  
     BrowserModule,  
     DndModule.forRoot()  
   ],  
   bootstrap: [AppComponent]  
 })  
 export class AppModule {  
 }  
If you have multiple NgModules and you use one as a shared NgModule (that you import in all of your other NgModules), don't forget that you can use it to export the DndModule that you imported in order to avoid having to import it multiple time
 @NgModule({  
   imports: [  
     BrowserModule,  
     DndModule  
   ],  
   exports: [BrowserModule, DndModule],  
 })  
 export class SharedModule {  
 }  

3. Use Drag-and-Drop operations with no code

 import {Component} from '@angular/core';  
 @Component({  
   selector: 'simple-dnd',  
   template: `  
 <h4>Simple Drag-and-Drop</h4>  
 <div class="row">  
   <div class="col-sm-3">  
     <div class="panel panel-success">  
       <div class="panel-heading">Available to drag</div>  
       <div class="panel-body">  
         <div class="panel panel-default" dnd-draggable [dragEnabled]="true">  
           <div class="panel-body">  
             <div>Drag Me</div>  
           </div>  
         </div>  
       </div>  
     </div>  
   </div>  
   <div class="col-sm-3">  
     <div dnd-droppable class="panel panel-info" (onDropSuccess)="simpleDrop=$event">  
       <div class="panel-heading">Place to drop</div>  
       <div class="panel-body">  
         <div *ngIf="simpleDrop">Item was dropped here</div>  
       </div>  
     </div>  
   </div>  
 </div>`  
 })  
 export class SimpleDndComponent {  
   simpleDrop: any = null;  
 }  

4. Add handle to restrict draggable zone of component

 import {Component} from '@angular/core';  
 @Component({  
   selector: 'simple-dnd-handle',  
   template: `  
 <h4>Simple Drag-and-Drop with handle</h4>  
 <div class="row">  
   <div class="col-sm-3">  
     <div class="panel panel-success">  
       <div class="panel-heading">Available to drag</div>  
       <div class="panel-body">  
         <div class="panel panel-default" dnd-draggable [dragEnabled]="true">  
           <div class="panel-body">  
             <div>  
               <span dnd-draggable-handle>=</span>&nbsp;  
               Drag Handle  
             </div>  
           </div>  
         </div>  
       </div>  
     </div>  
   </div>  
   <div class="col-sm-3">  
     <div dnd-droppable class="panel panel-info" (onDropSuccess)="simpleDrop=$event">  
       <div class="panel-heading">Place to drop</div>  
       <div class="panel-body">  
         <div *ngIf="simpleDrop">Item was dropped here</div>  
       </div>  
     </div>  
   </div>  
 </div>`  
 })  
 export class SimpleDndHandleComponent {  
   simpleDrop: any = null;  
 }  

5. Restriction Drag-and-Drop operations with drop zones

You can use property dropZones (actually an array) to specify in which place you would like to drop the draggable element:
 import {Component} from '@angular/core';  
 @Component({  
   selector: 'zone-dnd',  
   template: `  
 <h4>Restricted Drag-and-Drop with zones</h4>  
 <div class="row">  
   <div class="col-sm-3">  
     <div class="panel panel-primary">  
       <div class="panel-heading">Available to drag</div>  
       <div class="panel-body">  
         <div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dropZones]="['zone1']">  
           <div class="panel-body">  
             <div>Drag Me</div>  
             <div>Zone 1 only</div>  
           </div>  
         </div>  
       </div>  
     </div>  
     <div class="panel panel-success">  
       <div class="panel-heading">Available to drag</div>  
       <div class="panel-body">  
         <div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dropZones]="['zone1', 'zone2']">  
           <div class="panel-body">  
             <div>Drag Me</div>  
             <div>Zone 1 & 2</div>  
           </div>  
         </div>  
       </div>  
     </div>  
   </div>  
   <div class="col-sm-3">  
     <div dnd-droppable class="panel panel-info" [dropZones]="['zone1']" (onDropSuccess)="restrictedDrop1=$event">  
       <div class="panel-heading">Zone 1</div>  
       <div class="panel-body">  
         <div *ngIf="restrictedDrop1">Item was dropped here</div>  
       </div>  
     </div>  
   </div>  
   <div class="col-sm-3">  
     <div dnd-droppable class="panel panel-warning" [dropZones]="['zone2']" (onDropSuccess)="restrictedDrop2=$event">  
       <div class="panel-heading">Zone 2</div>  
       <div class="panel-body">  
         <div *ngIf="restrictedDrop2">Item was dropped here</div>  
       </div>  
     </div>  
   </div>  
 </div>`  
 })  
 export class ZoneDndComponent {  
   restrictedDrop1: any = null;  
   restrictedDrop2: any = null;  
 }  

6. Transfer custom data via Drag-and-Drop

You can transfer data from draggable to droppable component via dragData property of Draggable component:
 import {Component} from '@angular/core';  
 @Component({  
   selector: 'custom-data-dnd',  
   template: `  
 <h4>Transfer custom data in Drag-and-Drop</h4>  
 <div class="row">  
   <div class="col-sm-3">  
     <div class="panel panel-success">  
       <div class="panel-heading">Available to drag</div>  
       <div class="panel-body">  
         <div class="panel panel-default" dnd-draggable [dragEnabled]="true" [dragData]="transferData">  
           <div class="panel-body">  
             <div>Drag Me</div>  
             <div>{{transferData | json}}</div>  
           </div>  
         </div>  
       </div>  
     </div>  
   </div>  
   <div class="col-sm-3">  
     <div dnd-droppable class="panel panel-info" (onDropSuccess)="transferDataSuccess($event)">  
       <div class="panel-heading">Place to drop (Items:{{receivedData.length}})</div>  
       <div class="panel-body">  
         <div [hidden]="!receivedData.length > 0" *ngFor="let data of receivedData">{{data | json}}</div>  
       </div>  
     </div>  
   </div>  
 </div>`  
 })  
 export class CustomDataDndComponent {  
   transferData: Object = {id: 1, msg: 'Hello'};  
   receivedData: Array<any> = [];  
   transferDataSuccess($event: any) {  
     this.receivedData.push($event);  
   }  
 }  

7. Use a custom function to determine where dropping is allowed

For use-cases when a static set of dropZones is not possible, a custom function can be used to dynamically determine whether an item can be dropped or not. To achieve that, set the allowDrop property to this boolean function.

In the following example, we have two containers that only accept numbers that are multiples of a user-input base integer. dropZones are not helpful here because they are static, whereas the user input is dynamic.
 import { Component } from '@angular/core';  
 @Component({  
   selector: 'custom-function-dnd',  
   template: `  
 <h4>Use a custom function to determine where dropping is allowed</h4>  
 <div class="row">  
   <div class="col-sm-3">  
     <div class="panel panel-success">  
       <div class="panel-heading">Available to drag</div>  
       <div class="panel-body">  
         <div class="panel panel-default" dnd-draggable [dragData]="6">  
           <div class="panel-body">dragData = 6</div>  
         </div>  
         <div class="panel panel-default" dnd-draggable [dragData]="10">  
           <div class="panel-body">dragData = 10</div>  
         </div>  
         <div class="panel panel-default" dnd-draggable [dragData]="30">  
           <div class="panel-body">dragData = 30</div>  
         </div>  
       </div>  
     </div>  
   </div>  
   <div class="col-sm-6">  
     <pre>allowDropFunction(baseInteger: any): any {{ '{' }}  
  return (dragData: any) => dragData % baseInteger === 0;  
 {{ '}' }}</pre>  
     <div class="row">  
       <div class="col-sm-6">  
         <div dnd-droppable class="panel panel-info" [allowDrop]="allowDropFunction(box1Integer)" (onDropSuccess)="addTobox1Items($event)">  
           <div class="panel-heading">  
             Multiples of  
             <input type="number" [(ngModel)]="box1Integer" style="width: 4em">  
             only  
           </div>  
           <div class="panel-body">  
             <div *ngFor="let item of box1Items">dragData = {{item}}</div>  
           </div>  
         </div>  
       </div>  
       <div class="col-sm-6">  
         <div dnd-droppable class="panel panel-warning" [allowDrop]="allowDropFunction(box2Integer)" (onDropSuccess)="addTobox2Items($event)">  
           <div class="panel-heading">  
             Multiples of  
             <input type="number" [(ngModel)]="box2Integer" style="width: 4em">  
             only  
           </div>  
           <div class="panel-body">  
             <div *ngFor="let item of box2Items">dragData = {{item}}</div>  
           </div>  
         </div>  
       </div>  
     </div>  
   </div>  
 </div>  
 `  
 })  
 export class CustomFunctionDndComponent {  
   box1Integer: number = 3;  
   box2Integer: number = 10;  
   box1Items: string[] = [];  
   box2Items: string[] = [];  
   allowDropFunction(baseInteger: number): any {  
     return (dragData: any) => dragData % baseInteger === 0;  
   }  
   addTobox1Items($event: any) {  
     this.box1Items.push($event.dragData);  
   }  
   addTobox2Items($event: any) {  
     this.box2Items.push($event.dragData);  
   }  
 } 

8. Shopping basket with Drag-and-Drop

Here is an example of shopping backet with products adding via drag and drop operation:
 import { Component } from '@angular/core';  
 @Component({  
   selector: 'shoping-basket-dnd',  
   template: `  
 <h4>Drag-and-Drop - Shopping basket</h4>  
 <div class="row">  
   <div class="col-sm-3">  
     <div class="panel panel-success">  
       <div class="panel-heading">Available products</div>  
       <div class="panel-body">  
         <div *ngFor="let product of availableProducts" class="panel panel-default"  
           dnd-draggable [dragEnabled]="product.quantity>0" [dragData]="product" (onDragSuccess)="orderedProduct($event)" [dropZones]="['demo1']">  
           <div class="panel-body">  
             <div [hidden]="product.quantity===0">{{product.name}} - \${{product.cost}}<br>(available: {{product.quantity}})</div>  
             <div [hidden]="product.quantity>0"><del>{{product.name}}</del><br>(NOT available)</div>  
           </div>  
         </div>  
       </div>  
     </div>  
   </div>  
   <div class="col-sm-3">  
     <div dnd-droppable (onDropSuccess)="addToBasket($event)" [dropZones]="['demo1']" class="panel panel-info">  
       <div class="panel-heading">Shopping Basket<br>(to pay: \${{totalCost()}})</div>  
       <div class="panel-body">  
         <div *ngFor="let product of shoppingBasket" class="panel panel-default">  
           <div class="panel-body">  
           {{product.name}}<br>(ordered: {{product.quantity}}<br>cost: \${{product.cost * product.quantity}})  
           </div>  
         </div>  
       </div>  
     </div>  
   </div>  
 </div>`  
 })  
 export class ShoppingBasketDndComponent {  
   availableProducts: Array<Product> = [];  
   shoppingBasket: Array<Product> = [];  
   constructor() {  
     this.availableProducts.push(new Product('Blue Shoes', 3, 35));  
     this.availableProducts.push(new Product('Good Jacket', 1, 90));  
     this.availableProducts.push(new Product('Red Shirt', 5, 12));  
     this.availableProducts.push(new Product('Blue Jeans', 4, 60));  
   }  
   orderedProduct($event: any) {  
     let orderedProduct: Product = $event.dragData;  
     orderedProduct.quantity--;  
   }  
   addToBasket($event: any) {  
     let newProduct: Product = $event.dragData;  
     for (let indx in this.shoppingBasket) {  
       let product: Product = this.shoppingBasket[indx];  
       if (product.name === newProduct.name) {  
         product.quantity++;  
         return;  
       }  
     }  
     this.shoppingBasket.push(new Product(newProduct.name, 1, newProduct.cost));  
     this.shoppingBasket.sort((a: Product, b: Product) => {  
       return a.name.localeCompare(b.name);  
     });  
   }  
   totalCost(): number {  
     let cost: number = 0;  
     for (let indx in this.shoppingBasket) {  
       let product: Product = this.shoppingBasket[indx];  
       cost += (product.cost * product.quantity);  
     }  
     return cost;  
   }  
 }  
 class Product {  
  constructor(public name: string, public quantity: number, public cost: number) {}  
 }  

9. Simple sortable with Drag-and-Drop

Here is an example of simple sortable of favorite drinks moving in container via drag and drop operation:
 import {Component} from '@angular/core';  
 @Component({  
   selector: 'simple-sortable',  
   template: `  
 <h4>Simple sortable</h4>  
 <div class="row">  
   <div class="col-sm-3">  
     <div class="panel panel-success">  
       <div class="panel-heading">  
         Favorite drinks  
       </div>  
       <div class="panel-body">  
         <ul class="list-group" dnd-sortable-container [sortableData]="listOne">  
           <li *ngFor="let item of listOne; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">{{item}}</li>  
         </ul>  
       </div>  
     </div>  
   </div>  
   <div class="col-sm-6">  
     <div class="panel panel-default">  
       <div class="panel-body">  
         My prefences:<br/>  
         <span *ngFor="let item of listOne; let i = index">{{i + 1}}) {{item}}<br/></span>  
       </div>  
     </div>  
   </div>  
 </div>`  
 })  
 export class SimpleSortableComponent {  
   listOne: Array<string> = ['Coffee', 'Orange Juice', 'Red Wine', 'Unhealty drink!', 'Water'];  
 }  

10. Simple sortable with Drag-and-Drop handle

Add handle to restict grip zone of sortable component.
 import {Component} from '@angular/core';  
 @Component({  
   selector: 'simple-sortable-handle',  
   template: `  
 <h4>Simple sortable handle</h4>  
 <div class="row">  
   <div class="col-sm-3">  
     <div class="panel panel-success">  
       <div class="panel-heading">  
         Favorite drinks  
       </div>  
       <div class="panel-body">  
         <ul class="list-group" dnd-sortable-container [sortableData]="listOne">  
           <li *ngFor="let item of listOne; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i">  
            <span dnd-sortable-handle>=</span>&nbsp;  
            {{item}}  
           </li>  
         </ul>  
       </div>  
     </div>  
   </div>  
   <div class="col-sm-6">  
     <div class="panel panel-default">  
       <div class="panel-body">  
         My prefences:<br/>  
         <span *ngFor="let item of listOne; let i = index">{{i + 1}}) {{item}}<br/></span>  
       </div>  
     </div>  
   </div>  
 </div>`  
 })  
 export class SimpleSortableHandleComponent {  
   listOne: Array<string> = ['Coffee', 'Orange Juice', 'Red Wine', 'Unhealty drink!', 'Water'];  
 }  

11. Simple sortable With Drop into recycle bin

Here is an example of multi list sortable of boxers moving in container and between containers via drag and drop operation:
 import {Component} from '@angular/core';  
 @Component({  
   selector: 'recycle-multi-sortable',  
   template: `  
 <h4>Simple sortable With Drop into recycle bin</h4>  
 <div class="row">  
   <div class="col-sm-3">  
     <div class="panel panel-success">  
       <div class="panel-heading">  
         Favorite drinks  
       </div>  
       <div class="panel-body" dnd-sortable-container [sortableData]="listOne" [dropZones]="['delete-dropZone']">  
         <ul class="list-group">  
           <li *ngFor="let item of listOne; let i = index" class="list-group-item"  
           dnd-sortable [sortableIndex]="i">{{item}}</li>  
         </ul>  
       </div>  
     </div>  
   </div>  
   <div class="col-sm-6">  
     <div class="panel panel-default">  
       <div class="panel-body" dnd-sortable-container [dropZones]="['delete-dropZone']" [sortableData]="listRecycled">  
         Recycle bin: Drag into me to delete it<br/>  
       </div>  
     </div>  
     <div *ngIf="listRecycled.length">  
     <b>Recycled:</b> <span>{{listRecycled.toString()}} </span>  
     </div>  
   </div>  
 </div>`  
 })  
 export class RecycleMultiSortableComponent {  
   listOne: Array<string> = ['Coffee', 'Orange Juice', 'Red Wine', 'Unhealty drink!', 'Water'];  
   listRecycled: Array<string> = [];  
 }  

12. Simple sortable With Drop into something, without delete it

Here is an example of simple sortable list of items copying in target container:
 import {Component} from '@angular/core';  
 @Component({  
   selector: 'simple-sortable-copy',  
   template: `  
 <h4>Simple sortable With Drop into something, without delete it</h4>  
 <div class="row">  
   <div class="col-sm-3">  
     <div class="panel panel-warning"  
       dnd-sortable-container [sortableData]="sourceList" [dropZones]="['source-dropZone']">  
       <div class="panel-heading">Source List</div>  
       <div class="panel-body">  
         <ul class="list-group">  
           <li *ngFor="let source of sourceList; let x = index" class="list-group-item"  
             dnd-sortable [sortableIndex]="x" [dragEnabled]="true"  
             [dragData]="source">{{source.name}}</li>  
         </ul>  
       </div>  
     </div>  
   </div>  
   <div class="col-sm-6">  
     <div class="panel panel-info">  
       <div class="panel-heading">Target List</div>  
       <div class="panel-body" dnd-droppable (onDropSuccess)="addTo($event)" [dropZones]="['source-dropZone']">  
         <ul class="list-group">  
           <li *ngFor="let target of targetList" class="list-group-item">  
             {{target.name}}  
           </li>  
         </ul>  
       </div>  
     </div>  
   </div>  
 </div>`  
 })  
 export class SimpleSortableCopyComponent {  
   sourceList: Widget[] = [  
     new Widget('1'), new Widget('2'),  
     new Widget('3'), new Widget('4'),  
     new Widget('5'), new Widget('6')  
   ];  
   targetList: Widget[] = [];  
   addTo($event: any) {  
     this.targetList.push($event.dragData);  
   }  
 }  
 class Widget {  
  constructor(public name: string) {}  
 }  

13. Multi list sortable between containers

Here is an example of multi list sortable of boxers moving in container and between containers via drag and drop operation:
 import {Component} from '@angular/core';  
 @Component({  
   selector: 'embedded-sortable',  
   template: `  
 <h4>Move items between multi list sortable containers</h4>  
 <div class="row">  
   <div class="col-sm-3">  
     Drag Containers <input type="checkbox" [(ngModel)]="dragOperation"/>  
     <div dnd-sortable-container [sortableData]="containers" [dropZones]="['container-dropZone']">  
       <div class="col-sm3"  
           *ngFor="let container of containers; let i = index"  
           dnd-sortable [sortableIndex]="i" [dragEnabled]="dragOperation">  
         <div class="panel panel-warning"  
           dnd-sortable-container [sortableData]="container.widgets" [dropZones]="['widget-dropZone']">  
           <div class="panel-heading">  
             {{container.id}} - {{container.name}}  
           </div>  
           <div class="panel-body">  
             <ul class="list-group">  
               <li *ngFor="let widget of container.widgets; let x = index" class="list-group-item"  
                 dnd-sortable [sortableIndex]="x" [dragEnabled]="!dragOperation"  
                 [dragData]="widget">{{widget.name}}</li>  
             </ul>  
           </div>  
         </div>  
       </div>  
     </div>  
   </div>  
   <div class="col-sm-6">  
     <div class="panel panel-info">  
       <div class="panel-heading">Widgets</div>  
       <div class="panel-body" dnd-droppable (onDropSuccess)="addTo($event)" [dropZones]="['widget-dropZone']">  
         <div *ngFor="let widget of widgets" class="panel panel-default">  
           <div class="panel-body">  
             {{widget.name}}  
           </div>  
         </div>  
       </div>  
     </div>  
   </div>  
 </div>`  
 })  
 export class EmbeddedSortableComponent {  
   dragOperation: boolean = false;  
   containers: Array<Container> = [  
     new Container(1, 'Container 1', [new Widget('1'), new Widget('2')]),  
     new Container(2, 'Container 2', [new Widget('3'), new Widget('4')]),  
     new Container(3, 'Container 3', [new Widget('5'), new Widget('6')])  
   ];  
   widgets: Array<Widget> = [];  
   addTo($event: any) {  
     if ($event) {  
       this.widgets.push($event.dragData);  
     }  
   }  
 }  
 class Container {  
  constructor(public id: number, public name: string, public widgets: Array<Widget>) {}  
 }  
 class Widget {  
  constructor(public name: string) {}  
 }  

14. Simple FormArray sortable with Drag-and-Drop

Here is an example of simple sortable of favorite drinks moving in container via drag and drop operation but using FormArray instead of Array:
 import {Component} from '@angular/core';  
 import {FormArray, FormControl} from '@angular/forms';  
 @Component({  
   selector: 'simple-formarray-sortable',  
   template: `  
 <h4>Simple FormArray sortable</h4>  
 <div class="row">  
   <div class="col-sm-3">  
     <div class="panel panel-success">  
       <div class="panel-heading">  
         Favorite drinks  
       </div>  
       <div class="panel-body">  
         <ul class="list-group" dnd-sortable-container [sortableData]="listOne">  
           <li *ngFor="let item of listOne.controls; let i = index" class="list-group-item" dnd-sortable [sortableIndex]="i"><input type="text" [formControl]="item"></li>  
         </ul>  
       </div>  
     </div>  
   </div>  
   <div class="col-sm-6">  
     <div class="panel panel-default">  
       <div class="panel-body">  
         My prefences:<br/>  
         <span *ngFor="let item of listOne.controls; let i = index">{{i + 1}}) {{item.value}}<br/></span>  
       </div>  
     </div>  
   </div>  
 </div>`  
 })  
 export class SimpleFormArraySortableComponent {  
   listOne: FormArray = new FormArray([  
    new FormControl('Coffee'),  
    new FormControl('Orange Juice'),  
    new FormControl('Red Wine'),  
    new FormControl('Unhealty drink!'),  
    new FormControl('Water')  
   ]);  
 }  

How to pass multiple data in dragData while dragging ?

  1. As an array:

  2.  [dragData]="[aComponent,'component-in-bar']"  
    
     loadComponent($event){  
       console.log($event.dragData[0]); // aComponent   
       console.log($event.dragData[1]); // 'component-in-bar' OR 'component-in-designer'   
     }  
    
  3. As an object:

  4.  [dragData]="{component: aComponent, location: 'component-in-bar'}"  
    
     loadComponent($event){  
       console.log($event.dragData.component); // aComponent   
       console.log($event.dragData.location); // 'component-in-bar' OR 'component-in-designer'   
     }  
    

Retreiving files in a drop zone

Since it is possible to drag and drop one or more files to a drop zone, you need to handle the incoming files.
 import {Component} from '@angular/core';  
 import {Http, Headers} from '@angular/http';  
 import {DND_PROVIDERS, DND_DIRECTIVES} from 'ng2-dnd/ng2-dnd';  
 import {bootstrap} from '@angular/platform-browser-dynamic';  
 bootstrap(AppComponent, [  
   DND_PROVIDERS // It is required to have 1 unique instance of your service  
 ]);  
 @Component({  
   selector: 'app',  
   directives: [DND_DIRECTIVES],  
   template: `  
 <h4>Simple Drag-and-Drop</h4>  
 <div class="row">  
   <div class="col-sm-3">  
     <div dnd-droppable class="panel panel-info"  
       (onDropSuccess)="transferDataSuccess($event)">>  
       <div class="panel-heading">Place to drop</div>  
       <div class="panel-body">  
       </div>  
     </div>  
   </div>  
 </div>  
 `  
 })  
 export class AppComponent {  
  constructor(private _http: Http) { }  
   /**  
   * The $event is a structure:  
   * {  
   *  dragData: any,  
   *  mouseEvent: MouseEvent  
   * }  
   */  
  transferDataSuccess($event) {  
   // let attachmentUploadUrl = 'assets/data/offerspec/offerspec.json';  
   // loading the FileList from the dataTransfer  
   let dataTransfer: DataTransfer = $event.mouseEvent.dataTransfer;  
   if (dataTransfer && dataTransfer.files) {  
    // needed to support posting binaries and usual form values  
    let headers = new Headers();  
    headers.append('Content-Type', 'multipart/form-data');  
    let files: FileList = dataTransfer.files;  
    // uploading the files one by one asynchrounusly  
    for (let i = 0; i < files.length; i++) {  
     let file: File = files[i];  
     // just for debugging  
     console.log('Name: ' + file.name + '\n Type: ' + file.type + '\n Size: ' + file.size + '\n Date: ' + file.lastModifiedDate);  
     // collecting the data to post  
     var data = new FormData();  
     data.append('file', file);  
     data.append('fileName', file.name);  
     data.append('fileSize', file.size);  
     data.append('fileType', file.type);  
     data.append('fileLastMod', file.lastModifiedDate);  
     // posting the data  
     this._http  
      .post(attachmentUploadUrl, data, {  
       headers: headers  
      })  
      .toPromise()  
      .catch(reason => {  
       console.log(JSON.stringify(reason));  
      });  
    }  
   }  
  }  
 }  

Credits

  • [Francesco Cina](https://github.com/ufoscout) 
  • [Valerii Kuznetsov](https://github.com/solival) 
  • [Shane Oborn](https://github.com/obosha) 
  • [Juergen Gutsch](https://github.com/JuergenGutsch) 
  • [Damjan Cilenšek](https://github.com/loudandwicked) 

License

MIT

Wiki Documentation


Note: Special thanks to Sergey Akopkokhyants
Contact: akserg@gmail.com
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
ng-spin-kit

ng-spin-kit

October 20, 2017
SpinKit (https://github.com/tobiasahlin/SpinKit) spinners for Angular 2+
Inspired by angular-spinkit (https://github.com/Urigo/angular-spinkit)

Usage

  1. Install with NPM:
     npm install ng-spin-kit --save 
     
  2. Import one component
     import { NgSpinKitModule } from 'ng-spin-kit'  
    
     
  3. Use it:
     // app.component.ts  
     import { Component } from '@angular/core';  
     @Component({  
      selector: 'app',  
      template: `  
       <h3>rotating-plane</h3>  
       <sk-rotating-plane></sk-rotating-plane>  
       <h3>double-bounce</h3>  
       <sk-double-bounce></sk-double-bounce>  
       <h3>wave</h3>  
       <sk-wave></sk-wave>  
       <h3>wandering-cubes</h3>  
       <sk-wandering-cubes></sk-wandering-cubes>  
       <h3>pulse</h3>  
       <sk-pulse></sk-pulse>  
       <h3>chasing-dots</h3>  
       <sk-chasing-dots></sk-chasing-dots>  
       <h3>circle</h3>  
       <sk-circle></sk-circle>  
       <h3>three-bounce</h3>  
       <sk-three-bounce></sk-three-bounce>  
       <h3>cube-grid</h3>  
       <sk-cube-grid></sk-cube-grid>  
       <h3>word-press</h3>  
       <sk-word-press></sk-word-press>  
       <h3>fading-circle</h3>  
       <sk-fading-circle></sk-fading-circle>  
       <h3>folding-cube</h3>  
       <sk-folding-cube></sk-folding-cube>  
      `  
     })  
     export class AppComponent {}  
     // app.module.ts  
     import { NgModule } from 'angular2/core';  
     import { BrowserModule } from '@angular/platform-browser';  
     import { AppComponent } from './app.component';  
     import { NgSpinKitModule } from 'ng-spin-kit';  
     @Component({  
      imports: [  
       BrowserModule,  
       NgSpinKitModule  
      ],  
      declarations: [  
       AppComponent,  
      ],  
      bootstrap: [  
       AppComponent  
      ]  
     })  
    

For every component you can set:
 [isRunning]: boolean - state of the spinner, true - visible, false - hidden, default: true  

 [delay]: number - representing the milliseconds to wait, before showing the spinner, default: 0  

 [color]: string - background color for each item  
You can generate JavaScript code based on TypeScript by:
 npm run tsc  
To regenerate typings:
 npm run typings  
To compile and run demo app in browser:
 npm start  

Note: Special thanks to Wolters Kluwer
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
angular2-flash-messages

angular2-flash-messages

October 18, 2017
This is a simple module that provides component and service for showing flash messages.

Requirements

NPM - Node package manager

Installation

  • run npm install angular2-flash-messages --save
  • import FlashMessagesModule in your app's main module app.module.ts, e.g.: 

 // other imports  
 // ...  
 import { FlashMessagesModule } from 'angular2-flash-messages';  
 // ...  
 @NgModule({  
   imports: [  
     // other imports  
     // ...  
     FlashMessagesModule,  
     // ...  
   ]  
 })  
That should be enough if you use Webpack to bundle JavaScript.
Otherwise you'll have to edit systemjs.config.js to set correct path, e.g.:
 // below you can see an example of map and packages sections in systemjs.config.js  
 System.config({  
   paths: {  
    // paths serve as alias  
    'npm:': 'node_modules/'  
   },  
   // map tells the System loader where to look for things  
   map: {  
     // other  
     'angular2-flash-messages':  'npm:angular2-flash-messages',  
     // other  
   },  
   // packages tells the System loader how to load when no filename and/or no extension  
   packages: {  
     // other  
     "angular2-flash-messages": {  
       main: 'index.js',  
       defaultExtension: 'js'  
     },  
     // other  
   }  
 });  

Usage

Place flash messages component selector in a template, for example in AppComponent:
 import { Component } from "@angular/core";  
 @Component({  
   selector: 'my-app',  
   template: `  
     <flash-messages></flash-messages>  
     <router-outlet></router-outlet>  
   `  
 })  
 export class AppComponent {}  
Import FlashMessagesService and show flash message in any component, e.g.:
 import { Component, OnInit } from '@angular/core';  
 import { FlashMessagesService } from 'angular2-flash-messages';  
 @Component({  
   template: `  
     <p>About Component</p>  
   `  
 })  
 export class AboutComponent implements OnInit {  
   constructor(private _flashMessagesService: FlashMessagesService) {}  
   ngOnInit() {  
     // 1st parameter is a flash message text  
     // 2nd parameter is optional. You can pass object with options.  
     this._flashMessagesService.show('We are in about component!', { cssClass: 'alert-success', timeout: 1000 });  
   }  
 }  
By default flash message is visible for 2.5 seconds and then deleted. You can pass second argument and specify for how long flash message should be visible, e.g.:
 // flash message will be visible for 1 second  
 this._flashMessagesService.show('We are in about component!', { timeout: 1000 });  
You can specify CSS class for flash message div-element, e.g.:
 // set CSS-class for wrapper div of flash message  
 this._flashMessagesService.show('We are in about component!', { cssClass: 'your-css-class' });  
You can show multiple flash messages, e.g.:
 this._flashMessagesService.show('Success!', { cssClass: 'alert-success' } );  
 this._flashMessagesService.show('Failure!', { cssClass: 'alert-danger' } );  
Also you can gray out everything except your flash messages, e.g.:
 this._flashMessagesService.grayOut(true); // turn on gray out feature  
 this._flashMessagesService.grayOut(false); // turn off gray out feature  
By default gray out is disabled.
Notice! You have to add some CSS to see gray out in action, e.g.:
 #grayOutDiv  
 {  
   background-color: #333;  
   opacity: 0.7;  
   position: fixed;  
   top: 0px;  
   left: 0px;  
   height: 100%;  
   width: 100%;  
   overflow: hidden;  
   z-index: 9999;  
 }  
 .flash-message  
 {  
   z-index: 10000;  
   position: relative;  
 }  

License

The repository code is open-sourced software licensed under the MIT license.
Note: Special thanks to Paul Moff
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
angular2-ladda

angular2-ladda

October 17, 2017
This is a module for Angular 2+ that implements Ladda.

Demo

http://lab.hakim.se/ladda/

Installation

  • run npm install angular2-ladda --save
  • 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">  
or import it in app.scss, e.g.:
 @import "node_modules/ladda/css/ladda"; 
  • LaddaModule
in your app's main module app.module.ts, e.g.:
 // other imports  
 // ...  
 import { LaddaModule } from 'angular2-ladda';  
 // ...  
 @NgModule({  
   imports: [  
     // other imports  
     // ...  
     LaddaModule,  
     // ...  
   ]  
 });  
Also you can configure Ladda defaults, e.g.:
 // other imports  
 // ...  
 import { LaddaModule } from 'angular2-ladda';  
 // ...  
 @NgModule({  
   imports: [  
     // other imports  
     // ...  
     LaddaModule.forRoot({  
       style: "contract",  
       spinnerSize: 40,  
       spinnerColor: "red",  
       spinnerLines: 12  
     }),  
     // ...  
   ]  
 });  
That should be enough if you use Webpack to bundle JavaScript.
Otherwise you'll have to edit systemjs.config.js to set correct path, e.g.:
 // below you can see an example of map and packages sections in systemjs.config.js  
 // ...  
 // map tells the System loader where to look for things  
 var map = {  
   // ...  
   'angular2-ladda': 'node_modules/angular2-ladda/module',  
   'ladda':     'node_modules/ladda/js',  
   'spin':      'node_modules/ladda/js/spin.js',  
   // ...  
 };  
 // packages tells the System loader how to load when no filename and/or no extension  
 var packages = {  
   // ...  
   'angular2-ladda': { main: 'module.js', defaultExtension: 'js' },  
   'ladda':     { main: 'ladda.js', defaultExtension: 'js' },  
   // ...  
 };  
 // ...  

Usage

Add [ladda]="isLoading" to a button tag in template, e.g.:
 <button [ladda]="isLoading">Save</button>  
In the component you'll have to toggle value of isLoading variable to show\hide Ladda's spinner, e.g.:
 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;  
   }  
 } 
Also buttons accept the following attributes:
  • data-style: one of the button styles, full list in demo
  • data-spinner-size: 40, 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);  
   }  
 }  

License

The repository code is open-sourced software licensed under the MIT license.
Note: Special thanks to Paul Moff
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.