CODEWITHSUNDEEP
javascriptangulargithubembeddinggist
devSK
devSK

Reputation: 2026

How to embed a GitHub gist in the Angular template?

Angular ignores script tags in its template, but they are required to load GitHub gist. What is the best practice to do this? Using iframe? Creating script tag dynamically? Or something else?

Upvotes: 4

Views: 1616

Answers (3)

user9989320
user9989320

Reputation:

I used angular-gist-embed several times now using Bower to achieve this.

  • Just install it like: bower install angular-gist-embed

  • Then add it: angular.module('myModule',['gist-embed'])

And I use the particular GitHub Gist's id to embed it:

<code data-gist-id="5457595"></code>

You can find more examples here.

Upvotes: 0

devSK
devSK

Reputation: 2026

One method is to create an iframe with script inside and append it whenever you want your gist to appear (based on jasonhodges solution).

Template

 <iframe #iframe type="text/javascript"></iframe>

Component

@ViewChild('iframe') iframe: ElementRef;

gistUrl: string;

ngAfterViewInit() {
  const doc = this.iframe.nativeElement.contentDocument || this.iframe.nativeElement.contentElement.contentWindow;
    const content = `
        <html>
        <head>
          <base target="_parent">
        </head>
        <body>
        <script type="text/javascript" src="${this.gistUrl}"></script>
        </body>
      </html>
    `;
    doc.open();
    doc.write(content);
    doc.close();
}

Upvotes: 5

user9973168
user9973168

Reputation:

Use angular-gist or ngx-gist to embed GitHub gists.

angular-gist:

Install:

npm install angular-gist --save

Usage as module:

angular.module('myApp', ['gist']);

Usage as directive:

<gist id="1234556"></gist>

ngx-gist:

Install:

npm i --save ngx-gist

Usage:

import { NgxGistModule } from 'ngx-gist/dist/ngx-gist.module';

@NgModule({
    declarations: [
    AppComponent
    ],
    imports: [
        BrowserModule,
        FormsModule,
        HttpModule,
        NgxGistModule
    ],
    providers: [],
    bootstrap: [AppComponent]
})
export class AppModule { }

for your own implementation:

check out how you can use an iframe for this

Upvotes: 1

Related Questions