title: Facebook Posts not showing up in angular 4 using ngx-facebook and ngFor
body: <p>Ok this is a bit of a strange issue.
  I have a service which calls the Facebook Graph API to get a list of posts on a page.
  If I output the values returned to an anchor tag they show up fine and you can click on them and it will take you to the post.
  If i take one of these URL and use it for the  tags href the post shows up. However, if i use ngFor to loop through the return values and use these as the URL nothing shows up. I've tried this using both a div surround the tag of the ngFor in the tag and still nothing shows up.</p>
  
  <p><strong>Facebook post component typescript</strong></p>
  
  <pre><code>import { Component, OnInit } from '@angular/core';
  import {FacebookService, InitParams} from 'ngx-facebook';
  import {FaceBookPostsService} from'../providers/facebook-graph-service.service';
  import {Observable} from 'rxjs';
  
  
  
  @Component({
    selector: 'app-facebook-posts',
     templateUrl: './facebook-posts.component.html',
    styleUrls: ['./facebook-posts.component.scss']
  })
  export class FacebookPostsComponent implements OnInit {
  
  
  results= [];
  error:any;
  facebook:any;
  constructor(private fb: FacebookService, private fbPost:FaceBookPostsService) {
      let initParams: InitParams = {
        appId: '***********',
        xfbml: true,
        version: 'v2.8'
      };
      fb.init(initParams);
  
  
      }
    ngOnInit() {
      this.fbPost.getPosts().subscribe(
        data =&gt; { this.results = data;
        console.log('values  in results');
        console.log(this.results);
        for (let i of this.results){
  
           console.log('url is ' + i.permalink_url);}
        },
  
        error =&gt; console.log(error)
      );
  
   }
  
  }
  </code></pre>
  
  <p><strong>Face post component template</strong>
       <h1>Our Facebook Posts</h1></p>
  
  <pre><code>  &lt;div  *ngFor="let post of  results.data"&gt;
    &lt;fb-post  href="{{post.permalink_url}}" &gt;&lt;/fb-post&gt;
      &lt;a href="{{post.permalink_url}}"&gt;{{post.permalink_url}}&lt;/a&gt;
  
  
  &lt;/div&gt;
  
   &lt;fb-post *ngFor="let post of  results.data" href="{{post.permalink_url}}"&gt;&lt;/fb-post&gt;
  
    &lt;h2&gt; post Test&lt;/h2&gt;
    &lt;fb-post href="https://www.facebook.com/D2DMARYHILL/videos/169438470323930/"&gt;
   &lt;/fb-post&gt;
  </code></pre>
  
  <p>The results of this are shown in the image below.
  <a href="https://i.stack.imgur.com/ndpIK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ndpIK.png" alt="The reuslts of our facebook post component"></a>
  As you can see the URLs are being returned, however, when they are used in the <code>&lt;fb-post&gt;</code> as the URL for its href attribute using an angular variable then nothing is showing up. However, if I place one of the urls and hardcode it as the href then the post is returned. This is a real head-scratcher so I'm hoping  one of you can help me resolve my issue.</p>