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: 3 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 8 years ago)
• Default Branch: master
• Last Pushed: 2020-09-05T17:16:41.000Z (over 4 years ago)
• Last Synced: 2024-09-28T17:21:37.081Z (4 months 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.