Home

Awesome

angular2 embedly

Build Status npm version devDependency Status GitHub issues GitHub stars GitHub license

Demo

https://frnd.github.io/angular2-embedly/demo/

Table of contents

About

Embedly makes it easy display third party content in your website. THis project contains an Angular2 directive and a service to ease the useage of embedly in your angularjs application.

Installation

Install through npm:

npm install --save angular2-embedly

Usage

In order to use this module you will need a Embedly API key. To configure the api key we use a value provider. See this example:

    import { Component } from '@angular/core';
    import { provide }    from '@angular/core';
    import { EmbedlyDirective, EmbedlyService } from './../angular2-embedly';

    @Component({
    selector: 'my-app',
    template: `
        <form>
        <div class="form-group">
            <label for="urlToEmbed">Url to embed</label>
            <input type="text" class="form-control" id="urlToEmbed" [(ngModel)]="url" placeholder="Paste an URL to embed...">
        </div>
        </form>
        <em-embed [url]="url" [width]="600"></em-embed>
        `,
    directives: [EmbedlyDirective],
    providers: [provide('EMBEDLY_KEY', { useValue: 'YOUR_EMBEDLY_KEY' })]
    })
    export class AppComponent {
    url: string = "https://www.youtube.com/watch?v=jofNR_WkoCE"
    }

The important part of the code is:

    providers: [provide('EMBEDLY_KEY', { useValue: 'YOUR_EMBEDLY_KEY' })]

With this line you creates a new value provider named EMBEDLY_KEY that will be injected in the EmbedlyService.

You may also find it useful to view the demo source.

Security considerations

This module changes native element innerHtml with the html code that embedly provides.

Usage without a module bundler

<script src="node_modules/angular2-embedly/angular2-embedly.js"></script>
<script>
    // everything is exported angular2Embedly namespace
</script>

Documentation

All documentation is auto-generated from the source via typedoc and can be viewed here: https://frnd.github.io/angular2-embedly/docs/

Development

Prepare your environment

Development server

Run npm start to start a development server on port 8000 with auto reload + tests.

Testing

Run npm test to run tests once or npm run test:watch to continually run tests.

Release

npm run release

License

MIT