https://github.com/waseemdev/ng-interactions
Angular library that let you code in HTML.
https://github.com/waseemdev/ng-interactions
angular html typescript
Last synced: 14 days ago
JSON representation
Angular library that let you code in HTML.
- Host: GitHub
- URL: https://github.com/waseemdev/ng-interactions
- Owner: waseemdev
- License: mit
- Created: 2018-02-15T14:20:24.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2018-02-25T08:38:46.000Z (over 8 years ago)
- Last Synced: 2025-02-01T15:46:37.692Z (over 1 year ago)
- Topics: angular, html, typescript
- Language: TypeScript
- Homepage:
- Size: 24.4 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Angular Interactions
This is an experimental library for Angular.
The main purpose is to provide a discriptive language using HTML tags.
Consists of Triggers and Actions.
# Setup
1. install via npm:
```
npm i ng-interactions@latest --save
```
2. Import NgInteractionsModule in you module
```typescript
import { NgInteractionsModule } from "ng-interactions";
@NgModule({
imports: [
NgInteractionsModule,
....
]
})
export class AppModule { }
```
# Triggers
## 1. Event Trigger:
Event Trigger will subscribe to an event of a given object, and will execute the actions when the event fires:
```html
...actions go here...
```
Or
```html
...actions go here...
```
Or
```html
...actions go here...
Click me!
```
`element`: property can be an HTML Element or an object. if `element` was not provided, default element will be the parent of `event-trigger`.
`on`: property is a name of a known HTML event or an observable member in `element`.
## 2. State Trigger:
State Trigger fires when the condition changes to true.
You can provide either (value1), (value2) or (value1, oper, value2):
```html
...actions go here...
```
```html
...actions go here...
```
```html
...actions go here...
```
# Actions
Action is like a block of code that can be executed.
All actions have `delay` property to delay the execution, you can pass a number (in ms) or a Date.
All actions have `param` property to pass parameters from Angular scope to your code scope, see [Custom Binding](#Custom-Binding) section.
## 1. css
`element` property can be a string to query (#id, .class...) or an HTML element.
```html
```
## 2. css-class
```html
```
## 3. css-translate
```html
```
## 4. css-rotate
```html
```
## 5. css-scale
```html
```
## 6. css-skew
```html
```
## 7. css-matrix
TODO
## 8. exec
```html
```
You can pass a callback parameter like this:
```html
acctions...
```
## 9. func
TODO
## 10. set
```html
```
## 11. if
`if` condition can be set by providing either (value1), (value2) or (value1, oper, value2):
```html
body goes here...
else goes here...
```
```html
```
```html
```
```html
```
```html
```
## 12. switch
```html
case 'a' body goes here...
case 'b' body goes here...
case 'c' body goes here...
```
## 13. counter
`indexVar` default value is `$index`
`from` default value is `0`
`by` default value is `1`
```html
```
## 14. foreach
`itemVar` default value is `$item`.
`indexVar` default value is `$index`.
```html
```
## 15. while
```html
...
```
# Custom Binding
You can always use Angular binding (e.g. [value1]="value") with any property in any action or trigger.
Using Angular binding may become a performance issue, instead, you can use `prop=":rest of code..."` to use a simple binding that evaluates only when needed.
Example:
```html
...
```
Unlike Angular, the code after `:` can't access variables outside the scope, only can access variables that passed in `[param]` attribute.
Example of passing param:
```html
```
# Extending Triggers
Trigger is an Angular Component, inherted from TriggerBase.
Example:
```javascript
import { Component } from '@angular/core';
import { TriggerBase } from 'ng-interactions';
@Component({
selector: 'my-trigger',
template: ''
})
export class MyCustomTrigger extends TriggerBase {
constructor() {
super();
}
protected onLoad() {
// trigger loaded === ngAfterViewInit()
}
when_you_need_to_execute_actions() {
this.fire(params);
}
}
```
# Extending Actions
Action is an Angular Component inherted from `ActionBase`, and implements `executeInternal` function.
Don't forget to add `providers` to be discoverable and executed automatically.
Example:
```javascript
import { Component, forwardRef } from '@angular/core';
import { ActionBase } from 'ng-interactions';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/empty';
@Component({
selector: 'my-action',
template: '',
providers: [{provide: ActionBase, useExisting: forwardRef(() => MyCustomAction) }]
})
export class MyCustomAction extends ActionBase {
constructor() {
super();
}
@Input() myProp: any;
protected executeInternal(params: any): Observable {
// custom implementation goes here...
// call tryExecuteCode to evaluate code from myProp (e.g. myProp=":user code...").
let value = this.tryExecuteCode(params, this.myProp);
// use `value` as you want.
// call extendParams to extend parameters to
params = this.extendParams(params);
let value = this.tryExecuteCode(params, this.myProp);
return Observable.empty();
}
}
```