blog-detail.component.ts

//blog-detail.component.ts
import { Component, OnInit, Input, ElementRef } from '@angular/core';
import { ActivatedRoute } from '@angular/router';
import { AngularFirestore } from 'angularfire2/firestore';
import { BlogService } from '../blog.service';
import { BlogPost } from '../../firebasecms/models/blog-post';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
  selector: 'blog-detail',
  templateUrl: './blog-detail.component.html',
  styleUrls: ['./blog-detail.component.scss']
})

export class BlogDetailComponent implements OnInit {
  public blogPost: BlogPost;

  cssUrl: string;

  constructor(
    private route: ActivatedRoute, 
    private angularFireStore: AngularFirestore, 
    private blogService: BlogService, 
    private elem: ElementRef,
    private http: HttpClient,
    public sanitizer: DomSanitizer
  ) {}

  ngOnInit() {
    //...populating this.blogPost here with html contents
    this.fixScripts();
  }

  getJsonP(url, element) {
    return this.http.jsonp(url, 'callback').subscribe(result => {
      this.cssUrl = this.cssUrl ? this.cssUrl : result['stylesheet'];
      element.parentNode.insertAdjacentHTML('beforeend', result['div']);
    });
  }

  fixScripts(){
    if(this.blogPost && this.elem.nativeElement.querySelectorAll('.blog-detail')){
      let elements = this.elem.nativeElement.querySelectorAll('script');
      elements.forEach(element => {
        let gistId = element.src.split("/")[4].split(".js")[0];
        let gistJsonpUrl = `https://gist.github.com/${gistId}.json?callback=`;
        this.getJsonP(gistJsonpUrl,element);
      });
    } else {
      setTimeout(()=>{
        this.fixScripts();
      },100);
    }
  }
  
}