Question: 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?

Answer: 
One method is to create an `iframe` with `script` inside and append it whenever you want your gist to appear (based on [jasonhodges](https://github.com/jasonhodges/ngx-gist/blob/master/lib/ngx-gist.ts) 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();
}

```
Use [angular-gist](https://github.com/scottcorgan/angular-gist) or [ngx-gist](https://github.com/jasonhodges/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**](https://github.com/jasonhodges/ngx-gist/blob/master/lib/ngx-gist.ts)