https://github.com/mlynch/stencil-transform-angularjs

Prototype AngularJS component/directive generator from a typed web component
https://github.com/mlynch/stencil-transform-angularjs

Last synced: 22 days ago
JSON representation

Prototype AngularJS component/directive generator from a typed web component

• Host: GitHub
• URL: https://github.com/mlynch/stencil-transform-angularjs
• Owner: mlynch
• Created: 2017-10-17T18:06:48.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-18T18:30:11.000Z (about 7 years ago)
• Last Synced: 2024-12-05T11:04:19.165Z (29 days ago)
• Language: JavaScript
• Homepage:
• Size: 27.3 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Stencil Transform for AngularJS

This transform creates a compatible AngularJS (1.5+) component for a typed web component generated with Stencil.

### Usage:

First, find the `d.ts` file for your Stencil component, which will be in `dist/collections/components/YOUR-COMPONENT/your-component.d.ts`

Then, inside of this repo, run

```bash

npm run build your-component.d.ts yourNgModuleName output.js

```

* `your-component.d.ts` is the type file generated from stencil and found above,

* `yourNgModuleName` is the module used in your app (for example, `myApp`)

* `output.js` is the file where the angular code will be generated.

### Angular Usage

This transform works by creating a simple directive for your web component with the same name, and mappings for 

each prop and custom event.

This transform turns each prop into `prop-*` on the angular directive.

For example, with a web component that expects the following props:

```typescript

export declare class MyComponent {

    first: string;

    last: string;

    date: Date;

    onMyClick: EventEmitter;

    handleClick(e: any): void;

    render(): JSX.Element;

}

```

Your Angular directive will use the following form:

```html

```