https://github.com/camargo/ng-elm
Write Angular components in Elm.
https://github.com/camargo/ng-elm
angular angular-2 angular2 elm ng-elm ng2 ngx
Last synced: 5 months ago
JSON representation
Write Angular components in Elm.
- Host: GitHub
- URL: https://github.com/camargo/ng-elm
- Owner: camargo
- License: bsd-3-clause
- Created: 2016-08-02T18:04:02.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2020-09-05T17:16:41.000Z (over 5 years ago)
- Last Synced: 2025-02-08T03:28:29.659Z (about 1 year ago)
- Topics: angular, angular-2, angular2, elm, ng-elm, ng2, ngx
- Language: TypeScript
- Homepage:
- Size: 152 KB
- Stars: 43
- Watchers: 6
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# ng-elm
This package lets you embed [Elm](https://elm-lang.org/) programs inside of [Angular](https://angular.io/) components.
Based off of: [https://github.com/evancz/react-elm-components](https://github.com/evancz/react-elm-components)
## Installation
```bash
npm install ng-elm --save
```
## Example
- Elm Buttons - [Code](https://github.com/camargo/ng-elm/tree/master/example)
## Usage
After compiling your Elm program into JavaScript, you can embed it in Angular.
This example uses the [Elm buttons program](https://guide.elm-lang.org/architecture/buttons.html) :
```ts
import { NgModule, Component, OnInit } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { NgElmModule } from 'ng-elm';
import { Elm } from './buttons.js';
@Component({
selector: 'my-app',
template: '',
})
class AppComponent implements OnInit {
Buttons: any;
ngOnInit() {
this.Buttons = Elm.Buttons;
}
}
@NgModule({
bootstrap: [AppComponent],
declarations: [AppComponent],
imports: [BrowserModule, NgElmModule],
})
export class AppModule {}
```
Note that flags (data passed into your Elm program from Angular), and [ports](https://guide.elm-lang.org/interop/ports.html) are also implemented.