ngDraggable

ngDraggable

September 27, 2018
Drag and drop module for Angular JS with support for touch devices. demo.

Usage:

  • Install: bower install ngDraggable
  • Add angular and ngDraggable to your code:
 <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>  
 <script src="ngDraggable.js"></script>  
  • Add a dependency to the ngDraggable module in your application.
 angular.module('app', ['ngDraggable']);  
  • Add attribute directives to your html:
Draggable usage:
 <div ng-drag="true" ng-drag-data="{obj}" ng-drag-success="onDragComplete($data,$event)" ng-center-anchor="true">  
  Draggable div  
 </div>  
  • ng-center-anchor is optional. If not specified, it defaults to false.
  • If the draggable is also clickable (ng-click, ng-dblclick) the script wont react.
  • You can define a drag-button as child with the attribute ng-drag-handle.
ng-drag-start and ng-drag-move is also available. Add to the ng-drop element. ng-drag-stop can be used when you want to react to the user dragging an item and it wasn't dropped into the target container.
draggable:start, draggable:move and draggable:end events are broadcast on drag actions.
Drop area usage:
 <div ng-drop="true" ng-drop-success="onDropComplete($data,$event)" >  
  Drop area  
 </div>  

Angular Controller:

 app.controller('MainCtrl', function ($scope) {  
   $scope.onDragComplete=function(data,evt){  
     console.log("drag success, data:", data);  
   }  
   $scope.onDropComplete=function(data,evt){  
     console.log("drop success, data:", data);  
   }  
  };  

Examples

Drag and drop.
Re-ordering.
Cloning.
Canceling.

Pull requests

We welcome pull requests but please check that all the examples still work if you modified the source base. There have been serveral PRs recently that broke core functionality. If you are feeling really keen you could include some protractor test cases in your PR.
Note: Special thanks to Philip Andrews
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
ngx-bootstrap

ngx-bootstrap

September 22, 2018
Native Angular directives for Bootstrap http://valor-software.com/ngx-bootstrap

Links

Table of contents

  1. Getting Started
  2. Installation instructions
  3. Usage & Demo
  4. API
  5. Troubleshooting
  6. Contributing
  7. License

Getting Started

ngx-bootstrap contains all core (and not only) Bootstrap components powered by Angular. So you don't need to include original JS components, but we are using markup and css provided by Bootstrap.

Installation instructions

Install ngx-bootstrap from npm
 npm install ngx-bootstrap --save
You will need bootstrap styles (Bootstrap 3)
 

Or Bootstrap 4
 

To enable bootstrap 4 theme templates in ngx-bootstrap, please read this.

Usage & Demo

Main source of API documentation and usage scenarios available here: https://valor-software.com/ngx-bootstrap/
Additionally you can find demos and docs deployed from latest code with angular v4 and angular v5
Server side rendered version of this documentation available here

API

Check demo page for API reference

How to use it with:

How to build lib for development

First time
  • clone repository
  • npm install
  • npm run test it will build the lib and create a link in node_modules
To run bootstrap 3 and 4 demo:
  • npm run demo.serve to serve local demo. This is for testing only, without watchers.
For local development run
  • npm run build.watch in first terminal
  • ng serve in second
If you want to run the demo with Angular Universal:
  • npm run demo.serve-universal

Troubleshooting

So if you are in trouble, here's where you can look for help.
The best place to ask questions is on StackOverflow (under the ngx-bootstrap tag) You can also join our Slack channel and link your stackoverflow question there. But try to avoid asking generic help questions directly on Slack since they can easily get lost in the chat. You can also search among the existing GitHub issues.
If, and only if, none of the above helped, please open a new issue.

Note: Special thanks to Valor Software
Contact: dmitriy.shekhovtsov@valor-software.com
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
@ngui-react

@ngui-react

September 11, 2018
Angular2 Directive For React Component

Note:

After 0.3.0 or higher, ng2-react has been changed to @ngui/react. Here are the changes;
  • Module ng2-react is changed to @ngui/react
  • Direvtive ng2-react is changed to ngui-react
  • Class name Ng2React is changed to NguiReact

With @ngui/react, we can do the following from Angular2

  • Pass read-only props to React component
  • Call a function in React component
  • Fire event in React componet
  • Set state of React componet
You need more? Please log a feature requirement

How Does It Work

  1. Angular renders ngui-react component with the following attributes;
  • reactComponent, A React component to render. Let's call it as MyComp.
  • reactProps, react props for the React component, MyComp.
  • reactState, the initial state to be used by MyComp
  1. ngui-react create and render React component using;
  • React.createElement()
  • React.render()

Access ReactJS properties

You can access react element and instance from Angular component.
  • reactElement: the react element from React.createElement()
  • reactInstance: the react instance from React.render()

Install

  1. install @ngui/react
     $ npm install @ngui/react --save  
    
  2. import NguiReactModule to your AppModule
  3.  import { NgModule } from '@angular/core';  
      import { FormsModule } from "@angular/forms";  
      import { BrowserModule } from '@angular/platform-browser';  
      import { AppComponent } from './app.component';  
      import { NguiReactModule } from '@ngui/react';  
      @NgModule({  
       imports: [BrowserModule, FormsModule, NguiReactModule],  
       declarations: [AppComponent],  
       bootstrap: [ AppComponent ]  
      })  
      export class AppModule { }  
    
For full example, please check out app directory to see the example of
  • app.module.ts
  • and app.component.ts

Example Usage

hello.ts

 class Hello extends React.Component {  
  render() {  
   return <div>Hello {this.props.name}</div>;  
  }  
 }  

my-app.ts

 import { Component, ViewChild } from '@angular/core';  
 import { Hello } from "./hello"; // This is a react component  
 @Component({  
  selector: 'my-app',  
  template: `  
   <ngui-react   
    [reactComponent]="Hello"  
    [reactProps]="{name:'angular2 react wrapper'}">  
   </ngui-react>  


Note: Special thanks to ng2-ui

Contact: allenhwkim@gmail.com

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
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.
coconspirators

coconspirators

July 05, 2018
:telephone_receiver: Microservice framework for RabbitMQ written in TypeScript

Description

coconspirators is a microservice framework for RabbitMQ written in TypeScript. Under the hood it uses qmqp.node, the battle-tested AMQP client, to communicate with RabbitMQ and has best-practices baked in. Features include:
  • Simple API for subscribing, publish and replying
  • DI Friendly
  • TypeScript First

 

Install

 npm i coconspirators --S  

Building

 npm run build  

Usage

 import { Queue, AmqpQueue, AmqpClient } from 'coconspirators';  
 export class AmqpServer {  
  connection: Promise<any>;  
  constructor(public client: AmqpClient, logger: Logger) {  
   this.connection = this.client.connect();  
   client.on('connected', () => console.log('connected!'));  
   client.on('disconnected', () => console.log('disconnected!'));  
  }  
 }  
 interface ZooMessage {  
  animal: string;  
 }  
 @Queue({  
  name: 'health'  
  contentType: 'application/json'  
 })  
 export class HealthQueue extends AmqpQueue<ZooMessage> {  
  constructor(client: AmqpClient) { super(client); }  
 }  
 export class HealthChecker {  
  constructor(queue: HealthQueue) {  
   this.queue.publish({ hi: true });  
   this.queue.subscribe((message: ZooMessage) => {  
    console.log('message', message);  
   })  
  }  
 }  

Credits

ngx-datatable is a Swimlane open-source project; we believe in giving back to the open-source community by sharing some of the projects we build for our application. Swimlane is an automated cyber security operations and incident response platform that enables cyber security teams to leverage threat intelligence, speed up incident response and automate security operations.

Note: Special thanks to Swimlane

Contact: info@swimlane.com

Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.
@ngrx/notify

@ngrx/notify

June 27, 2018

Web Notifications Powered by RxJS for Angular 2

Easily create and handle desktop notifications in Angular 2

Installation

Install @ngrx/notify from npm:

npm install @ngrx/notify --save

Setup the providers, optionally providing global notification options:

import { NOTIFY_PROVIDERS, NOTIFY_GLOBAL_OPTIONS } from '@ngrx/notify';

bootstrap(App, [
  NOTIFY_PROVIDERS,
  { provide: NOTIFY_GLOBAL_OPTIONS, multi: true, useValue: { /* global options here */ } }
])
 

Usage

Requesting Notification Permission

Before creating notifications, you must resolve the app's notification permission:
class AppComponent {
  constructor(notify: Notify) {
    notify.requestPermission().subscribe(permission => {
      if (permission) {
        // continue
      }
    });
  }
}
 

Creating a Notification

To create a notification observable, call the open() method with a title and optional config. The notification will be opened when you subscribe to the observable and will close after you unsubscribe from it. The observable will emit the instance of the notification every time it is clicked on:

notify.open('Hello world!', options)
  // Automatically close the notification after 5 seconds
  .takeUntil(Observable.timer(5000))
  // Close the notification after it has been clicked once
  .take(1)
  .subscribe(notification => {

  });

See the documentation on MDN for available options.