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?
Add a comment
|
3 Answers
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();
}
Comments
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:
2 Comments
Serhii Ka.
"AngularJS directive for embedding Github gists." I need a solution for Angular 2+ preferably with no redundant dependencies.
Then check out the sources of these repositories. They use an iframe.
I used angular-gist-embed several times now using Bower to achieve this.
Just install it like:
bower install angular-gist-embedThen 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.