ng-elm

This package lets you embed Elm programs inside of Angular components. Based off of: https://github.com/evancz/react-elm-components

Installation

npm install ng-elm --save

Example

• Elm Buttons - Code

Usage

After compiling your Elm program into JavaScript, you can embed it in Angular. This example uses the Elm buttons program :

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: '<ng-elm [src]="Buttons"></ng-elm>',
})
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 are also implemented.