ekkolon / ngx-gist

Embedding GitHub Gists in Angular apps made easy

ngx-gist

A simple and lightweight library for embedding GitHub Gists in your Angular applications.

Features

• Embed all files from a GitHub gist
• Embed a single target file
• Auto-sized iframe
• Runs outside NgZone

Requirements

Make sure to have iframe-resizer installed. This library is needed for auto-resizing the iframe in which the gist is rendered.

npm install iframe-resizer

Install ngx-gist

npm install @ekkolon/ngx-gist

Usage

// app.module.ts

import {NgxGistModule} from '@ekkolon/ngx-gist'

export class AppModule {
    ...
    imports: [
        ...
        NgxGistModule
    ]
}

<!-- app.component.html -->
...

<!-- Display all files -->
<div class="my-awesome-gist-container">
  <ngx-gist [gistId]="GIST_ID"></ngx-gist>
</div>

<!-- Display a specific file -->
<div class="my-awesome-gist-container">
  <ngx-gist [gistId]="GIST_ID" [file]="my-gist-file.ts"></ngx-gist>
</div>

...

Authors

• @ekkolon

License

MIT

Acknowledgements

• iFrame Resizer This library is used to adjust the iframe's height automatically.