All Projects → camargo → ng-elm

camargo / ng-elm

Licence: BSD-3-Clause license
Write Angular components in Elm.

Programming Languages

typescript
32286 projects
javascript
184084 projects - #8 most used programming language
elm
856 projects
HTML
75241 projects
CSS
56736 projects

Projects that are alternatives of or similar to ng-elm

Ngx Echarts
An angular (ver >= 2.x) directive for ECharts (ver >= 3.x)
Stars: ✭ 820 (+1900%)
Mutual labels:  angular2, ng2, ngx
Ng2 Smart Table
Angular Smart Data Table component
Stars: ✭ 1,590 (+3778.05%)
Mutual labels:  angular2, ng2, angular-2
Angular2 Carousel
An lightweight , touchable and responsive library to create a carousel for angular 2 / 4 / 5
Stars: ✭ 26 (-36.59%)
Mutual labels:  angular2, ng2, ngx
Ngx Date Fns
⏳ date-fns pipes for Angular 2.0 and above ⏳
Stars: ✭ 135 (+229.27%)
Mutual labels:  angular2, ng2, ngx
ng-seed
Simple Angular seed project with commonly used features.
Stars: ✭ 12 (-70.73%)
Mutual labels:  angular2, ng2, angular-2
awesome-angular
💖 A list of awesome Angular (2️⃣➕) resources
Stars: ✭ 61 (+48.78%)
Mutual labels:  angular2, ng2, ngx
ng-data-picker
🏄🏼 A data picker based on Angular 4+ (like native datetime picker of iOS)
Stars: ✭ 24 (-41.46%)
Mutual labels:  angular2, ng2
ic-datepicker
Angular (2+) datepicker component
Stars: ✭ 27 (-34.15%)
Mutual labels:  angular2, ng2
ng2-fontawesome
An easy-to-use directive for font awesome icons.
Stars: ✭ 20 (-51.22%)
Mutual labels:  angular2, ng2
ng2-tooltip-directive
The tooltip is a pop-up tip that appears when you hover over an item or click on it.
Stars: ✭ 101 (+146.34%)
Mutual labels:  angular2, ngx
Pinterest
PinWork(Pinterest for bloggers) built with ❤️ using Angular2 (4.0.0)
Stars: ✭ 197 (+380.49%)
Mutual labels:  angular2, angular-2
ng2-storage
A local and session storage wrapper for angular 2.
Stars: ✭ 14 (-65.85%)
Mutual labels:  angular2, ng2
general-angular
Realtime Angular Admin/CRUD Front End App
Stars: ✭ 24 (-41.46%)
Mutual labels:  angular2, angular-2
ngx-echarts
Apache ECharts component for Angular(基于 Angular 的 Apache ECharts 组件)
Stars: ✭ 82 (+100%)
Mutual labels:  ng2, ngx
angular2-signature-pad
Signature pad component for Angular 2.x and above.
Stars: ✭ 17 (-58.54%)
Mutual labels:  angular2, ng2
ng2-acl
Role based permissions for Angular v2++
Stars: ✭ 15 (-63.41%)
Mutual labels:  angular2, angular-2
Ngx File Drop
Angular 11 file and folder drop library
Stars: ✭ 220 (+436.59%)
Mutual labels:  angular2, ngx
laravel5Angular4
Laravel 5.4 & Angular 4.3.4
Stars: ✭ 37 (-9.76%)
Mutual labels:  angular2, angular-2
angular-progress-http
[DEPRECATED] Use @angular/common/http instead
Stars: ✭ 43 (+4.88%)
Mutual labels:  angular2, ng2
Angular2-RecordRTC
A demonstration of RecordRTC working with Angular 2
Stars: ✭ 38 (-7.32%)
Mutual labels:  angular2, angular-2

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.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].