FB comment integration

src/app/home-details/home-details.page.html

@@ -31,6 +31,14 @@
             <figure *ngFor="let image of newsDetails.images">
                 <img [src]="image_url + getLowRestImagePath(image.data.imagePath) + image.data.imageName">
             </figure>
+        </ng-container>
+        
+
+        <ng-container *ngIf="alias_title">
+            <div id="fb-root"></div>
+            <div class="fb-comments" data-width="300px" 
+            data-href="https://www.punjabkingsipl.in/news/{{ alias_title }}" 
+            data-numposts="20"></div>
         </ng-container>        
 
     </section>

src/app/home-details/home-details.page.ts

@@ -16,6 +16,7 @@ export class HomeDetailsPage implements OnInit {
     myComment: string = '';
     image_url = IMAGE_BASE_URL;
     newsDetails: any = {};
+    alias_title: string = '';
 
     constructor(
         private route: ActivatedRoute,
@@ -40,16 +41,13 @@ export class HomeDetailsPage implements OnInit {
     }
 
     ngOnInit() {
-        let alias_title = this.route.snapshot.paramMap.get('alias_title');
+        this.alias_title = this.route.snapshot.paramMap.get('alias_title');
         let type = this.route.snapshot.paramMap.get('type');
 
         // type 'news' | 'videos' | 'gallery'
-
-        console.log(alias_title);
-        console.log(type);
-
+        
         if (type === 'news') {
-            this.newsService.getArticleDetails(alias_title).then((data: any) => {
+            this.newsService.getArticleDetails(this.alias_title).then((data: any) => {
                 
                 if (this.platform.is('android') || this.platform.is('capacitor')) {
                     this.newsDetails = JSON.parse(data.data)['content'].data;
@@ -64,7 +62,7 @@ export class HomeDetailsPage implements OnInit {
         }
 
         if (type === 'videos') {
-            this.newsService.getVideoDetails(alias_title).then((data: any) => {
+            this.newsService.getVideoDetails(this.alias_title).then((data: any) => {
 
                 
                 if (this.platform.is('android') || this.platform.is('capacitor')) {
@@ -80,7 +78,7 @@ export class HomeDetailsPage implements OnInit {
         }
 
         if (type === 'gallery') {
-            this.newsService.getGalleryDetails(alias_title).then((data: any) => {
+            this.newsService.getGalleryDetails(this.alias_title).then((data: any) => {
 
                 
                 if (this.platform.is('android') || this.platform.is('capacitor')) {
@@ -95,6 +93,22 @@ export class HomeDetailsPage implements OnInit {
             });
         }
     }
+    
+    ngAfterViewInit(){
+        (function(d, s, id) {
+          var js, fjs = d.getElementsByTagName(s)[0];
+          js = d.createElement(s); js.id = id;
+          js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.4";
+      
+          if (d.getElementById(id)){
+            //if <script id="facebook-jssdk"> exists
+            delete (<any>window).FB;
+            fjs.parentNode.replaceChild(js, fjs);
+          } else {
+            fjs.parentNode.insertBefore(js, fjs);
+          }
+        }(document, 'script', 'facebook-jssdk'));
+    }
 
     getLowRestImagePath(path: string) {
         return path.replace("/0/", "/4-3/388-218/");