{"id":25825739,"url":"https://github.com/waseemdev/ng-interactions","last_synced_at":"2026-05-20T07:12:52.348Z","repository":{"id":57310689,"uuid":"121638155","full_name":"waseemdev/ng-interactions","owner":"waseemdev","description":"Angular library that let you code in HTML.","archived":false,"fork":false,"pushed_at":"2018-02-25T08:38:46.000Z","size":25,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-01T15:46:37.692Z","etag":null,"topics":["angular","html","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/waseemdev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-02-15T14:20:24.000Z","updated_at":"2018-03-12T01:58:49.000Z","dependencies_parsed_at":"2022-09-08T02:26:22.460Z","dependency_job_id":null,"html_url":"https://github.com/waseemdev/ng-interactions","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waseemdev%2Fng-interactions","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waseemdev%2Fng-interactions/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waseemdev%2Fng-interactions/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/waseemdev%2Fng-interactions/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/waseemdev","download_url":"https://codeload.github.com/waseemdev/ng-interactions/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241169139,"owners_count":19921563,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angular","html","typescript"],"created_at":"2025-02-28T14:45:49.985Z","updated_at":"2026-05-20T07:12:47.312Z","avatar_url":"https://github.com/waseemdev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\n# Angular Interactions\nThis is an experimental library for Angular.\nThe main purpose is to provide a discriptive language using HTML tags.\nConsists of Triggers and Actions.\n\n# Setup\n\n1. install via npm:\n```\nnpm i ng-interactions@latest --save\n```\n2. Import NgInteractionsModule in you module\n```typescript\nimport { NgInteractionsModule } from \"ng-interactions\";\n\n@NgModule({\n    imports: [\n        NgInteractionsModule,\n        ....\n    ]\n})\nexport class AppModule { }\n```\n\n# Triggers\n\n## 1. Event Trigger:\nEvent Trigger will subscribe to an event of a given object, and will execute the actions when the event fires:\n```html\n\u003cevent-trigger on=\"click\" element=\"#element-id\"\u003e\n    ...actions go here...\n\u003c/event-trigger\u003e\n```\nOr \n```html\n\u003cevent-trigger on=\"click\" [element]=\"element\"\u003e\n    ...actions go here...\n\u003c/event-trigger\u003e\n```\nOr \n```html\n\u003cbutton\u003e\n    \u003cevent-trigger on=\"click\"\u003e\n        ...actions go here...\n    \u003c/event-trigger\u003e\n    Click me!\n\u003c/button\u003e\n```\n`element`: property can be an HTML Element or an object. if `element` was not provided, default element will be the parent of `event-trigger`.\n\n`on`: property is a name of a known HTML event or an observable member in `element`.\n\n## 2. State Trigger:\nState Trigger fires when the condition changes to true.\nYou can provide either (value1), (value2) or (value1, oper, value2):\n```html\n\u003cstate-trigger [value1]=\"object\" oper=\"===\" value2=\"some value\"\u003e\n    ...actions go here...\n\u003c/state-trigger\u003e\n```\n```html\n\u003cstate-trigger [value1]=\"value\"\u003e\n    ...actions go here...\n\u003c/state-trigger\u003e\n```\n```html\n\u003cstate-trigger [value2]=\"value\"\u003e\n    ...actions go here...\n\u003c/state-trigger\u003e\n```\n\n\n# Actions\nAction is like a block of code that can be executed.\n\nAll actions have `delay` property to delay the execution, you can pass a number (in ms) or a Date.\n\nAll actions have `param` property to pass parameters from Angular scope to your code scope, see [Custom Binding](#Custom-Binding) section.\n\n## 1. css\n`element` property can be a string to query (#id, .class...) or an HTML element.\n\n```html\n\u003ccss element=\"#cover\" property=\"height\" value=\"10px\" [delay]=\"300\"\u003e\u003c/css\u003e\n```\n\n## 2. css-class\n```html\n\u003ccss element=\"#cover\" add=\"class-to-add\" remove=\"class-to-remove\" toggle=\"class-to-toggle\"\u003e\u003c/css\u003e\n```\n\n## 3. css-translate\n```html\n\u003ccss-translate element=\"#cover\" property=\"x\" value=\"100px\"\u003e\u003c/css-translate\u003e\n```\n\n## 4. css-rotate\n```html\n\u003ccss-rotate element=\"#cover\" property=\"z\" value=\"90px\"\u003e\u003c/css-rotate\u003e\n```\n\n## 5. css-scale\n```html\n\u003ccss-scale element=\"#cover\" property=\"x\" value=\"90px\"\u003e\u003c/css-scale\u003e\n```\n\n## 6. css-skew\n```html\n\u003ccss-skew element=\"#cover\" property=\"z\" value=\"90px\"\u003e\u003c/css-skew\u003e\n```\n\n## 7. css-matrix\nTODO\n\n\n## 8. exec\n```html\n\u003cexec [source]=\"object\" function=\"someFunction\" [params]=\"[]\"\u003e\u003c/exec\u003e\n```\n\nYou can pass a callback parameter like this:\n```html\n\u003cexec function=\":setTimeout\" [params]=\"[,500]\"\u003e\n    \u003ccallback-param index=\"0\"\u003e \u003c!-- index=\"0\" is the default --\u003e\n        acctions...\n    \u003c/callback-param\u003e\n\u003c/exec\u003e\n```\n\n## 9. func\nTODO\n\n## 10. set\n```html\n\u003cset [target]=\"object\" property=\"prop\" value=\"value...\"\u003e\u003c/set\u003e\n```\n\n## 11. if\n`if` condition can be set by providing either (value1), (value2) or (value1, oper, value2):\n```html\n\u003cif [value1]=\"object\" oper=\"\u003e\" value2=\"50\"\u003e\n    \u003cthen\u003e\n        body goes here...\n    \u003c/then\u003e\n    \u003celse\u003e\n        else goes here...\n    \u003c/else\u003e\n\u003c/if\u003e\n```\n```html\n\u003cif [value1]=\"object\"\u003e\n\u003c/if\u003e\n```\n```html\n\u003cif [value2]=\"object\"\u003e\n\u003c/if\u003e\n```\n```html\n\u003cif value1=\":$param\"\u003e\n\u003c/if\u003e\n```\n```html\n\u003cif value1=\":param1 \u003e param2\"\u003e\n\u003c/if\u003e\n```\n\n## 12. switch\n```html\n\u003cswitch [value]=\"state\"\u003e\n    \u003ccase value=\"a\"\u003e\n        case 'a' body goes here...\n    \u003c/case\u003e\n    \u003ccase value=\"b\"\u003e\n        case 'b' body goes here...\n    \u003c/case\u003e\n    \u003ccase value=\"c\"\u003e\n        case 'c' body goes here...\n    \u003c/case\u003e\n\u003c/switch\u003e\n```\n\n## 13. counter\n`indexVar` default value is `$index`\n\n`from` default value is `0`\n\n`by` default value is `1`\n```html\n\u003ccounter [from]=\"from\" [to]=\"to\" [by]=\"by\" indexVar=\"i\"\u003e\n    \u003cif value1=\":i % 2 === 0\"\u003e\n        \u003cthen\u003e\n            \u003cexec function=\":console.log\" params=\":[i]\"\u003e\u003c/exec\u003e\n        \u003c/then\u003e\n    \u003c/if\u003e\n\u003c/counter\u003e\n```\n\n## 14. foreach\n`itemVar` default value is `$item`.\n\n`indexVar` default value is `$index`.\n```html\n\u003cforeach [items]=\"data\" itemVar=\"item\" indexVar=\"i\"\u003e\n    \u003cif value1=\":i % 2 === 0\"\u003e\n        \u003cthen\u003e\n            \u003cexec function=\":console.log\" params=\":[i, item]\"\u003e\u003c/exec\u003e\n        \u003c/then\u003e\n    \u003c/if\u003e\n\u003c/foreach\u003e\n```\n\n## 15. while\n```html\n\u003cwhile [value]=\"value\"\u003e\n    ...\n\u003c/while\u003e\n```\n\n\u003cbr\u003e\n\n\n# Custom Binding\nYou can always use Angular binding (e.g. [value1]=\"value\") with any property in any action or trigger.\n\nUsing 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.\n\nExample:\n```html\n\u003cif value1=\":index === 0\"\u003e\n    ...\n\u003c/if\u003e\n```\nUnlike Angular, the code after `:` can't access variables outside the scope, only can access variables that passed in `[param]` attribute.\n\nExample of passing param:\n```html\n\u003cif value1=\":h \u003e 0 \u0026\u0026 h \u003c 200\" [param]=\"{ h: formGroup.controls['height'].value }\"\u003e\n    \u003ccss-translate property=\"y\" element=\"#element-id\" value=\":h\"\u003e\u003c/css-translate\u003e\n\u003c/if\u003e\n```\n\n\u003cbr\u003e\n\n# Extending Triggers\nTrigger is an Angular Component, inherted from TriggerBase.\n\nExample:\n```javascript\nimport { Component } from '@angular/core';\nimport { TriggerBase } from 'ng-interactions';\n\n@Component({\n    selector: 'my-trigger',\n    template: ''\n})\nexport class MyCustomTrigger extends TriggerBase {\n    constructor() {\n        super();\n    }\n\n    protected onLoad() {\n        // trigger loaded === ngAfterViewInit()\n    }\n    \n    when_you_need_to_execute_actions() {\n        this.fire(params);\n    }\n}\n```\n\n\u003cbr\u003e\n\n# Extending Actions\nAction is an Angular Component inherted from `ActionBase`, and implements `executeInternal` function.\n\nDon't forget to add `providers` to be discoverable and executed automatically.\n\nExample:\n```javascript\nimport { Component, forwardRef } from '@angular/core';\nimport { ActionBase } from 'ng-interactions';\nimport { Observable } from 'rxjs/Observable';\nimport 'rxjs/add/observable/empty';\n\n@Component({\n    selector: 'my-action',\n    template: '',\n    providers: [{provide: ActionBase, useExisting: forwardRef(() =\u003e MyCustomAction) }]\n})\nexport class MyCustomAction extends ActionBase {\n    constructor() {\n        super();\n    }\n\n    @Input() myProp: any;\n\n    protected executeInternal(params: any): Observable\u003cany\u003e {\n        // custom implementation goes here...\n\n        // call tryExecuteCode to evaluate code from myProp (e.g. myProp=\":user code...\"). \n        let value = this.tryExecuteCode(params, this.myProp);\n        // use `value` as you want.\n\n        // call extendParams to extend parameters to \n        params = this.extendParams(params);\n        let value = this.tryExecuteCode(params, this.myProp);\n        \n        return Observable.empty();\n    }\n}\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaseemdev%2Fng-interactions","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwaseemdev%2Fng-interactions","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwaseemdev%2Fng-interactions/lists"}