All Projects → cvuorinen → Angular1 Async Filter

cvuorinen / Angular1 Async Filter

Licence: mit
Angular2 async pipe implemented as Angular 1 filter to handle promises & RxJS observables

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Angular1 Async Filter

mst-effect
💫 Designed to be used with MobX-State-Tree to create asynchronous actions using RxJS.
Stars: ✭ 19 (-67.8%)
Mutual labels:  rxjs, promise, observable
axios-for-observable
A RxJS wrapper for axios, same api as axios absolutely
Stars: ✭ 13 (-77.97%)
Mutual labels:  rxjs, observable
observable-playground
Know your Observables before deploying to production
Stars: ✭ 96 (+62.71%)
Mutual labels:  rxjs, observable
Recycle
Convert functional/reactive object description using RxJS into React component
Stars: ✭ 374 (+533.9%)
Mutual labels:  rxjs, observable
polyrhythm
A 3Kb full-stack async effect management toolkit over RxJS. Uses a Pub-Sub paradigm to orchestrate Observables in Node, or the browser (ala Redux Saga). Exports: channel, listen, filter, trigger, after.
Stars: ✭ 23 (-61.02%)
Mutual labels:  rxjs, observable
rx-ease
Spring animation operator for rxjs 🦚✨
Stars: ✭ 16 (-72.88%)
Mutual labels:  rxjs, observable
Formily
Alibaba Group Unified Form Solution -- Support React/ReactNative/Vue2/Vue3
Stars: ✭ 6,554 (+11008.47%)
Mutual labels:  rxjs, observable
observe-component
A library for accessing React component events as reactive observables
Stars: ✭ 36 (-38.98%)
Mutual labels:  rxjs, observable
Ngx Restangular
Restangular for Angular 2 and higher versions
Stars: ✭ 787 (+1233.9%)
Mutual labels:  rxjs, observable
Jocs.github.io
💯Jocs 的个人博客,所有的文章都在 issues 里面
Stars: ✭ 840 (+1323.73%)
Mutual labels:  promise, angularjs
Vsphere Connect
A modern vSphere Client
Stars: ✭ 14 (-76.27%)
Mutual labels:  promise, observable
react-with-observable
Use Observables with React declaratively!
Stars: ✭ 108 (+83.05%)
Mutual labels:  rxjs, observable
rjax
base on rxjs awesome ajax library
Stars: ✭ 63 (+6.78%)
Mutual labels:  rxjs, observable
rx-ipc-electron
Pass RxJS Observables through IPC in Electron
Stars: ✭ 28 (-52.54%)
Mutual labels:  rxjs, observable
BittrexRx
BittrexRx is a rxjs node wrapper for the Bittrex Api
Stars: ✭ 16 (-72.88%)
Mutual labels:  rxjs, observable
Hstardoc
My blogs write with markdown.
Stars: ✭ 297 (+403.39%)
Mutual labels:  rxjs, angularjs
Evolui
A tiny reactive user interface library, built on top of RxJs.
Stars: ✭ 43 (-27.12%)
Mutual labels:  rxjs, observable
monogram
Aspect-oriented layer on top of the MongoDB Node.js driver
Stars: ✭ 76 (+28.81%)
Mutual labels:  rxjs, observable
ADM-treeView
Pure AngularJs TreeView
Stars: ✭ 30 (-49.15%)
Mutual labels:  angularjs, promise
Asyncro
⛵️ Beautiful Array utilities for ESnext async/await ~
Stars: ✭ 487 (+725.42%)
Mutual labels:  promise, filter

Angular1 async filter

Angular2 async pipe implemented as Angular 1 filter to handle Promises & RxJS Observables

The async filter takes a Promise or Observable as input and subscribes to the input automatically, eventually returning the emitted value(s) similarly as with Angular2 Async pipe. Works with RxJS Observables even without https://github.com/Reactive-Extensions/rx.angular.js

Install

Install from npm:

npm install angular1-async-filter --save

And bundle with Browserify, Webpack etc.

Or install with bower:

bower install angular1-async-filter --save

And add script to html:

<script src="bower_components/angular1-async-filter/async-filter.js"></script>

Add Angular module dependency. For example:

angular.module('myApp', ['asyncFilter']);

Usage

Basic usage:

<div>Value: {{ promiseOrObservable | async }}</div>

Works with any directive that takes an expression, like ng-if, ng-show and ng-repeat etc.

<ul>
    <li ng-repeat="item in list|async">{{ item }}</li>
</ul>

Angular $q and $http promises automatically trigger digest cycle when they resolve so all views will get updated. For compatibility with RxJS Observables, as well as other Promise or Observable implementations, you can provide the current scope as a parameter to the filter, which will then automatically trigger digest cycle whenever a new value is emitted:

<div ng-if="{{ observable | async:this }}">
    Value: {{ observable | async:this }}
</div>

If you are using the safeApply operator from https://github.com/Reactive-Extensions/rx.angular.js for example, then this is not needed.

Live example: http://jsbin.com/qoxaqo/edit?html,js,output

License

MIT

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].